Pseudotřída :focus-visible je novější způsob, jak správně stylovat :focus stav prvků. Řeší problémy s tradičním :focus, který se chová neprakticky při kliknutí na tlačítko.

Zatímco :focus se aktivuje při jakémkoliv zaměření prvku (klávesnicí i myší), :focus-visible se zobrazí pouze tehdy, když je to visuálně žádoucí – typicky při navigaci klávesnicí.

U :focus-visible rozhoduje prohlížeč, jestli zvláštní styl pro focus stav zobrazit.

Smyslem existence je řešení často nežádoucího označování focusovaných prvků při kliknutí na ně – typicky tlačítka, kdy uživatel s myší typicky nepotřebuje vidět focus indikátor.

Například tlačítka v Chrome a Firefox zobrazují výchozí outline pouze při navigaci klávesnicí, ale textová pole ho zobrazují i po kliknutí myší.

Ukázka s obyčejným focusem. Tlačítko má po kliknutí zbytečně výrazný efekt:

Řešení s :focus-visible

Pseudotřída :focus-visible se aktivuje pouze tehdy, když prohlížeč považuje za vhodné zobrazit focus indikátor. Typicky to znamená:

• Navigace klávesnicí (Tab, Shift+Tab).
• Zaměření prvku JavaScriptem.
• Některé speciální případy dotykového ovládání – například při použití externí klávesnice na tabletu nebo při přepnutí do režimu přístupnosti.

button:focus-visible {
  outline: 3px solid #007acc;
  outline-offset: 2px;
}

Podpora prohlížečů

Nativní podpora :focus-visible je dobrá.

Pro starší prohlížeče je možné použít polyfill nebo fallback řešení.

Polyfill pro starší prohlížeče

Existuje oficiální polyfill, který přidává třídu .focus-visible prvkům, které by měly zobrazit focus indikátor:

<script src="https://unpkg.com/focus-visible@5/dist/focus-visible.min.js"></script>

Poté můžete stylovat takto:

button:focus-visible,
button.focus-visible {
  outline: 3px solid #007acc;
  outline-offset: 2px;
}

Odkazy jinam

• MDN: :focus-visible – dokumentace
• Proč a jak používat :focus stav – související článek
• Formuláře – další informace o formulářích