A blog about web development, HTML, CSS, JavaScript, and web accessibility.

Day 48: inset 0

On day 9 I’ve talked about the inset shorthand properties inset, inset-inline, and inset-block. I don’t believe that I will need those often, but inset can come in handy when you want one element to fill another element entirely.

Day 47: the overscroll-behavior property

You can use the overscroll-behavior property to disable scroll-chaining.

Day 46: ordering layers

By default, cascade layers are stacked in the order they are defined, but you don’t have to rely on it. You can determine the order in one place.

Day 45: the specificity of ::slotted() content

When you pass an element to a web component through a <slot>, you can select that element using the ::slotted() pseudo-element and apply additional styles.

Day 44: logical floating and clearing

Thanks to Flexbox and CSS Grid no one seems to talk about float and clear anymore,…except for me now because there's news.

Day 43: grouping layers

Cascade layers can be grouped by nesting layer rules.

Day 42: aspect-ratio

Yes, I know, aspect-ratio is not the hottest shit, but Safari only starting supporting it in version 15 and there’s a lot I didn’t know about the property. That’s reason enough for me to write about it. :)

Day 41: custom properties and url()s

Let’s say you want to swap the background image of an element based on a certain condition, like whether it’s pressed, using custom properties.

Day 40: unlayered styles

On day 37 we learned that we can get more control over specificity by creating layers. That first, simple example is pretty straightforward, but what happens if we mix layered and unlayered styles?

Day 39: comma-separated functional color notations

On day 11 I've introduced you to space-separated functional color notations. Early color functions like rgb() and hsl() support both the old comma-separated and the new space-separated syntax.