228 private links
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.
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.
- aspect-ratio
- objectif-fit
- martin-inline and logical properties
- text-underline-offset
- outiline-offset
- scroll-margin
- color-scheme
- accent-color
- width: fit-content
- overscroll-behavior
- texte-wrap
- scrollbar-gutter
A great example of what the popover API can achieve
About the level 3 and level 4 of CSS grid