Web development Blog

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.

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

If you use a shorthand property like margin with all 4 values, the properties will always be applied in the direction top - right - bottom - left, no matter the reading direction.