IE 中 CSS 变量的解决方法？

Question

提问by Rafael Valente

I'm currently developing a web application in Outsystems in which I have the need to customize the CSS, in which I'm using variables. I need to guarantee the app works cross-browser, including in Internet Explorer. IE doesn't support CSS variables, as you can see in the picture below from this source.

我目前正在 Outsystems 中开发一个 Web 应用程序，我需要在其中自定义 CSS，我在其中使用变量。我需要保证应用程序可以跨浏览器运行，包括在 Internet Explorer 中。IE 不支持 CSS 变量，正如您在下图中从该来源看到的那样。

Since I have to use CSS variables, is there any workaround for the usage of variables in IE?

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

Answer 1

回答by Mohammed Siddeeq

Yes there is a way, the same way you make any css compatible: use a specific css fallback that is supported by the browser.

是的，有一种方法，与使任何 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 */
}

This solution is incredibly redundant and 'almost' defeats the purpose of css variables....BUT it is necessary for browser compatibility. Doing this would essentially make the css variables useless but I implore you to still use them because it will serve as an important reminder to the fact that these values are referenced elsewhere and need to be updated in all cases, otherwise you forget to update every related occurrence of 'color' and then you have inconsistent styling because relevant css values are out of sync. The variable will serve more as a comment but a very important one.

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

Answer 2

回答by Tobias Buschor

There is a polyfill, which enables almost complete support for CSS variables in IE11:
https://github.com/nuxodin/ie11CustomProperties
(i am the author)

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

The script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
then read it in javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']

该脚本利用了这样一个事实，即 IE 具有最少的自定义属性支持，其中可以在考虑级联的情况下定义和读取属性。
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
然后在javascript中阅读它：
getComputedStyle( querySelector('.myEl') )['-ie-test']

From the README:

从自述文件：

Features
handles dynamic added html-content
handles dynamic added , -elements
chaining --bar:var(--foo)
fallback var(--color, blue)
:focus, :target, :hover
js-integration:
style.setProperty('--x','y')
style.getPropertyValue('--x')
getComputedStyle(el).getPropertyValue('--inherited')
Inline styles: <div ie-style="--color:blue"...
cascade works
inheritance works
under 3k (min+gzip) and dependency-free

特征
处理动态添加的 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) 且无依赖

Demo:

演示：

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

Answer 3

回答by Derek MC

In case someone comes across this, has a similar issue where I had it set like this.

万一有人遇到这个，有一个类似的问题，我把它设置成这样。

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

I added the background colour before the variable so if that didn't load it fell back on the hex.

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

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

Answer 4

回答by jhildenbiddle

Yes, so long as you're processing root-level custom properties (IE9+).

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

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

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

From the README:

从自述文件：

Features
Client-side transformation of CSS custom properties to static values
Live updates of runtime values in both modern and legacy browsers
Transforms <link>, <style>, and @importCSS
Transforms relative url()paths to absolute URLs
Supports chained and nested var()functions
Supports var()function fallback values
Supports web components / shadow DOM CSS
Watch mode auto-updates on <link>and <style>changes
UMD and ES6 module available
TypeScript definitions included
Lightweight (6k min+gzip) and dependency-free
Limitations
Custom property support is limited to :rootand :hostdeclarations
The use of var() is limited to property values (per W3C specification)

特征
CSS 自定义属性到静态值的客户端转换
在现代和传统浏览器中实时更新运行时值
变换<link>，<style>和@importCSS
将相对url()路径转换为绝对 URL
支持链式和嵌套var()函数
支持var()函数回退值
支持 web 组件/shadow DOM CSS
观看模式自动更新<link>和<style>更改
提供 UMD 和 ES6 模块
包括 TypeScript 定义
轻量级（6k min+gzip）且无依赖
限制
自定义属性支持仅限于:root和:host声明
var() 的使用仅限于属性值（根据W3C 规范）

Here are a few examples of what the library can handle:

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

Root-level custom properties

根级自定义属性

:root {
    --a: red;
}

p {
    color: var(--a);
}

Chained custom properties

链式自定义属性

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

p {
    color: var(--a);
}

Nested custom properties

嵌套的自定义属性

:root {
    --a: 1em;
    --b: 2;
}

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

Fallback values

回退值

p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red))); 
}

Transforms <link>, <style>, and @importCSS

变换<link>，<style>和@importCSS

<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>

Transforms web components / shadow DOM

转换 Web 组件/影子 DOM

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

For the sake of completeness: w3c specs

为了完整起见：w3c 规范

Hope this helps.

希望这可以帮助。

(Shameless self-promotion: Check)

（无耻的自我推销：打勾）

Answer 5

回答by Walter Ingham

Make a seperate .css file for your variables. Copy/paste the contents of the variable.css file to the end of your main.css file. Find and replace all the variable names in the main.css file to the hex code for those variables. For example: ctrl-h to find var(--myWhiteVariable) and replace with #111111.

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

Side note: if you keep the :root{ } in the main.css file and just comment it out, you can use that to track those hex codes later if you want to update your fallback colors.

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

Answer 6

回答by Sata Suarez

Another way to do it is declaring colors in a JS file (in my case I'm using react) and then just use the variable you defined in the JS file.

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

For example:

例如：

in globals.js

在 globals.js 中

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

in your file

在你的文件中

import { COLORS } from 'globals'

and then just use COLORS.yellow, COLORS.purple, etc.

然后只需使用COLORS.yellow，COLORS.purple等等。

Answer 7

回答by ???

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 8

回答by André Schmid

There is no way yet in "normal" css but take a look at sass/scss or less.

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

here is a scss example

这是一个 scss 示例

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

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

Answer 9

回答by Chris

I recommend setting your css variables as sass variables, then using sass interpolation to render the color in your elements.

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

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

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

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

Answer 10

回答by phaen

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

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

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

should work as

应该像

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

IE 中 CSS 变量的解决方法？

提问by Rafael Valente

回答by Mohammed Siddeeq

回答by Tobias Buschor

Demo:

演示：

回答by Derek MC

回答by jhildenbiddle

回答by Walter Ingham

回答by Sata Suarez

回答by ???

回答by André Schmid

回答by Chris

回答by phaen

相关推荐

最近更新

标签

IE 中 CSS 变量的解决方法？

提问by Rafael Valente

回答by Mohammed Siddeeq

回答by Tobias Buschor

Demo:

演示：

回答by Derek MC

回答by jhildenbiddle

回答by Walter Ingham

回答by Sata Suarez

回答by ???

回答by André Schmid

回答by Chris

回答by phaen

相关推荐

CSS 设置 Angular Material Tooltip 的字体大小

CSS 当容器使用“height: 100vh”时，出现垂直滚动条

CSS 文件被阻止：MIME 类型不匹配 (X-Content-Type-Options: nosniff)

从反应索引链接到 css 文件

相关推荐

最近更新

标签