css-vars-ponyfill
A ponyfill that provides client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers.
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 declaration support is limited to
:root
and :host
rulesets - The use of
var()
is limited to property values (per W3C specification)
Browser Support
IE | Edge | Chrome | Firefox | Safari |
---|
9+ | 12+ | 19+ | 6+ | 6+ |
Contact
License
This project is licensed under the MIT License. See the MIT LICENSE for details.
Copyright (c) John Hildenbiddle (@jhildenbiddle)