What values can you put in a CSS Custom Property?

Will Boyd: CSS custom properties can hold all sorts of things. Some of these things were not obvious to me, which is why I decided to write this. In short: they can contain just about everything. It’s only until CSS Custom Properties are used in a certain context as a CSS Variable — using var() …

CSS Custom Properties are not Variables

When mentioning CSS Custom Properties here on bram.us I do tend to name them like that — and not CSS Variables — as that’s their official name. I always thought the terms could be used interchangeably — with CSS Variables simply being the unofficial name — but as detailed by Šime Vidas on Web Platform …

Emoji Customizer created with CSS Variables

Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer. The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ (“\u200d”) you can glue all …

Pass Data from CSS to JavaScript with CSS Variables

What happens when you combine the fact that part after the : for CSS Custom Properties doesn’t need to be valid CSS with window.getComputedStyle()? You get a way of passing data – including Arrays, Objects, and even JSON – from CSS to JavaScript. Psst… Hey kid… Did you know you can pass data from your …

Staggered Animations with CSS Custom Properties

Paul Hebert on the Paul Hebert blog: Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my …

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

UPDATE: The code snippet has been updated to use –custom instead of –. When Ire originally tweeted this — was a valid name for a custom property. This is no longer the case. As tweeted by Ire Aderinokun: @supports (color: var(–custom)) { /* has support */ } Not too surprising if you’ve used Feature Queries …

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 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 it basically …

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; …