Tag Archives: css variables

Using @supports to detect if a browser supports CSS Variables

As tweeted by Ire Aderinokun: @supports (color: var(–)) { /* has support */ } Not too surprising if you’ve used Feature Queries before, but what does surprise me is that you can make it work by only passing the prefix … Continue reading

Original Content , , 2 Comments

CSS Variables and Reduced Motion

Great usage of CSS Variables CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce: CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse … Continue reading

Elsewhere , Leave a comment

Theming with CSS Custom Properties (CSS Variables)

Stephanie Liu has replicated the native Slack theming capabilities in the browser using CSS Variables CSS Custom Properties. The essence of the demo is actually quite simple: define the variables on the :root level, and use ‘m where needed. :root … Continue reading

Elsewhere , , , Leave a comment

Vortex with CSS Variables

Another great demo by Ana Tudor. Here’s a pen with the result: See the Pen 🌈 vortex with CSS variables (WebKit-only, no JS) by Ana Tudor (@thebabydino) on CodePen. More videos on her YouTube Channel. Lots of demos on her … Continue reading

Elsewhere , , Leave a comment

Mocking Individual CSS Transform Functions using CSS Variables

In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale … Continue reading

Elsewhere , , , Leave a comment

Reactive Animations with CSS Variables

Despite its name, reactive animations have nothing to do with React, the framework/library/whatever it is. Rather, reactive animations can be described in terms of discrete changes caused by any number of events. The overall idea is that JS captures multiple … Continue reading

Elsewhere , , , , 1 Comment

Why You Should Be Excited About Native CSS Variables

With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer … Continue reading

Elsewhere , , , 1 Comment

CSS Variables: var(–subtitle);

As per usual, great talk by Lea Verou: The key takeaway to me is the very first one she mentioned: they’re just custom properties. This means that the normal behavior of inheritance is in place, you can manipulate them from … Continue reading

Elsewhere , , , 7 Comments