`:focus-visible și :focus-within` în CSS

Selectori și reguli de bază Chrome 86, Firefox 85, Safari 15.4 (:focus-within: Chrome 60, Firefox 52, Safari 10.1)

Afișează conturul de focus doar când utilizatorul navighează cu tastatura (:focus-visible) și stilizează un părinte când un copil are focus.

Sintaxă CSS

button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

.formular:focus-within {
  border-color: #2563eb;
}

Ce face `:focus-visible și :focus-within`

:focus se aplică oricând un element primește focus, inclusiv la clic cu mouse-ul. De aceea mulți designeri ascund conturul cu outline: none, iar navigarea cu tastatura devine imposibilă.

:focus-visible se aplică doar când browserul consideră că utilizatorul are nevoie să vadă focusul: la navigarea cu tasta Tab, dar nu la un clic pe un buton. La câmpurile de text, conturul apare și la clic, pentru că urmează tastarea.

:focus-within se aplică unui element atunci când el sau oricare descendent are focus. Este util pentru a evidenția un întreg formular, un card sau un meniu derulant cât timp utilizatorul lucrează în interiorul lui.

Valori uzuale

Valoare	Descriere
`:focus`	Elementul are focus, indiferent cum l-a primit.
`:focus-visible`	Elementul are focus și browserul decide că focusul trebuie arătat (de regulă la tastatură).
`:focus-within`	Elementul sau unul dintre descendenții lui are focus.

Exemple

Exemplul 1: Contur vizibil doar la navigarea cu tastatura

Butoanele nu mai afișează un contur la clic, dar rămân accesibile pentru cei care folosesc tasta Tab.

.buton {
  background: #16a34a;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
}

.buton:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Efect vizual în browser

La clic cu mouse-ul pe butonul verde „Plătește 120 lei” nu apare niciun contur. Când ajungi la buton apăsând Tab, în jurul lui apare un contur portocaliu de 3px, la 3px distanță de margine.

Exemplul 2: Formular de căutare evidențiat cât timp scrii în el

:focus-within stilizează containerul, nu câmpul, ceea ce permite colorarea iconiței și a butonului deodată.

.cautare {
  display: flex;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cautare:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px #dbeafe;
}