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

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.

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 32: the clamp() function

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

Day 31: logical border properties

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

Day 30: the hwb() color function

Like the lab() color function, hwb() is one of the more recent methods for defining colors in CSS. Just like rgb() and hsl() it uses colors from the sRGB color space. HWB, which stands for hue-whiteness-blackness, describes colors with a starting hue, then a degree of whiteness and blackness to mix into that base hue.

Day 29: !important custom properties

Using !important with custom properties might not work as you expect.

Day 28: custom properties and web components

We already know that we can encapsulate styles within a web component and we know that web components inherit styles. Another interesting feature of web components in terms of CSS is that custom properties used in a web component can be modified from the outside.

Day 27: the font-variation-settings property

Adjustable features of a variable font are called axes. You can use the font-variations-settings property to change these features by specifying the four letter axis name along with a value.