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

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.

Your account is permanently suspended

On October 23rd I got shadowbanned on Twitter, followed by a permanent suspension on October 25th. As someone who was very active on Twitter, I was surprised, shocked, and sad that this happened. Especially because I didn’t know why it happened.

Day 26: using combinators in :has()

You already know that the :has() pseudo-class allows you to check whether a parent element contains certain children, but you can also make this selector more specific, or check other relations the element might have.

Day 25: scrollbar gutters in body and html

When I wrote about the scrollbar-gutter property, my first thought was “omg! I'll put this in my reset stylesheet and use it on the <body> by default”. I wanted to do that in order to prevent the page from “jumping” when switching from a long to a short page, a page with overflow to one without.

Day 24: the backdrop-filter property

The backdrop-filter property allows you to apply CSS filters to the area behind an element. This could be the background of an element or the backdrop of a dialog.

Day 23: the lab() color function

The lab() color function allows you to pick colors from the CIELAB color space, which is device-independant and covers the entire gamut (range) of human color perception.

Day 22: the ::backdrop pseudo-element

You can use the ::backdrop pseudo-element to style the backdrop of modal dialogs and elements which have been placed in fullscreen mode using the Fullscreen API.