Web development Blog

Something I was tripping over when I began learning about :has() was the combination with :not().

You can use @import to load entire style sheets into a cascade layer.

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.

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

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.

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.

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

Cascade layers can be grouped by nesting layer rules.

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. :)

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.