Layered Text Headers
Being able to control the `paint-order` in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.
Being able to control the `paint-order` in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.
There is an already-classic @scope demo about theme colors. Let’s recap that and then I’ll show how it relates to any situation with modifier classes. (The @scope rule is a newish feature in CSS that is everywhere-but-Firefox, but is in Interop 2025, so shouldn’t be too long to be decently usable.) There are lots of […]
I love the idea of being able to take a color you already have in CSS, like currentColor, a custom property, or a color pulled from an attr(), and manipulate it. The big examples being darken, lighten, or apply opacity to it for different adjacent elements or states. We have a ton of “newly available” […]
`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.
Blue links with underlines is a good default style for links in body text, but it’s a bit intense. Maybe we can chill it out a bit and be a bit more flexible.
This post starts with quite a tricky little quiz about what a color value resolves to be.
Seriously almost every “menu” and “tooltip” could and should use this when it’s ready.
You can pluck off values from HTML attributes that actually have types now, so if you put data-font-size=”2.2rem” on an element you could actually, ya know, honor that.
::selection is cool, but scoping it to selectors like :nth-child(5n+2) is even more fun, especially on a love filled ay like Valentine’s Day.
The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.
Frontend Masters Donates to open source projects. $363,806 contributed to date.