201 private links
It reflects ARIA presses state with CSS. Isn't it already built-in ?
I am using it for aria-current.
Should it become a standard layout?
I also started when Flexbox was becoming at thing around 2014-2015.
[I] ... always hope that they learn from our past mistakes and become masters at the basics.
Replace <br>
with text-indent: 2em each-line;
.
The support for "each-line" is limited though: https://caniuse.com/?search=text-indent+each-line
TL;DR use fluid typography and now uses fluid sizes :)
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.
I will read it someday :)