Web development Blog

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.

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?

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.

Using the viewport unit vh in desktop browsers is usually straight-forward, 100vh matches the height of the viewport. On mobile that's different because the viewport height changes depending on whether or not certain user interface elements are visible, 100vh doesn't always match the height of the viewport.

Cascade layers introduce a new way of managing specificity in CSS.

We already know that we can select an element based on the presence of a certain child element (in Chrome/Edge 105+ and Safari 15.4+), but there are limitations.