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

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.

I broke the rules.

When I opened Twitter on Monday morning, I saw this:

Day 21: conic gradients

You can create gradients with color transitions rotated around a center point, rather than radiating from the center, by using the conic-gradient() function.