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

Refaktoring

Co si vyzkoušíte

Vyměníte v kartě media query za container query a vložíte tutéž kartu na dvě různě široká místa stránky. Ve výchozím stavu máte stránku s hlavním obsahem a postranním sloupcem a v obou je vložená karta z minulé lekce.

Zadání

  1. Vložte kartu do postranního sloupce i do hlavního obsahu, pokud tam ještě není, a v prohlížeči si všimněte, že se obě chovají stejně.
  2. Označte obal karty za kontejner přes container-type: inline-size.
  3. Přepište media query, která kartu otáčí na řádek, na @container.
  4. Zkontrolujte, že karta v postranním sloupci zůstala na výšku a v hlavním obsahu se otočila na řádek – při jedné a téže šířce okna.
  5. Zužujte okno a najděte šířku, ve které se přepne i karta v hlavním obsahu.
  6. Zkuste container-type přesunout z obalu přímo na kartu a vysvětlete si, proč to přestane fungovat.

Bonus

  1. Pojmenujte kontejner a v dotazu se ptejte jmenovitě jeho.
  2. Napište velikost nadpisu karty v jednotkách cqw a porovnejte ji s tím, co dělalo clamp().