This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is that CSS got better — and so have I, so I recently decided to make my own 2019 version.
In this two-part article, we’ll go through the how, step-by-step, first building an example with two thumbs, then identify the issues … Read article “Multi-Thumb Sliders: Particular Two-Thumb Case”
You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set them in declaration blocks like
--size: 1em and use them as values like
font-size: var(--size);, they differ from preprocessor variables (e.g. they cascade), and here’s a guide with way more information.
But are we using them to their full potential? Do we fall into old habits and overlook opportunities where variables could significantly reduce … Read article “The Power (and Fun) of Scope with CSS Custom Properties”
Very often, while using switch variables (a variable that’s either
1, a concept that’s explained in a greater detail in in this post), I wish I could perform logical operations on them. We don’t have functions like
and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a
This article is going to show you what
calc() formulas we need to use for each logical operation and … Read article “Logical Operations with CSS Variables”
CSS Custom Properties have been a hot topic for a while now, with tons of great articles about them, from great primers on how they work to creative tutorials to do some real magic with them. If you’ve read more than one or two articles on the topic, then I’m sure you’ve noticed that they start by setting up the custom properties on the
:root about 99% of the time.
While putting custom properties on the
:root is great … Read article “Breaking CSS Custom Properties out of :root Might Be a Good Idea”
Last time, we looked at a few possible approaches for declaring and using CSS custom properties in responsive designs. In this article, we’ll take a closer look at CSS variables and how to use them in reusable components and modules. We will learn how to make our variables optional and set fallback values.
As an example, we will build a simple grid system based on flexbox. Grid systems play a vital role in responsive designs. However, building a grid … Read article “Responsive Designs and CSS Custom Properties: Building a Flexible Grid System”
CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a surprise, because they can be really helpful in numerous use cases, including managing color palettes, customizing components, and theming. But CSS variables can also be really helpful when it comes to responsive design. … Read article “Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints”
As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid, and — what we’re concerned about here — Custom Properties (aka CSS variables), all of which make robust and dynamic layouts and interfaces easier than ever while opening up many other possibilities we used to only dream of.
The other day, I was thinking that there must be a way to use Custom Properties to color an element’s background while … Read article “CSS Variables + calc() + rgb() = Enforcing High Contrast Colors”
I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be.… Read article “Slice and Dice a Disc with CSS”
This is the second post in a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. The first installment walks through various use cases where this technique applies. This post covers the use of fallbacks and invalid values to extend the technique to non-numeric values.
The strategy of using CSS Variables to drive the switching of layouts and … Read article “DRY State Switching With CSS Variables: Fallbacks and Invalid Values”