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

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.

Day 20: the scrollbar-gutter property

The scrollbar-gutter property allows you decide whether content within an element fills the total available space or if it stops at the scrollbar gutter. The scrollbar gutter is the space between the inner border edge and the outer padding edge of an element used by the scrollbar.

Day 19: the placeholder-shown pseudo-class

You can use the :placeholder-shown pseudo-class to select input fields with a placeholder that haven't been filled out yet.

Day 18: inheritable styles and web components

We already know that we can encapsulate styles within a web component by adding elements along with the styles to the shadow DOM. Global style declarations from outside don’t overwrite styles inside the web component.
Shadow DOM doesn't provide total encapsulation, though.

Day 17: the :picture-in-picture pseudo-class

You can use the :picture-in-picture pseudo-class to style an element, usually a <video>, which is currently in picture-in-picture mode (PIP).