Web development Blog

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

:has() allows you to check whether a parent element contains specific children.

The max() function takes a comma separated list of expressions. The largest value in the list will be selected.