:indeterminateis een pseudo-class selector in CSS genoemd naar een staat die niet aangevinkt of uitgeschakeld is. Het is die tussenstaat dat we de "Misschien" tussen "Ja" en "Nee" opties zouden kunnen overwegen. De toestand is niet volledig bepaald, vandaar de naam: onbepaald.
Onbepaalde selectievakjes
De meest voorkomende plaats waar we dit in het spel kunnen zien, is met selectievakjes in een formulier:
Er zijn een paar eigenzinnige dingen :indeterminateals het gaat om selectievakjes die de moeite waard zijn om op te merken voordat we gaan kijken hoe deze kunnen worden geselecteerd in CSS.
Het kan niet in de HTML worden ingesteld
Ten eerste is er geen manier om een selectievakje in HTML op een onbepaalde staat in te stellen. In het openingsvoorbeeld hierboven waren we in staat om het tweede selectievakje in te stellen op aangevinkt door dit expliciet te zeggen in de HTML.
Het is niet meer dan logisch om aan te nemen dat we hetzelfde zouden kunnen doen met een onbepaalde toestand:
Maar helaas is dat niet het geval, dus gebruik dat laatste voorbeeld niet in uw code.
Op het moment van schrijven is Javascript het enige middel om een onbepaalde status in een selectievakje in te stellen. Een manier om dit te doen, is door een specifiek selectievakje op ID te selecteren:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;De beperking van het bovenstaande voorbeeld is dat het selectievakje nooit meer naar een onbepaalde staat kan terugkeren als het eenmaal naar een andere staat verandert. In plaats daarvan kunnen we roteren tussen aangevinkte, niet-aangevinkte en onbepaalde staten:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Zie de Pen Rotate Checkbox States door Geoff Graham (@geoffgraham) op CodePen.
Het is puur een visuele toestand
Een checkbox telt nog steeds alleen of deze aangevinkt is of niet, ongeacht of we een onbepaalde toestand hebben geactiveerd. Met andere woorden, onbepaald maskeert de werkelijke waarde van het selectievakje en telt niet als een eigen waarde.
De standaardweergave is inconsistent in alle browsers
Net als numerieke invoer, wordt een onbepaalde status niet in elke browser consistent opgemaakt.
Over het algemeen is hier echter de ondersteuning voor onbepaalde selectievakjes.
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Onbepaalde keuzerondjes
:indeterminate kan van toepassing zijn op keuzerondjes op groepsniveau, waarbij de hele groep wordt beschouwd als een onbepaalde staat als er geen optie is geselecteerd.
Zie de Pen Inderminate-keuzerondjes door Geoff Graham (@geoffgraham) op CodePen.
We moeten opmerken dat het gebruik :indeterminatemisschien niet de beste keuze is wat betreft gebruikerservaring.
Onbepaalde voortgangsbalken
We kunnen ook toepassen :indeterminateop het element waar geen waarde expliciet is ingesteld in de HTML. Javascript is niet nodig, maar het opmaken van het element is op zich een lastig iets dat veel werk en aandacht vereist voor consistentie tussen browsers.
Zie het Pen Indeterminate Progress Element door Geoff Graham (@geoffgraham) op CodePen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Meer informatie
- CSS-kiezers Level 4 Working Draft
- Onbepaalde selectievakjes
- Onbepaalde keuzerondjes
- HTML5 Voortgangselement