Awesome Open Source
Awesome Open Source

css-vars-ponyfill

NPM GitHub Workflow Status (master) Codacy code quality Codacy branch coverage 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)


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,541,393
Css (214,660
Client (3,261
Module (2,785
Webcomponents (2,085
Polyfill (507
Client Side (397
Variables (241
Legacy (199
Shadow (196
Shadow Dom (150
Related Projects