12/05/2016

Supporting CSS variables

CSS variables are a fine new concept in CSS. It allows developers to declare -and redeclare in the usual "cascade" manner- variables that can be re-used. All major browsers support them apart from Internet Explorer, mobile Safari and the native Android browser. We have developed a shim which redeclares all CSS rules found on a page, which use CSS variables, but with their actual values, ie the effective values that the CSS variables have. In order to achieve this we utilise the CSSUtilities library which reads and parses the CSS stylesheets on a web page.

There's one catch: you have to declare these CSS variables on the root element of the web page, that is the HTML element. We need this convention for the time being for simplicity. Other than that, feel free to use CSS variables right here right now!

html {
    --grid-gutter: 3rem;
}

html.small {
    --grid-gutter: 1rem;
}

.column {
    padding: 0 var(--grid-gutter);
}

Note: using our CSS variables shim comes to no conflict with CSS preprocessors, because it functions on the browser level, after the actual CSS has been delivered to the client and been applied to the web page.

Home page