: indeterminato - Trucchi CSS

:indeterminateè un selettore di pseudo-classi in CSS denominato per uno stato che non è né selezionato né deselezionato. È quello stato intermedio che potremmo considerare le opzioni "Forse" tra "Sì" e "No". Lo stato non è completamente determinato, da cui il nome: indeterminato.

Caselle di controllo indeterminate

Il luogo più comune in cui potremmo vederlo in gioco è con le caselle di controllo in una forma:

Ci sono alcune cose strane su :indeterminatequando si tratta di caselle di controllo che vale la pena notare prima di approfondire come possono essere selezionate in CSS.

Non può essere impostato nell'HTML

Prima di tutto, non c'è modo di impostare una casella di controllo su uno stato indeterminato in HTML. Nell'esempio di apertura sopra, siamo stati in grado di impostare la seconda casella di controllo su selezionata dicendo esplicitamente così nell'HTML.

È logico presumere che potremmo fare lo stesso con uno stato indeterminato:

Ma, purtroppo, non è così, quindi non utilizzare l'ultimo esempio nel codice.

Al momento della stesura di questo documento, Javascript è l'unico mezzo per impostare uno stato indeterminato su una casella di controllo. Un modo per farlo è selezionare una casella di controllo specifica per ID:

var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

La limitazione dell'esempio precedente è che la casella di controllo non può mai tornare a uno stato indeterminato una volta che passa a un altro stato. Invece, possiamo ruotare tra stati selezionati, deselezionati e indeterminati:

function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )

Vedere gli stati della casella di controllo della rotazione della penna di Geoff Graham (@geoffgraham) su CodePen.

È uno stato puramente visivo

Una casella di controllo conta ancora solo se è stata selezionata o deselezionata, indipendentemente dal fatto che abbiamo attivato uno stato indeterminato. In altre parole, indeterminato maschera il valore effettivo della casella di controllo e non conta come un valore proprio.

L'aspetto predefinito è incoerente tra i browser

Come gli input numerici, uno stato indeterminato non ha uno stile coerente in ogni browser.

Nel complesso, tuttavia, ecco il supporto per caselle di controllo indeterminate.

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.

Desktop

Cromo	Firefox	IE	Bordo	Safari
28	3.6	6	12	6

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	4.4	12.2-12.4

Pulsanti radio indeterminati

:indeterminate può essere applicato ai pulsanti di opzione a livello di gruppo, in cui l'intero gruppo è considerato in uno stato indeterminato se non è selezionata alcuna opzione.

Guarda i pulsanti radio Pen Inderminate di Geoff Graham (@geoffgraham) su CodePen.

Dobbiamo notare che l'utilizzo :indeterminatepotrebbe non essere la scelta migliore per quanto riguarda l'esperienza utente.

Barre di avanzamento indeterminate

Possiamo applicare anche :indeterminateal elemento in cui nessun valore è stato impostato in modo esplicito nel codice HTML. Non è necessario Javascript, ma lo stile dell'elemento è di per sé una cosa complicata che richiede molto lavoro e considerazione per la coerenza tra browser.

Vedi l'elemento Pen Indeterminate Progress di Geoff Graham (@geoffgraham) su CodePen.

Supporto 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.

Desktop

Cromo	Firefox	IE	Bordo	Safari
39	51	11	79	10.1

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10.3

Maggiori informazioni

• Selettori CSS Livello 4 Working Draft
• Caselle di controllo indeterminate
• Pulsanti radio indeterminati
• Elemento di avanzamento HTML5