IE中CSS变量的变通方法？_Css_Internet Explorer_Outsystems

IE中CSS变量的变通方法？

css internet-explorer

IE中CSS变量的变通方法？,css,internet-explorer,outsystems,Css,Internet Explorer,Outsystems,我目前正在Outsystems中开发一个web应用程序，在这个应用程序中，我需要自定义CSS，在CSS中我使用变量。我需要保证该应用程序可以跨浏览器工作，包括在Internet Explorer中。IE不支持CSS变量，如下图所示由于我必须使用CSS变量，在IE中使用变量是否有解决方法？如果我没有错，那么有一个解决方法，CSS#ID选择器。我想这应该适用于IE>6。。所以你可以 .one { }; <div class="one"> .one{}；应作为 #one {};

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

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

如果我没有错，那么有一个解决方法，CSS#ID选择器。我想这应该适用于IE>6。。所以你可以

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

.one{}；

应作为

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

#一{}；

在“普通”css中还没有办法，但可以看看sass/scss或更少

下面是一个scss示例

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

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

是的，有一种方法，与使任何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变量变得无用，但我恳请您继续使用它们，因为它将作为一个重要的提醒，提醒您这些值在其他地方被引用，并且在所有情况下都需要更新，否则，您会忘记更新“color”的每一个相关事件，并且由于相关css值不同步，因此您的样式不一致。这个变量更像是一个注释，但却是一个非常重要的注释。

如果有人遇到这个问题，我将它设置为类似的问题

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

我在变量之前添加了背景色，因此如果没有加载，它将返回到十六进制

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

我建议将css变量设置为sass变量，然后使用sass插值来渲染元素中的颜色

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

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

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

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

旁注：如果您将：root{}保留在main.css文件中，并将其注释掉，那么以后如果您想更新回退颜色，可以使用它来跟踪这些十六进制代码

另一种方法是在JS文件中声明颜色（在我的例子中，我使用的是react），然后使用您在JS文件中定义的变量

例如：

在globals.js中

在你的档案里

然后只需使用

COLORS.yellow

，

COLORS.purple

，等等。

有一个polyfill，它几乎可以完全支持IE11中的CSS变量：

（我是作者）

该脚本利用了这样一个事实，即IE具有最小的自定义属性支持，在这种支持下，可以在考虑级联的情况下定义和读取属性。

.myEl{-ie测试：'aaa'}//只允许一个破折号！“-”

然后用javascript阅读：

getComputedStyle（查询选择器（'.myEl'））['-ie测试']

自述文件：

功能

处理动态添加的html内容
处理动态添加的元素
链接
```
--bar:var（--foo）
```
回退
```
var（--颜色，蓝色）
```
：焦点，：目标，：悬停

js集成：

```
style.setProperty（'--x'，y'）
```
```
style.getPropertyValue（'--x'）
```

getComputedStyle（el）.getPropertyValue（'--inherited'）

内联样式：

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

GitHub：
NPM：
演示：

自述文件：
功能
: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))); 
}


CSS自定义属性到静态值的客户端转换
在现代浏览器和传统浏览器中实时更新运行时值
转换
、
和@import
CSS
将相对url（）
路径转换为绝对url
支持链式和嵌套的var（）
函数
支持var（）
函数回退值
支持web组件/阴影DOM CSS
观看模式在
和
更改时自动更新
UMD和ES6模块可用
包括打字脚本定义
轻量级（6k分钟+gzip）和无依赖性

限制
: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))); 
}


自定义属性支持仅限于：root
和：host
声明
var（）的使用仅限于属性值（per）

以下是该库可以处理的几个示例：
根级别自定义属性
: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))); 
}

链接自定义属性
: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))); 
}

嵌套的自定义属性
: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))); 
}

回退值
: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
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>


@导入“/absolute/path/to/style.css”；
@导入“./relative/path/to/style.css”；

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


#影子根
.我的自定义元素{
颜色：var（--测试颜色）；
}
你好

为了完整起见：
希望这有帮助
（无耻的自我推销：检查）
你可以使用sass或更少的替代品。你也可以看看这里：对于还不支持css变量的浏览器，有一个polifill，Internet explorer和edge也有：你可以检查这个：你不明白这个问题。这离使用变量还差得远。想象一下，您希望对背景和字体使用相同的颜色。您需要定义两个属性并硬编码颜色值。现在将其扩展到20个属性。难以管理，对吗？