-
stylecssvaribles1.css下载
资源介绍
## Help wanted!
- Add a ⭐️
- Vote for this solution at * https://*.com/a/57000437/4865307
- Test, report bugs and send pull requests.
- Tweet about if you like it.
## How it works
The script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind. This is not possible with properties starting with double dashes.
`.myEl {-ie-test:'aaa'} // only one dash allowed! "-"`
then you can read it in IE with javascript:
`getComputedStyle( querySelector('.myEl') )['-ie-test']`
In the raw CSS, it replaces for example `--foo` with `-ie-foo`.
It searches for all rules containing variable getters and setter, remembers the affected selectors so future affected Elements can be found in a mutation observer.
Each affected Element gets a uniq class-attribute and its own style-sheet to draw the Element.
These are the steps that the script does:
1. given the CSS
```css
header { --myColor:red; }
main { --myColor:green; }
li { color:var(--myColor); }
```
2. rewritten CSS
```css
header { -ie-myColor:red; }
main { -ie-myColor:green; }
li { -ieHasVar-color:var(-ie-myColor); }
```
3. find all affected Element and get its property-values
```js
querySelectorAll('li').forEach(function(){
var color = getComputedStyle(this).getPropertyValue('--myColor');
// getPropertyValue is extended to handle custom properties
// draw_the_Element()
})
```
3. draw Elements, this leads in separate rules for each Element
```css
li.iecp-u1 { color:red; }
li.iecp-u2 { color:red; }
li.iecp-u3 { color:green; }
li.iecp-u4 { color:green; }