The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType.

Different definition of a UI component, from the minimalistic css one to the SSR full page.

Another CSS reset explained

Use cases for CSS display contents: ungrouping elements

• styling generated HTML
• conditional (header) layout
• remove a container
• a grid of photos
• alternating columns
• quote
• footer layouts
• subgrid alternative

CSS display: contents is known to cause accessbility issues when used with HTML tables, headings, buttons, and lists

Also what about the tabbing order?

Use cases for :has:

• .card:has(button:focus-visible)
• .xy-pad:has(.handle:active), .xy-pad:has(.handle:focus-visible)
• We can use :has as a sort of global event listener: html:has([data-disable-document-scroll="true"])
• JS-free darkmode: body:has(#dark-mode-toggle:checked)
• p:has(+ figure): with :has, we can style one element based on another element in a totally different container! See the cool code playground that highlights

:has can be powerful to replace JS with HTML semantics.

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

Another #project #idea: it refactors the CSS to produce the optimal stylesheet

I will read it someday :)

How to name grid cells correctly? Here is a resource made for it.

Add a grid on a view. It can be useful to debug and design.

Another powerful way to handle font sizes

The solar system in CSS

"typed css variables". @property adds some feature, but I don't find excellent use cases for now.

1. aspect-ratio
2. objectif-fit
3. martin-inline and logical properties
4. text-underline-offset
5. outiline-offset
6. scroll-margin
7. color-scheme
8. accent-color
9. width: fit-content
10. overscroll-behavior
11. texte-wrap
12. scrollbar-gutter