css-vars-ponyfill

A ponyfill that provides client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers.

Documentation & Demos

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)
CSS changes made using CSSOM APIs are not supported (see #19, #23, #77, #154).

Browser Support

Chrome 19+
Edge 12+
Firefox 6+
IE 9+
Safari 6+

Usage & Options

See the documentation site for details.

Sponsorship

A sponsorship is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.

If you benefit from this project, please consider lending your support and encouraging future efforts by becoming a sponsor.

Thank you! 🙏🏻

Contact & Support

Follow 👨🏻‍💻 @jhildenbiddle on Twitter and GitHub for announcements
Create a 💬 GitHub issue for bug reports, feature requests, or questions
Add a ⭐️ star on GitHub and 🐦 tweet to promote the project
Become a 💖 sponsor to support the project and future efforts

License