: fuoco visibile - Trucchi CSS

La :focus-visiblepseudo-classe (nota anche come pseudo-classe "Focus-Indicated") è un metodo CSS nativo per definire gli elementi che:

Sono a fuoco
Serve un indicatore visibile per mostrare il focus (ne parleremo più avanti)

:focus-visibleè usato in modo simile a :focus: per portare l'attenzione sull'elemento che attualmente ha il focus.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visiblefa parte della bozza di lavoro di CSS4 Selectors. Prima dell'adozione, Mozilla ha introdotto la :-moz-focusringpseudo-classe per portare la funzionalità su Firefox prima di una specifica formale.

Perché abbiamo bisogno di: messa a fuoco visibile?

Non lo :focusfa già? Sì, ma ci sono problemi. L'illustrazione più chiara è un pulsante che attiva alcuni JavaScript. Immagina un carosello di immagini con pulsanti per passare da un'immagine all'altra. Supponiamo che tu abbia aggiunto un tabindexai pulsanti in modo che possano essere selezionati con una tastiera, ma quando vai a testare il carosello con il mouse, vedi questo contorno attorno al tuo splendido pulsante:

Profilo aggiunto dal browser su `:focus`

Non che tu voglia farlo (per problemi di accessibilità), ma come sbarazzartene? Impostando la :focuspseudo-classe:

.next-image-button:focus ( outline: none; )

Ora il tuo pulsante ha un bell'aspetto quando è a fuoco, ma cosa succede quando un utente tocca il tuo pulsante senza un mouse ma invece una tastiera? Non possono vedere dove hanno tabulato! Questo è un problema perché ora non c'è modo di dire quale pulsante è focalizzato per le azioni della tastiera:

Uno di questi è concentrato, ma non puoi vederlo!

C'è un modo per rimuovere il contorno blu del focus ma mostrare comunque un focus più in linea con il design del sito? Certo, puoi avere la tua torta e mangiarla anche tu, grazie a :focus-visible!

:focus-visiblesi applica solo quando si desidera effettivamente un indicatore visivo per aiutare l'utente a vedere dove si trova il focus. In altre parole, non può nascondere il contorno come :focuspuò. (Beh, potrebbe fonderlo nel design, ma qualunque cosa.) I due devono essere usati insieme in quel senso. Aggiungiamone uno al nostro pulsante:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Ora, quando la tastiera viene utilizzata per passare al pulsante, ci sarà un'indicazione visiva del focus:

`:focus-visible` rende visibile la messa a fuoco!

In che modo i browser determinano quando qualcosa è: focus-visible?

Ai browser viene dato un po 'di margine di manovra per determinare quando questo pseudo-selettore deve essere applicato a un dato elemento usando la propria euristica. Per prima cosa, diamo un'occhiata alla bozza di lavoro CSS4 e poi proveremo a scomporla. Dalle specifiche:

Se un utente ha espresso una preferenza (ad esempio tramite una preferenza di sistema o un'impostazione del browser) per vedere sempre un indicatore di messa a fuoco visibile, il programma utente dovrebbe onorarla facendo in modo che: messa a fuoco visibile corrisponda sempre all'elemento attivo, indipendentemente da qualsiasi altro fattori. (Un'altra opzione può essere che il programma utente mostri il proprio indicatore di focus indipendentemente dagli stili dell'autore.)

Qualsiasi elemento che supporta l'input da tastiera (come un elemento di input o qualsiasi altro elemento che può attivare una tastiera virtuale da mostrare in stato attivo se una tastiera fisica non è presente) dovrebbe sempre corrispondere: focus-visible quando focalizzato.

Se l'utente interagisce con la pagina tramite la tastiera, l'elemento attualmente focalizzato dovrebbe corrispondere: focus-visible (cioè l'uso della tastiera può cambiare se questa pseudo-classe corrisponde anche se non influisce su: focus).

Se l'utente interagisce con la pagina tramite un dispositivo di puntamento, in modo tale che il focus venga spostato su un nuovo elemento che non supporta l'input dell'utente, l'elemento appena focalizzato non dovrebbe corrispondere: focus-visible.

Se l'elemento attivo corrisponde a: focus-visible e uno script fa spostare il focus altrove, l'elemento appena focalizzato dovrebbe corrispondere: focus-visible.

Al contrario, se l'elemento attivo non corrisponde: focus-visible e uno script fa spostare il focus altrove, l'elemento appena focalizzato non dovrebbe corrispondere: focus-visible.

Se è un po 'astratto, ecco un'interpretazione:

Situazione	Si applica: focus-visible?
L'utente afferma di volere che il focus sia sempre visibile tramite un'impostazione	sì
Un elemento necessita di una tastiera per funzionare (come il testo)	sì
L'utente sta navigando con una tastiera	sì
L'utente sta navigando con un dispositivo di puntamento (come un mouse o un dito su un touchscreen)	No
Uno script fa sì che il focus si sposti da un `:focus-visible`elemento a un altro elemento	sì
Uno script fa sì che il focus si sposti da un non `:focus-visible`elemento a un altro elemento	No

Vale la pena ripeterlo: queste sono linee guida e i browser saranno in grado di determinare autonomamente cosa viene selezionato :focus-visible. Possiamo aspettarci che il caso ovvio della navigazione da tastiera verrà gestito in modo prevedibile, ma i browser hanno la capacità di determinare da soli, come qualsiasi altra funzionalità.

Supporto del browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.