ie不支持css变量,IE中CSS变量的解决方法？

10 个答案:

答案 0 :(得分：18)

是的，有一种方法，就像你使任何css兼容一样：使用浏览器支持的特定css后备。

body {

--text-color: red;

}

body {

color: red /* default supported fallback style */

color: var(--text-color); /* will not be used by any browser that doesn't support it, and will default to the previous fallback */

}

这个解决方案非常冗余，“几乎”违背了css变量的目的......但是它对于浏览器兼容性是必要的。这样做本质上会使css变量无用，但我恳请你仍然使用它们，因为它将作为一个重要的提醒，这些值在其他地方引用，需要在所有情况下更新，否则你忘了更新每一个相关的出现“颜色”然后你有不一致的样式，因为相关的css值不同步。该变量将更多地作为评论，但非常重要。

答案 1 :(得分：6)

如果有人碰到这个，有一个类似的问题，我把它设置为这样。

a {

background: var(--new-color);

border-radius: 50%;

}

我在变量之前添加了背景颜色，所以如果它没有加载，它会重新落在十六进制上。

a {

background: #3279B8;

background: var(--new-color);

border-radius: 50%;

}

答案 2 :(得分：2)

“普通”css还没有办法，但要看看sass / scss或更低。

这是一个scss示例

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

答案 3 :(得分：1)

另一种方法是在JS文件中声明颜色(在我的情况下，我正在使用react)，然后只使用您在JS文件中定义的变量即可。

例如：

在globals.js中

export const COLORS = {

yellow: '#F4B400',

yellowLight: '#F4C849',

purple: '#7237CC',

purple1: '#A374EB',

}

在您的文件中

import { COLORS } from 'globals'

然后仅使用COLORS.yellow，COLORS.purple等

答案 4 :(得分：1)

是的，只要您正在处理根级自定义属性(IE9 +)。

自述文件：

功能

客户端将CSS自定义属性转换为静态值

在现代和旧版浏览器中实时更新运行时值

转换，

将相对的url()路径转换为绝对URL

支持链接和嵌套的var()函数

支持var()函数后备值

支持Web组件/影子DOM CSS

观看模式会根据和

提供了UMD和ES6模块

包括TypeScript定义

轻巧(至少6k + gzip)且无依赖项

限制

自定义属性支持仅限于:root和:host声明

var()的使用仅限于属性值(每个W3C specification)

以下是该库可以处理的一些示例：

根级自定义属性

:root {

--a: red;

}

p {

color: var(--a);

}

链接的自定义属性

:root {

--a: var(--b);

--b: var(--c);

--c: red;

}

p {

color: var(--a);

}

嵌套的自定义属性

:root {

--a: 1em;

--b: 2;

}

p {

font-size: calc(var(--a) * var(--b));

}

回退值

p {

font-size: var(--a, 1rem);

color: var(--b, var(--c, var(--d, red)));

}

转换，

@import "/absolute/path/to/style.css";

@import "../relative/path/to/style.css";

转换Web组件/影子DOM

#shadow-root

.my-custom-element {

color: var(--test-color);

}

Hello.

希望这会有所帮助。

(无耻的自我促进：检查)

答案 5 :(得分：1)

body {

--text-color : red; /* --text-color 정의 */

}

body {

color: var(--text-color, red); /* --text-color 정의되지 않으면 red로 대체됨 */

}

body {

color: var(--text-color, var(--text-color-other, blue));

/* --text-color, --text-color-other 가 정의되지 않으면 blue로 대체됨 */

}

答案 6 :(得分：0)

为变量创建一个单独的.css文件。将variable.css文件的内容复制/粘贴到main.css文件的末尾。查找main.css文件中的所有变量名称并将其替换为这些变量的十六进制代码。例如：ctrl-h查找var(-myWhiteVariable)并替换为＃111111。

侧面说明：如果将：root {}保留在main.css文件中并仅将其注释掉，则以后如果要更新后备颜色，可以使用它来跟踪那些十六进制代码。

答案 7 :(得分：0)

该脚本利用了IE具有最少的自定义属性支持这一事实，可以在定义和读取属性的同时考虑到级联。

.myEl {-ie-test:'aaa'} // only one dash allowed! "-"

然后在javascript中阅读它：

getComputedStyle( querySelector('.myEl') )['-ie-test']

自述文件：

功能

处理动态添加的html-内容

处理动态添加的-elements

链接--bar:var(--foo)

后备var(--color, blue)

：focus，：target，：hover

js集成：

style.setProperty('--x','y')

style.getPropertyValue('--x')

getComputedStyle(el).getPropertyValue('--inherited')

内联样式：

级联作品

继承工作

3k(min + gzip)以下且无依赖

演示：

答案 8 :(得分：-2)

我建议将css变量设置为sass变量，然后使用sass插值在元素中呈现颜色。

:root {

--text-color: #123456;

}

$text-color: var(--text-color);

body {

color: #{$text-color};

}

答案 9 :(得分：-16)

If im not wrong there is a workaround, the CSS #ID Selector. Which should work for IE > 6 I guess.. So you can

.one { };

should work as

#one {};