IE11-CSS变量是否存在polyfill/脚本? [英] IE11 - does a polyfill / script exist for CSS variables?

问题描述

我正在混合Web浏览器环境(Chrome/IE11)中开发网页. IE11不支持CSS变量，是否存在可以让我在IE11中使用CSS变量的polyfill或脚本?

I'm developing a webpage in a mixed web browser environment (Chrome/IE11). IE11 doesn't support CSS variables, is there a polyfill or script that exists that would allow me to use CSS variables in IE11?

推荐答案

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

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

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

• GitHub: https://github.com/jhildenbiddle/css-vars-ponyfill
• NPM: https://www.npmjs.com/package/css-vars-ponyfill
• Demo: 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)且无依赖项

• 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 @import CSS
• 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

限制

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

• Custom property support is limited to :root and :host declarations
• The use of var() is limited to property values (per W3C specification)

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

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

根级自定义属性

: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

Transforms <link>, <style>, and @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规范

希望这会有所帮助.

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

(Shameless self-promotion: Check)

这篇关于IE11-CSS变量是否存在polyfill/脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！