Search
Custom Properties as State
5.1.2021
Here’s a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for “seasonal” colors (e.g. spring is greens, fall is oranges). You’d then use the values to theme your site, knowing that those …
The post Custom...
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode
10.12.2020
Black isn’t always slimming.
When recently testing a dark mode option for one of my sites, I experienced first-hand the issue that Robin Rendle addresses in this article. All of my page text — headings and body copy — appeared to bulk up when I switched to dark mode. And it didn’t matter what fonts...
Color Theming with CSS Custom Properties and Tailwind
19.11.2020
Custom properties not only enable us to make our code more efficient, but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tailwind CSS, a utility class framework, for writing our styles. In this article, we’ll look at...
Announcing the 2020 State of CSS Survey
20.10.2020
Last year’s State of CSS Survey yielded interesting results. There’s the quick adoption of features, like calc() and CSS custom properties. There’s also the overwhelming opinion that CSS is fun to write even as we see a growing reliance on CSS-in JS. We also saw some predictable...
Shoelace 2.0: A Forward-thinking Library of Web Components
29.9.2020
A few years ago, I released a lightweight alternative to Bootstrap affectionately named Shoelace. Shoelace was small and fast because of its minimal design and pure CSS approach to styling. It used CSS custom properties extensively to enable customizations, even when loaded via CDN — something...
Using @property for CSS Custom Properties
3.9.2020
Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string.
So rather than something like this:
html {
--stop: 50%;
}
…can be declared with more details like this:
@property --stop {
syntax:...
Timer Bars in CSS with Custom Properties
18.8.2020
I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn’t want to see numbers ticking downward; it was more ideal to see a “bar” drain away from full to empty. I mention that because there...
The Cicada Principle, revisited with CSS variables
5.8.2020
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
The main idea is simple: You write your main rule using CSS variables, and then use :nth-of-*() rules to set these variables to something different every N items. If you use enough...
Bootstrap 5
7.7.2020
It’s always notable when the world biggest CSS framework goes up a major version (it’s in alpha now).
It has dropped jQuery and IE, started using some CSS custom properties, gone fully customized with form elements, started to embrace utility classes, and includes a massive icon...
Global and Component Style Settings with CSS Variables
1.7.2020
The title of this Sara Soueidan article speaks to me. I’m a big fan of the idea that some CSS is best applied globally, and some CSS is best applied scoped to a component. I’m less interested in how that is done and more interested in just seeing that conceptual approach used in some...
When Sass and New CSS Features Collide
29.6.2020
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways.
So this is going to be a post about the issues I’ve encountered...
Using Custom Property “Stacks” to Tame the Cascade
22.6.2020
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control...
How to Get All Custom Properties on a Page in JavaScript
8.6.2020
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve declared a single custom property on the HTML element:
html {
--color-accent: #00eb9b;
}
In JavaScript...
Global CSS options with custom properties
30.5.2020
With a preprocessor, like Sass, building a logical “do this or don’t” setting is fairly straightforward:
$option: false;
@mixin doThing {
@if $option {
do-thing: yep;
}
}
.el {
@include doThing;
}
Can we do that in native CSS with custom properties? Mark Otto shows...
A First Look at `aspect-ratio`
29.5.2020
Oh hey! A brand new property that affects how a box is sized! That’s a big deal. There are lots of ways already to make an aspect-ratio sized box (and I’d say this custom properties based solution is the best), but none of them are particularly intuitive and certainly not...
CSS Animation Timelines: Building a Rube Goldberg Machine
12.5.2020
If you’re going to build a multi-step CSS animation or transition, you have a particular conundrum. The second step needs a delay that is equal to the duration of the first step. And the third step is equal to the duration of the first two steps, plus any delay in between. It gets more...
Making dark theme switcher with PostCSS.
7.5.2020
Building a dark theme switcher that take care of users OS preferences.
The post Making dark theme switcher with PostCSS. appeared first on CSS-Tricks
@property
25.4.2020
The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about!
There is a draft spec and an “intent to ship” document. The code from that document shows:
@property --my-property {
syntax: "<color";
initial-value: green;
...
Creating Color Themes With Custom Properties, HSL, and a Little calc()
16.4.2020
Before the advent of CSS custom properties (we might call them “variables” in this article as that’s the spirit of them), implementing multiple color schemes on the same website usually meant writing separate stylesheets. Definitely not the most maintainable thing in the world. Nowadays, though,...
Getting JavaScript to Talk to CSS and Sass
3.4.2020
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind — something not involving a structural change, but rather putting...