Displaying the (Numeric) Value of CSS Custom Properties (CSS Variables) inside Generated Content

Nice hack by Cassie: she uses counter-reset as a temporary storage space so that the value of a CSS Variable it can be used inside generated content (e.g. with the content property). I was trying to display the numeric value stored in a CSS variable inside generated content…Turns out you can't do that.But you can […]

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 of CSS Custom Properties (e.g. –) into the var() function. See the Pen Supports CSS […]

Ordering tabular data with only CSS thanks to CSS Variables

Neat experiment by Roman Komarov in which he orders tabular data using just HTML/CSS, thanks to the use of CSS Custom Properties (CSS Variables): Each cell of each row is given a specific value to sort on. <tr class="table-row" style=" –order-by-published: 161221; –order-by-views: 2431; "> <th class="table-cell"> <a href="http://kizu.ru/en/fun/controlling-the-specificity/">Controlling the Specificity</a> </th> <td class="table-cell">2016-12-21</td> <td […]

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 to not too. — Steve Gardner (@steveg3003) July 21, 2017 By setting –duration to 0 […]

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 { –column-bg: #ae0001; –menu-bg-hover: #680001; –active-item: #D3A625; –active-item-text: #680001; –hover-item: #BE0002; –text-color: #FFFFFF; –active-presence: #00FFBA; […]

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 by falling back to their default values. This will change when the “CSS Transform Module […]

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 streams of events into a single stream, and emits those values over to CSS, where […]

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 nothing new when compared to Preprocessor variables, then this post is a must-read for you: […]

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 within media queries, and you can even get/set them via style attributes or even JavaScript: […]