css-vars-ponyfill
css-vars-ponyfill copied to clipboard
Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
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) - 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.
Contact & Support
- 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)