css-vars-ponyfill

Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers

Usage no npm install needed!

<script type="module">
  import cssVarsPonyfill from 'https://cdn.skypack.dev/css-vars-ponyfill';
</script>

README

css-vars-ponyfill

NPM GitHub checks Codacy Codecov License: MIT jsDelivr Tweet

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+

Contact

License

This project is licensed under the MIT License. See the MIT LICENSE for details.

Copyright (c) John Hildenbiddle (@jhildenbiddle)