CSS ie11 的自定义属性 polyfill

Question

有没有办法用 JavaScript 为 ie11 pollyfill 自定义 CSS 属性？我在考虑加载，检查浏览器是否支持自定义属性，如果不支持，则对属性进行某种查找和替换。

JavaScript 或某些库是否可行？

谢谢

Answer 1

您没有提到如何捆绑 JavaScript，但是，是的，这是可能的。例如，PostCSS 有一个 plugin，它填充了这个特性。

用法取决于您如何捆绑脚本文件。例如，对于 Webpack，您可以在 postcss 配置中定义此插件，或将其作为插件导入到您的 webpack 配置中：

// webpack.config.js:
module.exports = {
  module: {
    rules: [
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader", "postcss-loader"]
        }
    ]
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-custom-properties'),
    require('autoprefixer'),
    // any other PostCSS plugins
  ]
}

该插件还有一个编程使用示例（作为单独的节点脚本）：

// dependencies
var fs = require('fs')
var postcss = require('postcss')
var customProperties = require('postcss-custom-properties')

// css to be processed
var css = fs.readFileSync('input.css', 'utf8')

// process css using postcss-custom-properties
var output = postcss()
  .use(customProperties())
  .process(css)
  .css

Answer 2

Webcomponents 库具有 polyfill（除其他外）为 IE11 提供自定义 property/CSS 变量支持。请注意，整个库非常多，因为它还填充了自定义 HTML 元素、HTML 导入和阴影 DOM.

https://www.webcomponents.org/polyfills

https://github.com/WebComponents/webcomponentsjs

Answer 3

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

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

来自自述文件：

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

Limitations

Custom property support is limited to :root and :host declarations

The use of var() is limited to property values (per W3C specification)

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

Root-level 自定义属性

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

转换网络组件/阴影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

希望对您有所帮助。

(无耻self-promotion: 检查)

Answer 4

看看这个（我的）Custom-Properties-Polyfill:
https://github.com/nuxodin/ie11CustomProperties

工作原理

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

来自自述文件：

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

演示：

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

CSS ie11 的自定义属性 polyfill

CSS custom properties polyfill for ie11

javascript

css

internet-explorer-11

css-variables

工作原理

演示：