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

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.

Day 38: vh, svh, lvh, and dvh

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.

Day 37: cascade layers

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

Day 36: :has() and pseudo-elements

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.

Day 35: forgiving selectors

There's a difference between listing selectors in :where(), :is(), and :has() and listing them in a regular selector list.

Day 34: :is() or :where()

Thoughts on when it’s better to use :is() over :where() and vice versa.

Day 33: Mathematical expressions in min(), max(), clamp()

You can use full math expressions in the comparison functions min(), max(), and clamp(). There’s no need to nest a calc() function inside.

Day 32: the clamp() function

The clamp() function defines a minimum value, a preferred value, and a maximum value.

Workshop: Deep Dive on Accessibility Testing

I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing! In this smashing workshop we’ll talk about automatic and manual testing, screen reader basics, Single Page Applications, Dev Tools, and more.

Day 31: logical border properties

Just like for margin or padding, there are also logical property variations for border properties.