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

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).

Day 16: the specificity of :has()

Just like with :is() and :not(), the specificity of :has() is replaced by the specificity of the most specific selector in its selector list argument. Unlike :nth-child() or :link, :has() itself doesn't add to the specificity.

Day 15: the :modal pseudo-class

There are two methods you can use to open a <dialog> element, show() and showModal(). show() opens a dialog on top of the rest of the content, but you can still interact with content beneath. showModal() opens a modal dialog with a backdrop on top of the rest of the content, and you can’t interact with the rest of the page.

Day 14: the difference between :is() and :where()

There's an important difference between :is() and :where().

Day 13: the :where() and :is() pseudo-classes

The :where() and :is() pseudo-classes allow you to write large lists of selectors in a more compact form. You can combine selectors instead of writing repetitive lists.

Day 12: max() trickery

I saw this interesting one-liner in a demo by Temani Afif.

Day 11: space-separated functional color notations

Functional color notations that existed before CSS Color Module Level 4 (rgb(), rgba(), hsl(), hsla()) used to only except comma-separated lists of arguments. That changes with Module Level 4, now you can also provide space-separated arguments.