.action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }Conturul gros și distanțat rămâne vizibil în jurul butonului.
LECȚIA 83 DIN 100
Desenează un focus vizibil
Arată clar unde se află focusul tastaturii, fără să elimini indicatorul.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
:focus-visible selectează elementul focalizat când browserul determină că indicatorul vizual este util. outline nu ocupă spațiu în layout, iar outline-offset îl separă de marginea elementului.
.action:focus { outline: none; }Eliminarea outline fără înlocuire poate face imposibilă localizarea focusului pentru utilizatorii tastaturii.
PASUL 2 · APLICĂ
Exercițiul tău
Pentru .action:focus-visible, setează outline la 3px solid #f59e0b și outline-offset la 3px.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Focusul are un outline de 3px solid.
- ○Outline-ul este distanțat cu 3px.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Selectorul urmărește focusul indicat de browser, iar cele două proprietăți construiesc un contur persistent și lizibil.