CSS custom properties polyfill for ie11
Solution 1
You didn't mention how you're bundling your JavaScript, but yes, it's possible. For example, PostCSS has a plugin, which polyfills this feature.
The usage depends on how you're bundling your script files. With Webpack, for example, you'd define this plugin in your postcss config or import it as a plugin under your webpack config:
// 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
]
}
The plugin also has an example for programmatic usage (as a separate node script):
// 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
Solution 2
Have a look at this (my) Custom-Properties-Polyfill:
https://github.com/nuxodin/ie11CustomProperties
How it works
The script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind.
.myEl {-ie-test:'aaa'} // only one dash allowed "-"
then read it in javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']
From the README:
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
Demo:
Solution 3
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
- Demo: https://codepen.io/jhildenbiddle/pen/ZxYJrR
From the README:
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)
Here are a few examples of what the library can handle:
Root-level custom properties
:root {
--a: red;
}
p {
color: var(--a);
}
Chained custom properties
:root {
--a: var(--b);
--b: var(--c);
--c: red;
}
p {
color: var(--a);
}
Nested custom properties
:root {
--a: 1em;
--b: 2;
}
p {
font-size: calc(var(--a) * var(--b));
}
Fallback values
p {
font-size: var(--a, 1rem);
color: var(--b, var(--c, var(--d, red)));
}
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>
Transforms web components / shadow DOM
<custom-element>
#shadow-root
<style>
.my-custom-element {
color: var(--test-color);
}
</style>
<div class="my-custom-element">Hello.</div>
</custom-element>
For the sake of completeness: w3c specs
Hope this helps.
(Shameless self-promotion: Check)
Solution 4
The Webcomponents library has polyfills that (among other things) provide custom property/CSS variables support to IE11. Note that the whole library is quite much, since it also polyfills custom HTML elements, HTML imports and shadow DOM.
user973671
Updated on June 17, 2022Comments
-
user973671 almost 2 years
Is there a way to pollyfill a custom CSS property for ie11 with JavaScript? I was thinking on load, check if browser supports custom properties and if not do some kind of find and replace on the properties.
Is this possible with JavaScript or some library?
Thanks
-
Peter over 6 yearsNote that this is not a polyfill. PostCSS transforms your CSS file that contains custom properties to one without. After that, you deploy the transformed CSS to the webserver.
-
Fred K over 3 yearsWith
preserve: true
it will keep custom properties and add fallbacks. However postcss-custom-properties handles the re-assign of a custom property inside a media query?