问题标签 [css-variables]

我正在处理一个很长的 CSS 文件。我知道客户可能会要求更改配色方案，并且想知道：是否可以将颜色分配给变量，以便我可以更改变量以将新颜色应用于使用它的所有元素？

请注意，我不能使用 PHP 来动态更改 CSS 文件。

我正在尝试使用 CSS 变量。我在网上寻找教程，到目前为止所有的教程都有效。

这是我的CSS：

我也试过：

它们都不起作用，我做错了什么？谢谢

我正在尝试使用 CSS vars 进行一些实验，但我无法让它工作或找到任何关于它的文档。有谁知道是否可以在 CSS3 选择器中使用 CSS var？

我做了下面的例子来解释我想要做什么。此示例仅适用于 Chrome。

JSFIDDLE

http://jsfiddle.net/68Rrn/

CSS

HTML

我的 Chrome 浏览器刚刚从 28 版切换到 29 版。切换后，我的 css3 代码在新版本中停止工作，我想知道是否有人知道如何解决这个问题，而无需将我的浏览器设置回 28 版？

更新 Chrome 30从 Chrome 29 过渡到 Chrome 30 也杀死了 CSS 变量。启用实验性 WebKit 功能标志不再是一个选项。

我一直在使用实验性的 WebKit 功能，特别是 CSS 变量。以下功能是我特别希望再次工作的功能：

以前我使用 CSS 变量所要做的就是启用标志（见下图）

我正在开发一个完整的 CSS 选项卡导航。这就是我想要做的：http: //jsfiddle.net/7fZnn/1/

但我不想使用内联 CSS 来放置标签。所以我研究什么可以取代这个内联 CSS。我发现那些：

• attr() 函数，仅当您选择和元素时支持内容属性：before of :after
• CSS 计数器。那太好了，但是作为 attr() 函数，这仅适用于内容属性
• CSS 变量，这应该在 Firefox 29 中工作，实际上我使用 30。但它没有，我不知道为什么......

这是我的带有 CSS 变量的代码（以及注释中的计数器）：http: //jsfiddle.net/j8wxQ/2/

的HTML

CSS

那么，我错过了什么？你认为我可以用别的东西来实现我的目标吗？

谢谢你的帮助！

我之前针对旧版 Chrome提出了一个非常相似的问题。但是，我再次很难让 CSS 变量正常工作，这次是在 Windows 7 上的 Chrome 34（版本 34.0.1847.131 m）中。（没有在其他操作系统上尝试过。）

我看到语法已更改（对于旧的，请参阅上面链接的问题），新的语法是CSS 变量规范中的当前内容。：

还需要注意的是，我确实启用了启用实验性 Web 平台功能标志。但是，如果您看一下这个小提琴，我既无法获得旧语法，也无法在 Chrome 34 中使用新语法。

谷歌搜索没有发现任何已知的 Chrome 错误。我很好奇是否有什么新的东西我必须做才能让它工作？我做错什么了吗？有没有其他人遇到过这个？

最新版本的 Firefox 支持CSS 变量，但 Chrome、IE 和其他浏览器不支持。应该可以访问 DOM 节点或编写一个返回浏览器是否支持此功能的小方法，但我无法找到当前能够执行此操作的任何内容。我需要的是一个解决方案，如果浏览器不支持该功能，我可以将其用作运行代码的条件，例如：

有没有办法在指定具有透明度的渐变颜色时使用 CSS 变量，例如

我试图制作一个“多行”精灵 CSS 动画（受此启发：http ://codepen.io/simurai/pen/vmhuJ ），却发现 Firefox 不支持background-position-x或-y.

-x/-y这里详细讨论了缺乏： https ://bugzilla.mozilla.org/show_bug.cgi?id=550426 ，并且提出的解决方案（background-position-y 在 Firefox 中不起作用（通过 CSS）？）是使用最近在 Firefox 中引入的CSS 变量。

但是，看起来不@keyframes支持从动画更新 CSS 变量？

这是一个 JSFiddle（注意：仅限 Firefox）：http: //jsfiddle.net/phoj0kq5/
我在动画中添加了闪烁的边框只是为了确保它正在运行，但是螃蟹不会打响指。我在使用 CSS变量错误，或者它们根本不支持动画？

编辑

更新了实际上在 Chrome 中有效的小提琴（仍然不在 Firefox 中）：http: //jsfiddle.net/phoj0kq5/1/

我想在 Bootstrap 主题中使用 CSS 变量，以便将来可以方便地更改主题的配色方案。

此图表显示 Firefox 是目前唯一支持 CSS 变量的浏览器。

问题

如何使用 Polymer 的 Polyfills 填充对 CSS 变量的跨浏览器支持？

我使用 Yeoman Polymer Generator 中的 Polymer Starter Kit 搭建了这个项目。我用 Bootstrap 主题替换了 PSKapp目录，并将原来的 app 目录重命名为app1，主题目录重命名为app.

我知道一切都已正确配置，因为它使用 Firefox 可以按预期工作。所以我只需要专注于让 Polyfills 工作。

我在我的index.html. 但它不起作用。

编辑：与 Polystyles 相关的 其他问题。

文档令人困惑。例如，url 参数应该是什么以及做什么？像进口一样吗？如果我的 dom 模块是本地文件，它可以指向内部路径或文件吗？另外，dom-module 是一个 .css 文件还是一个 .html 文件，就像我见过的其他 DOM 模块/元素一样？