css-counter-value
Advanced tools
Comparing version 2.0.0 to 2.0.1
{ | ||
"name": "css-counter-value", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"description": "Convert CSS counter() values to integers without JavaScript", | ||
@@ -5,0 +5,0 @@ "main": "counter-value.css", |
@@ -301,2 +301,28 @@ [![Jane Ori - PropJockey.io](https://img.shields.io/badge/Jane%20Ori%20%F0%9F%91%BD-%F0%9F%A4%8D%20PropJockey.io-7300E6.svg?labelColor=FB04C2&style=plastic)](http://jane.propjockey.io/) | ||
Oh, and if you're setting multiple `counter-value` variables with the same counter source, you can just use one `directive` instead. | ||
```html | ||
<div> | ||
<output data-counter-value style="--counter: global-div-counter;"></output> | ||
<!-- var 1, implicitly on parent --> | ||
<output data-counter-value="3" style="--counter: global-div-counter;"></output> | ||
<!-- var 3, explicitly on an ancestor --> | ||
<output data-counter-value="8" style="--counter: global-div-counter;"></output> | ||
<!-- var 8, explicitly on :root, giving the whole document access to a variable var(--counter-value\\8) === 11 --> | ||
11 | ||
</div> | ||
``` | ||
becomes | ||
```html | ||
<div> | ||
<output data-counter-value="1 3 8" style="--counter: global-div-counter;"></output> | ||
<!-- var 1, implicitly on parent --> | ||
<!-- var 3, explicitly on an ancestor --> | ||
<!-- var 8, explicitly on :root, giving the whole document access to a variable var(--counter-value\\8) === 11 --> | ||
11 | ||
</div> | ||
``` | ||
Have fun! | ||
@@ -303,0 +329,0 @@ |
32881
346