Question

我目前正在Outsystems开发一个Web应用程序，我需要自定义CSS，我正在使用变量。我需要保证应用程序跨浏览器工作，包括在Internet Explorer中。 IE不支持CSS变量，如下图this source中所示。

由于我必须使用CSS变量，IE中是否有使用变量的解决方法？

Answer 1

是的，有一种方法，就像你使任何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值不同步。该变量将更多地作为评论，但非常重要。

Answer 2

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

a {
  background: var(--new-color);
  border-radius: 50%;
}

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

a {
  background: #3279B8;
  background: var(--new-color);
  border-radius: 50%;
}

Answer 3

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

这是一个scss示例

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Answer 4

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로 대체됨 */
}

Answer 5

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

例如：

在globals.js中

export const COLORS = {
  yellow: '#F4B400',
  yellowLight: '#F4C849',
  purple: '#7237CC',
  purple1: '#A374EB',
}

在您的文件中

import { COLORS } from 'globals'

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

Answer 6

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

GitHub ：https://github.com/jhildenbiddle/css-vars-ponyfill
NPM ：https://www.npmjs.com/package/css-vars-ponyfill
演示：https://codepen.io/jhildenbiddle/pen/ZxYJrR

自述文件：

功能

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

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

转换<link>，<style>和@import CSS

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

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

支持var()函数后备值

支持Web组件/影子DOM CSS

观看模式会根据<link>和<style>的更改自动更新

提供了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))); 
}

转换<link>，<style>和@import CSS

<link rel="stylesheet" href="/absolute/path/to/style.css">
<link rel="stylesheet" href="../relative/path/to/style.css">

<style>
    @import "/absolute/path/to/style.css";
    @import "../relative/path/to/style.css";
</style>

转换Web组件/影子DOM

<custom-element>
  #shadow-root
    <style>
      .my-custom-element {
        color: var(--test-color);
      }
    </style>
    <div class="my-custom-element">Hello.</div>
</custom-element>

出于完整性考虑：w3c specs

希望这会有所帮助。

（无耻的自我促进：检查）

Answer 7

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

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

Answer 8

有一个polyfill，它几乎可以完全支持IE11中的CSS变量：
https://github.com/nuxodin/ie11CustomProperties
（我是作者）

该脚本利用了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')



内联样式：<div ie-style="--color:blue"...

级联作品

继承工作

3k（min + gzip）以下且无依赖

演示：

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html

Answer 9

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

:root {    
    --text-color: #123456;
}

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

body {
    color: #{$text-color};
}

Answer 10

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

.one { };
<div class="one">

should work as

#one {};
<div id="one">

IE中CSS变量的解决方法？

10 个答案:

演示：