Fokus
Klikněte do pole Jméno: začne v něm blikat kurzor a co napíšete, objeví se právě tam. Pole má fokus (anglicky focus, zaměření): je to prvek stránky, kterému patří to, co píšete na klávesnici. Fokus může mít vždy jen jeden prvek.
Ne každý používá myš. Někdo se po stránce pohybuje klávesnicí: klávesa Tab přesune fokus na další odkaz, tlačítko nebo pole, Shift+Tab zpět a Enter stiskne tlačítko, které má fokus. Vyzkoušejte to: klikněte na prázdné místo nahoře v náhledu a několikrát stiskněte Tab. Prohlížeč kolem prvku s fokusem nakreslí obrys. Bez obrysu by lidé, kteří používají klávesnici, nevěděli, kde na stránce právě jsou. Proto ho nikdy neodstraňujte, pokud ho nenahradíte vlastním.
Obrys, který kreslí prohlížeč, se ke stránce ne vždy hodí: na našich oranžových tlačítkách je špatně vidět. Tailwind má pro fokus dvě varianty:
focus:použije třídu vždy, když má prvek fokus (v CSS:focus). To se hodí pro formulářová pole: mají ukázat, že mají fokus, ať do nich kliknete, nebo se k nim dostanete klávesouTab.focus-visible:použije třídu, jen když prohlížeč usoudí, že má být fokus vidět (v CSS:focus-visible): když se k tlačítku dostanete klávesnicí, ale ne když na něj kliknete myší. To chceme u tlačítek. Kdo klikl, ví, na které tlačítko to bylo, a obrys po každém kliknutí by jen překážel.
Samotný obrys vytvoří třídy outline-* (anglicky outline, obrys). Na rozdíl od rámečku obrys nezabírá žádné místo, takže se nic na stránce neposune, když se objeví:
| Třída | CSS |
|---|---|
outline-2 | outline-style: solid; outline-width: 2px; |
outline-orange-500 | outline-color: oklch(70.5% 0.213 47.604); (orange-500) |
outline-offset-2 | outline-offset: 2px; (mezera 2 px mezi prvkem a jeho obrysem) |
Pole s fokusem dostane místo obrysu od prohlížeče oranžový obrys: focus:outline-2 focus:outline-orange-500. Tlačítko dostane stejný obrys s malou mezerou, ale jen když se k němu dostanete klávesnicí: focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500. Jak vidíte, každá třída, která má platit jen v určitém stavu, potřebuje vlastní variantu.
Můžete se setkat i se třídami ring-* (anglicky prstenec), například focus:ring-2. Ty kreslí podobnou čáru kolem prvku pomocí stínu (box-shadow) a slouží ke stejnému účelu; v tomto kurzu se budeme držet obrysů. A pozor na častou chybu: třída outline-hidden obrys skryje. Když ji použijete samotnou, bez vlastního stylu pro fokus, lidé s klávesnicí se na stránce ztratí.
Jak psát:
Pokyny
Přidejte všem třem polím třídy focus:outline-2 focus:outline-orange-500. Potom klikejte do jednoho pole po druhém.
Přidejte oběma tlačítkům, „Adoptovat Mourka“ i „Odeslat“, třídy focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500. Potom klikněte na prázdné místo nahoře v náhledu a projděte stránku klávesou Tab. Klikněte na tlačítka i myší: obrys se neobjeví.
Začněte programovat zdarma
5/9