Web development Blog

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.

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.

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

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.

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

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.

I was wondering what happens with HTML elements in web components when I add styles to the document. Under which circumstances do global styles defined in a style element or external stylesheet apply to these elements?

The inset property is a shorthand for the top, right, bottom, and/or left properties. It implements the same multi-value syntax like margin.

The :has() pseudo-class cannot be nested; :has() is not valid within :has().

Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+).