- Notifications
You must be signed in to change notification settings - Fork1
Exposing properties of HTML elements as CSS variables
License
NotificationsYou must be signed in to change notification settings
tomhodgins/varius
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
JS Properties for Elements as CSS Variables
The idea of VARIUS is to use JavaScript to expose properties of elements (likeoffsetWidth,innerHTML.length,children.length, and even things likewindow.innerWidth to CSS through CSS variables. Since CSS variables are scoped at the level of each element we are able to write simple CSS that is 'scoped' to the state of each individual element they apply to as it currently appears in the browser.
The full list of available variables you can use in your CSS is:
innerWidthinnerHeight
offsetWidthoffsetHeightoffsetLeftoffsetTopscrollWidthscrollHeightscrollLeftscrollTopchildrencharactersvalue
<inputplaceholder="Type to change background"><textareaplaceholder="Type to change background"></textarea><style>input,textarea {background:hsl(var(--value),75%,75%); }</style>
<divstyle=max-width:25%>25% wide</div><divstyle=max-width:50%>50% wide</div><div>Full-width</div><style>div {margin:1em0;background: lime;height:calc(var(--offsetWidth)/ (16/9)*1px); }</style>
<ol><li></ol><ol><li><li></ol><ol><li><li><li></ol><ol><li><li><li><li></ol><ol><li><li><li><li><li></ol><ol><li><li><li><li></ol><ol><li><li><li></ol><ol><li><li></ol><ol><li></ol><style>ol {padding:0;display: block;width:100%;list-style: none;border:1px solid;overflow: hidden;/* pass the parent's value down to children */--ul-children:var(--children); }olli {display: block;border:1px solid;height:100px;float:left;width:calc(100%/var(--ul-children)); }</style>
- View the demo page:tomhodgins.github.io/varius