varius's Introduction

VARIUS

JS Properties for Elements as CSS Variables

About

The idea of VARIUS is to use JavaScript to expose properties of elements (like offsetWidth, innerHTML.length, children.length, and even things like window.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:

Global Variables

innerWidth
innerHeight

Scoped Variables

offsetWidth
offsetHeight
offsetLeft
offsetTop
scrollWidth
scrollHeight
scrollLeft
scrollTop
children
characters
value

Examples

Using `value.length` as a variable in CSS

<input placeholder="Type to change background">
<textarea placeholder="Type to change background"></textarea>
<style>
  input,
  textarea {
    background: hsl(var(--value), 75%, 75%);
  }
</style>

Using `offsetWidth` to make scalable apect ratios

<div style=max-width:25%>25% wide</div>
<div style=max-width:50%>50% wide</div>
<div>Full-width</div>
<style>
  div {
    margin: 1em 0;
    background: lime;
    height: calc(var(--offsetWidth) / (16/9) * 1px);
  }
</style>

Using `children.length` as a variable

<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);
  }
  ol li {
    display: block;
    border: 1px solid;
    height: 100px;
    float:left;
    width: calc(100% / var(--ul-children));
  }
</style>