web-dev-qa-db-fra.com

Propriétés personnalisées CSS polyfill pour ie11

Y at-il un moyen de pollyfill une propriété CSS personnalisée pour ie11 avec JavaScript?.

Est-ce possible avec JavaScript ou une bibliothèque?

Merci

javascriptcss3internet-explorer-11css-variables
6
user973671

Oui, dans la mesure où vous ne devez traiter que des propriétés personnalisées au niveau de la racine.

Voir ma réponse à une question similaire pour plus de détails: IE11 - existe-t-il un script/polyfill pour les variables CSS?

4
jhildenbiddle

Vous n'avez pas mentionné comment vous regroupez votre JavaScript, mais oui, c'est possible. Par exemple, PostCSS a un plugin , qui remplit cette fonction.

L'utilisation dépend de la manière dont vous regroupez vos fichiers de script. Avec Webpack, par exemple, vous définissez ce plugin dans votre configuration postcss ou importez-le en tant que plugin sous votre configuration 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
  ]
}

Le plugin a également un exemple d'utilisation programmatique (en tant que script de noeud séparé):

// 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
2
Kano

La bibliothèque Webcomponents a des polyfill qui fournissent (entre autres choses) un support personnalisé pour les propriétés/variables CSS pour IE11. Notez que la totalité de la bibliothèque représente beaucoup, car elle remplit également les éléments HTML personnalisés, les importations HTML et le DOM fantôme.

https://www.webcomponents.org/polyfills

https://github.com/WebComponents/webcomponentsjs

0
Peter