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.

Cvičení 1

Tokeny

Co si vyzkoušíte

Nahradíte hodnoty zapsané natvrdo tokeny a přepnete celou variantu karty jedinou deklarací. Ve výchozím stavu máte kartu a navigaci z minulé lekce a style.css, ve kterém je každá barva i mezera napsaná přímo v pravidle.

Zadání

  1. Vypište si nejdřív stranou všechny barvy, které se ve stylech opakují. Většinou jich je míň, než to na první pohled vypadá.
  2. Založte na :root paletu a pojmenujte v ní barvy podle toho, co to za barvu je.
  3. Přidejte druhé patro tokenů pojmenované podle role – tedy --color-surface, --color-text, --color-action – a napojte je na paletu.
  4. Nahraďte v kartě i v navigaci všechny barvy zápisem var(…). V pravidlech nesmí zůstat jediná hodnota barvy.
  5. Udělejte totéž s mezerami: zaveďte --space a větší i menší mezery z něj odvoďte přes calc().
  6. Přidejte kartě variantu .card--warning, která přepíše jediný token a tím změní barvu nadpisu, rámečku i tlačítka.
  7. Najděte ve vývojářských nástrojích u nadpisu v téhle kartě, ze kterého prvku se token dědí.

Bonus

  1. Dejte jednomu tokenu náhradní hodnotu a vyrobte situaci, ve které se použije.
  2. Přepněte celou stránku do tmavé varianty tím, že v @media (prefers-color-scheme: dark) přepíšete jenom tokeny na :root. Do jednotlivých komponent nesahejte.