问题标签 [css-variables]

有没有办法使用 JavaScript 为 ie11 填充自定义 CSS 属性？我正在考虑加载，检查浏览器是否支持自定义属性，如果不支持，请对属性进行某种查找和替换。

这可以通过 JavaScript 或某些库实现吗？

谢谢

我将 CSS 变量用于主题颜色和主题背景，但我的代码在 IE 上不起作用。IE 对 CSS 变量的支持有什么技巧吗？

这是代码的链接，它不太长，54 行 + HTML：

https://codepen.io/Yonkai/pen/YrdNqE?editors=0100

我遇到的问题是我不明白这条线是如何工作的，在第 22 行：

在上下文中，我不知道如何处理 --i (index) 自定义 CSS 变量或访问这些索引，如何通过动画中的每个调用选择每个索引？（从 SASS 编译）：

我相信这与 calc() 或 var() 和自定义变量的功能无关，但老实说我傻眼了。

这是基于其他人的代码，他们有一个 youtube 视频，但没有太大帮助。

请帮助我找出为什么 CSS 变量中的算术运算会破坏代码。

我从一个带有一条规则的简单 CSS 文件开始：

在浏览器中，它按原样工作：字体大小为 16px，行高为 32px，字体本身为 Arial。

然后我添加了变量：

它也有效；认为行高是 16px，因为我使它等于字体大小。

但是当我乘以第二个值时，字体声明停止工作：

所有属性font-size、line-height和font-family都设置为浏览器默认值。

如果我将font速记属性拆分为三个不同的速记属性，代码将再次正常工作：

前面的代码示例有什么问题，有没有办法让它在不拆分为普通属性的情况下工作？

是否有任何优雅（即非冗长）的方式来在样式表中表达以下 CSS 样式？

我知道我可以使用 javascript 中的以下循环以计算方式将上述样式规则添加到 CSSOM：

但如果可能的话，我正在寻找某种简洁的 CSS-native 语法来表达上面的行。

例如。 使用 CSS 自定义属性可以实现一些聪明的事情吗？

请不要使用Less或Sass的解决方案。谢谢。

这是显示绝对定位的::after 伪元素的屏幕截图：

我正在开发一个网站，并针对 Firefox 和 Chrome 对其进行了优化。该项目包含一个名为的样式表base.css，它包含在所有页面中，其中包含一些全局设置和定义，包括我用来存储颜色值的变量列表，如下所示：

等等，并调用它们，例如：

当我在 Edge 中查看页面时，所有颜色都丢失了，当我使用 DOM 资源管理器时，它用红色下划线标记了所有变量的使用。Edge不支持这种方式的CSS变量吗？我能做些什么来解决这个问题？

我正在尝试使用基于动态值的自定义属性，例如attr().

例如，在下面的代码中，我尝试根据当前元素的属性访问两个自定义id属性。

但这显然失败了。

有没有办法做到这一点？

举个例子：

是否可以通过取消设置 CSS 变量再次使第二个“注释”变为红色？

我知道我只能将 CSS 变量应用于.article但假设我有很多类似的元素，我希望在其中应用主题，但只有少数例外。那么维护选择器将是相当乏味的。

我可以将主题选择器更改为，.theme :not(.note)但这不适用于.note嵌套在其他元素中的任何元素。

我的问题是为什么 CSS 变量需要添加回退的概念，而不是像其他 CSS 属性那样仅仅依赖于继承。

例如：

文本 3 最终变为红色而不是绿色或黄色。虽然关卡上有有效的属性，但它采用父颜色值，而不是验证同一关卡上是否有其他有效值。当变量名无效时会发生这种情况。

显然 CSS 变量有一个特殊的后备，所以你需要使用类似的东西：

但这意味着再次重复颜色，因为

不起作用。既不是：

或任何其他多个值。

也不支持像inherit , currentColor , initial等关键字。所以我不确定如何依赖继承，因为显然我需要非常明确地使用给定的值。在 Firefox 57.0.1 和 Chrome 63 上测试。

我知道CSS 变量仍然是工作草案，所以也许这就是当前行为的原因。

我有一个封装图片轮播的 Angular 组件。If 使用 :host 选择器使自己成为一个 flexbox 并使用 ngFor 为通过 @Input 属性传递给它的图片数组中的每张图片重复一个 img 标签。

我有两个相关的问题。

1）我想让图片的样式设置为固定的高度或宽度。2）我想在imgs上设置margin-right和margin-bottom以允许间隔图片。

棘手的部分是我希望在主机模板中确定这些设置，而不是轮播模板，以便它们可以根据特定页面的需要而变化。

我已经使用这样的自定义 css 属性让它工作：

图像列表 css：

调用模板css：

我收到以下警告：

自定义属性被忽略：不限于顶级 :root 元素（image-list { ... --pictureMaxHeight: ... }）

全文：

./src/app/pages/image-list-test/image-list-test.component.css 中的警告（发出的值而不是错误的实例） postcss-custom-properties：/home/username/wwwroot/src/ app/pages/image-list-test/image-list-test.component.css:2:5：自定义属性被忽略：不限于顶级 :root 元素（image-list { ... --pictureMaxHeight: ... }）NonErrorEmittedError：（发出的值而不是错误的实例）postcss-custom-properties：/home/username/wwwroot/src/app/pages/image-list-test/image-list-test.component。 css:2:5: 自定义属性被忽略：不在 Object.emitWarning (/home/username/wwwroot/node_modules) 的顶级 :root 元素 (image-list { ... --pictureMaxHeight: ... }) /webpack/lib/NormalModule.js:117:16) 在 result.warnings。forEach (/home/username/wwwroot/node_modules/postcss-loader/lib/index.js:149:49) at Array.forEach (native) at postcss.process.then (/home/username/wwwroot/node_modules/postcss- loader/lib/index.js:149:27) @ ./src/app/pages/image-list-test/image-list-test.component.ts 48:21-62 @ ./src/app/app. module.ts@./src/main.ts@multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

我尝试在 app.component.css 文件中声明变量，但它对收到的错误没有影响。

此外，为项目中的每个组件声明自定义属性会完全破坏封装。

有趣的是它可以工作，即使有警告。

我知道我可以声明一个自定义的 html 属性，但由于这与组件的结构无关，而且是纯粹的视觉样式，这对我来说似乎很臭。

我在这里错过了什么还是有更好的方法来解决这个要求？