ie11 용 CSS 사용자 정의 폴리 폴리

Question

ie11 용 사용자 정의 CSS 속성을 JavaScript로 폴리 실어 쓰는 방법이 있습니까? 로드에 대해 생각하고 있었는데 브라우저가 사용자 지정 속성을 지원하는지 확인하고 그렇지 않으면 속성을 찾아서 바꿉니다.

JavaScript 또는 일부 라이브러리에서 가능합니까?

감사합니다.

Answer 1

JavaScript를 묶는 방법에 대해서는 언급하지 않았지만 가능합니다. 예를 들어, PostCSS는 plugin이며이 기능은 폴리 폴리됩니다.

사용법은 스크립트 파일을 번들하는 방법에 따라 다릅니다. 웹팩으로, 예를 들어, 당신은 당신의 postcss의 설정에서이 플러그인을 정의하는 것 또는 웹팩 설정에서 플러그인으로 가져 :

플러그인도 (별도의 노드 스크립트와 같은) 프로그램 사용에 대한 예제가

// 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 라이브러리에는 다른 것들 중에서도 IE11에 대한 사용자 지정 속성/CSS 변수 지원을 제공하는 폴리필이 있습니다. 전체 라이브러리는 사용자 정의 HTML 요소, HTML 가져 오기 및 섀도우 DOM을 폴리 폴리하기 때문에 매우 중요합니다.

https://github.com/WebComponents/webcomponentsjs

Answer 3

예

https://www.webcomponents.org/polyfills

, 너무 오래 당신은 단지 루트 수준의 사용자 지정 속성을 처리해야한다.

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

은 자세한 내용은 비슷한 질문에 내 대답을 참조하십시오 :이 **하지 ** polyfill입니다 IE11 - does a polyfill/script exist for CSS variables?