60

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

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

4

10 回答 10

59

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

于 2018-03-30T14:20:26.490 回答
50

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

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

从自述文件：

特征

  • 处理动态添加的 html 内容
  • 处理动态添加的元素
  • 链接--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

于 2019-07-12T05:22:29.587 回答
6

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

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

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

a {
  background: #3279B8;
  background: var(--new-color);
  border-radius: 50%;
}
于 2018-06-14T21:51:44.833 回答
3

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

从自述文件：

特征

  • CSS 自定义属性到静态值的客户端转换
  • 现代和旧版浏览器中运行时值的实时更新
  • 转换<link>,<style>和@importCSS
  • 将相对url()路径转换为绝对 URL
  • 支持链式和嵌套var()函数
  • 支持var()函数回退值
  • 支持 web 组件/shadow DOM CSS
  • 观看模式自动更新<link>和<style>更改
  • 提供 UMD 和 ES6 模块
  • 包括 TypeScript 定义
  • 轻量级（6k min+gzip）且无依赖

限制

  • 自定义属性支持仅限于:root和:host声明
  • var() 的使用仅限于属性值（根据W3C 规范）

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

根级自定义属性

: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>和@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>

转换 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 规范

希望这可以帮助。

（无耻的自我推销：检查）

于 2020-02-21T04:25:27.763 回答
0

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

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

于 2019-01-17T12:00:20.070 回答
0

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

例如：

  • 在 globals.js 中
export const COLORS = {
  yellow: '#F4B400',
  yellowLight: '#F4C849',
  purple: '#7237CC',
  purple1: '#A374EB',
}
  • 在你的文件中
import { COLORS } from 'globals'

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

于 2019-06-24T21:18:51.780 回答
-2 
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로 대체됨 */
}
于 2018-09-27T03:12:49.153 回答
-3

“正常” css 还没有办法，但看看 sass/scss 或更少。

这是一个scss示例

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}
于 2017-08-30T08:58:03.057 回答
-3

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

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

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

body {
    color: #{$text-color};
}
于 2018-12-11T18:30:14.353 回答
-23

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

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

应该作为

#one {};
<div id="one">
于 2017-08-30T08:34:11.153 回答