Rendi più ovvio dire quale elemento è attivo quando esegui la tabulazione tra gli elementi

3

In Firefox, c'è un bordo tratteggiato attorno a un elemento quando è attivo. Lo trovo impossibile da vedere a volte. Quali eventuali impostazioni di Firefox possiamo usare per rendere la messa a fuoco più ovvia.

Nota che voglio farlo attraverso un'impostazione di Firefox NON modificando il CSS di un sito web.

Ad esempio, in SuperUser, quando i pulsanti Domande, Tag, Utenti, Badge o Senza risposta sono a fuoco, il bordo tratteggiato è completamente invisibile. Come posso rendere il bordo, diciamo, portare rosa o rosso e largo 5px?

Attualmente è attivo il collegamento Domande. Non c'è modo di dire che è in primo piano dalla combinazione di colori del sito Web.

Credi che il link Domande sia attivo.

Preferirei apparire così quando sono a fuoco, modificando alcune impostazioni di Firefox.

inserisci qui la descrizione dell'immagine

firefox accessibility

— Shaun Luttin
fonte

2

Stai usando componenti aggiuntivi speciali che pasticciano con il CSS o simili? perché l'elemento "focus" è già in una tonalità di blu più chiara per SU - vedi anche l'immagine nella risposta di Oliver

— user2813274

@ user2813274 No. Sto usando Firefox pronto all'uso senza componenti aggiuntivi speciali.

— Shaun Luttin,

@ user2813274: Probabilmente perché "Domande" è la pagina corrente / attiva nello screenshot.

— unor,

3

Puoi definire i tuoi stili predefiniti aggiungendoli a <directory del profilo di Firefox> \ chrome \ usercontent.css . Tutte le modifiche apportate diventeranno effettive al successivo avvio del profilo (quindi, se lo si utilizza al momento della modifica del file, è necessario riavviare).

Aggiungendo quanto segue a usercontent.css del mio profilo :

:focus {
  outline: #FF5500 dashed 2px;
}

Ottengo quanto segue:

inserisci qui la descrizione dell'immagine

Alcune note:

usercontent.css definisce solo gli stili predefiniti utilizzati quando non sono definiti stili in conflitto nella pagina Web. Pertanto, questo funziona nei casi in cui il contorno del focus è nascosto per motivi accidentali (come l'uso delle immagini dei pulsanti, come in questa pagina), ma non funzionerà se l'autore del sito Web ha deliberatamente definito uno stile CSS che disabilita il contorno del focus , per un determinato elemento o per l'intera pagina Web. È ampiamente considerata una cattiva pratica disabilitare il contorno del focus senza definire un mezzo alternativo per distinguere l'elemento focalizzato, ma sfortunatamente è fin troppo comune.
Se non vedi una sottodirectory Chrome nella directory del profilo e / o non vedi un file usercontent.css all'interno di quella sottodirectory, semplicemente crearli.
È possibile trovare la directory del profilo immettendo about:supportnella barra degli indirizzi (o selezionando Informazioni sulla risoluzione dei problemi dal menu Guida ), quindi facendo clic sul Show Folderpulsante nella sezione Informazioni di base sull'applicazione .

— Adi Inbar
fonte

1

Non è nemmeno possibile sovrascrivere gli stili degli autori in usercontent.css? Ad esempio, con !important?

— unor,

1

È possibile utilizzare Stylish per impostare uno stile di messa a fuoco diverso. Qualcosa come questo:

:focus {
    outline: 3px solid red;
}

Il risultato sarebbe simile al seguente:

inserisci qui la descrizione dell'immagine

— Der Hochstapler
fonte

Hmmm, ho controllato il link e la recensione più recente si intitola "!!!! Dovrebbe ricevere MINUS 5 Stars !!!!" ed è pieno di avvertimenti frenetici su come ha incasinato il browser di questa persona e quindi non è riuscito a liberarsene ... anche se la maggior parte delle recensioni sono positive. Non l'ho provato da solo. Si personalizza solo su base per sito o può applicare universalmente gli stili predefiniti? (In ogni caso, ho aggiunto una risposta che spiega come farlo senza l'uso di un componente aggiuntivo.)

— Adi Inbar