css-vars-ponyfill
A ponyfill that provides client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers.
- Documentation
- Demo (CodePen)
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@importCSS - 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
:rootand:hostrulesets - 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
- Create a Github issue for bug reports, feature requests, or questions
- Follow @jhildenbiddle for announcements
- Add a ⭐️ star on GitHub or ❤️ tweet to support the project!
License
This project is licensed under the MIT License. See the MIT LICENSE for details.
Copyright (c) John Hildenbiddle (@jhildenbiddle)