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

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.

Day 10: global styles and web components

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?

Day 9: the inset shorthand property

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

Day 8: nesting :has()

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

Day 7: subgrids

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

Day 6: the :has() pseudo-class

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

Day 5: the max() function

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