css-variables-polyfill

KO | EN

gitlite — search

#javascript #python #llm #android #java #cli #kubernetes #vue #awesome-list #pytorch #ios #mcp #openai #open-source

css-variables-polyfill

(★ 114)

A basic polyfill for CSS Variables/custom-properties

File Explorer

Download Latest Version (.zip)

css-var-polyfill.js
LICENSE
README.md
test-import.css
test-import.html
test.css
test.html
webcomponents-lite.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# CSS Variables Polyfill
A basic polyfill for CSS Variables/custom-properties

This is an attempt at a very basic [CSS variables (custom properties)](https://drafts.csswg.org/css-variables/) polyfil. In reality this is more of a partial polyfill as it will not cover variables inside of variables, DOM scoping or anything else "fancy". Just taking variables declared anywhere in the CSS and then re-parsing the CSS for var() statements and replacing them in browsers that don't natively support CSS variables.

According to [caniuse.com](https://caniuse.com/#feat=css-variables), of current browsers only IE, Edge and Opera Mini do not support CSS variables. This polyfill appears to work on all three really well. I don't see why this wouldn't work on older browsers as well, but I haven't been able to test it on them yet.

# Changelog
## 1.2 - 2021-03-19
- Update findSetters regex and add external test https://regex101.com/r/kWwUmp/3 (some day I will learn to write test cases)
- `let` to `var` for better old browser support

## 1.1.2 - 2019-03-23
- Update findSetters and replaceGetters (thanks @CodeZeno)

## 1.1.1 - 2018-04-30
- Add support for HTML Imports (thanks @Pilatch)
- Misc IE11 fixes (thanks @proteantech)

## 1.0.0 - 2018-03-09
- Initial release, pulled in from codepen

# Todo
- Verify cross domain working or not (it is working from dropbox)
- Option to wait to apply anything until all <link>s are parsed or inject what we have and update as each <link> returns
- Need to test on a more complex CSS file
- Option to save parsed file in local/session storage so there isn't a delay on additional page loads. Could only do it for links (with URLs to use as keys) and style blocks with IDs of some sort
- Need to test more complex values like rgba(255,0,0,0.5); and something with !important
- Try multiple links
- Local links
- Ajax driven site, or CSS added later the top of the stack

css-variables-polyfill

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

css-variables-polyfill

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README