Question

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

使用JavaScript或某些库可以实现吗？

由于

Answer 1

是的，只要您只需要处理根级自定义属性。

https://github.com/jhildenbiddle/css-vars-ponyfill

有关详细信息，请参阅我对类似问题的回答：IE11 - does a polyfill / script exist for CSS variables?

Answer 2

你没有提到你是如何捆绑你的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 3

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

https://www.webcomponents.org/polyfills

https://github.com/WebComponents/webcomponentsjs

Answer 4

看看这个（我的）自定义属性-填充：
https://github.com/nuxodin/ie11CustomProperties

工作原理

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

自述文件：

功能


处理动态添加的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）以下且无依赖

演示：

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

ie11的CSS自定义属性polyfill

4 个答案:

工作原理

演示：