Shrnutí

V této lekci jsme naučili stránku útulku reagovat na návštěvníky a dozvěděli jsme se, že:

• Varianta je předpona před třídou, oddělená dvojtečkou. Třída s variantou platí jen ve svém stavu: hover:bg-orange-600 jen tehdy, když je nad prvkem ukazatel myši. Prvek si přitom ponechá i své obvyklé třídy.
• Každá třída, která má platit jen v určitém stavu, potřebuje vlastní variantu, například focus-visible:outline-2 focus-visible:outline-orange-500.
• Varianty lze řetězit: enabled:hover:bg-orange-600 platí, jen když platí obě podmínky zároveň.
• transition-colors, transition-shadow nebo transition spolu s duration-* udělají změny plynulými. Patří na prvek bez varianty, aby byla změna plynulá oběma směry.
• cursor-pointer ukáže nad tlačítkem ručičku, cursor-not-allowed přeškrtnuté kolečko.
• Preflight odebírá formulářovým polím rámeček a pozadí, takže jejich vzhled nastavujete sami. Atribut placeholder ukáže v prázdném poli příklad a varianta placeholder: nastaví jeho barvu.
• Prvek s fokusem potřebuje viditelný obrys kvůli lidem, kteří používají klávesnici, a proto ho nikdy neodstraňujte bez náhrady: focus: pro pole, focus-visible: pro tlačítka, se třídami outline-2, outline-offset-2 a barvou outline-*.
• Atribut disabled tlačítko vypne a varianta disabled: mu dá vzhled, který to ukáže.
• group u předka a group-hover: u prvku uvnitř něj stylují prvek, když je ukazatel myši nad předkem.
• first:, last:, odd: a even: stylují prvek podle jeho pozice mezi sourozenci. Patří na každého ze sourozenců.

V příští lekci, Responzivní design, poznáte varianty, které nezávisí na tom, co návštěvník dělá, ale na tom, jak široká je obrazovka.

Procvičení: tady je nový kousek webu útulku, sekce s prosbou o příspěvek. Jeho tlačítko „Přispět“ je nastylované, ale zatím na nic nereaguje. Použijte, co jste se v této lekci naučili.