Lekce 1.3

Moderní nativní CSS

Vlastní vlastnosti a zanořování bez preprocesoru, dotazy na velikost rodiče a specificita, kterou máme pod kontrolou.

Shrnutí

Všechno z dnešního bloku umí prohlížeč sám. Nic z toho nepotřebuje preprocesor, sestavování ani knihovnu.

Zápis K čemu je
--jmeno: hodnota pojmenovaná hodnota, která se dědí a dá se přepsat
var(--jmeno, záskok) její použití, případně náhradní hodnota
& vnější selektor uvnitř zanořeného pravidla
container-type: inline-size označí prvek, jehož šířku chceme měřit
@container (min-width: …) podmínka podle šířky rodiče, ne okna
:has(…) prvek, který uvnitř sebe něco má
@layer a, b, c pořadí přihrádek na pravidla

Umím?

  • Zavedu tokeny ve dvou patrech a vysvětlím, k čemu je to druhé dobré.
  • Přepíšu variantu komponenty přepsáním jediného tokenu.
  • Zanořím pravidla a poznám rozdíl mezi &.trida a & .trida.
  • Řeknu, proč se &__title v nativním CSS nechová jako v SCSS.
  • Nahradím media query dotazem na šířku rodiče a vím, proč potřebuji obal.
  • Napíšu pravidlo, které platí pro rodiče podle toho, co je uvnitř.
  • Vysvětlím, proč slabší selektor v pozdější vrstvě vyhraje.