:indeterminateer en pseudoklasse-velger i CSS oppkalt etter en tilstand som verken er merket eller ukontrollert. Det er den mellomtiden som vi kan vurdere alternativene "Kanskje" mellom "Ja" og "Nei". Staten er ikke helt bestemt, derav navnet: ubestemt.
Ubestemte avmerkingsbokser
Det vanligste stedet vi kan se dette i spill er med avkrysningsruter i en form:
Det er noen quirky ting om :indeterminatenår det kommer til avkrysningsruter som er verdt å merke seg før du graver inn i hvordan det kan velges i CSS.
Det kan ikke angis i HTML
For det første er det ingen måte å sette en avkrysningsrute til en ubestemt tilstand i HTML. I åpningseksemplet ovenfor kunne vi sette den andre avmerkingsboksen til å krysses av ved å eksplisitt si det i HTML-en.
Det er bare logisk å anta at vi kan gjøre det samme med en ubestemt tilstand:
Men dessverre er det ikke tilfelle, så ikke bruk det siste eksemplet i koden din.
I skrivende stund er Javascript det eneste middelet for å sette en ubestemt tilstand i en avkrysningsrute. En måte å gjøre det på er å merke en spesifikk avkrysningsrute etter ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Begrensningen i eksemplet ovenfor er at avkrysningsboksen aldri kan komme tilbake til en ubestemt tilstand når den skifter til en annen tilstand. I stedet kan vi rotere mellom merkede, ukontrollerte og ubestemte tilstander:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Se Pen Rotate Checkbox States av Geoff Graham (@geoffgraham) på CodePen.
Det er rent en visuell tilstand
En avkrysningsrute teller fremdeles bare om den er merket eller ikke merket, uavhengig av om vi har aktivert en ubestemt tilstand. Ubestemt maskerer med andre ord den faktiske verdien til avkrysningsboksen og teller ikke som en egen verdi.
Standard utseende er inkonsekvent i alle nettlesere
I likhet med numeriske innganger har en ubestemt tilstand ikke stil i hver nettleser.
Samlet sett er det imidlertid støtte for ubestemte avmerkingsbokser.
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Ubestemte radioknapper
:indeterminate kan gjelde radioknapper på gruppenivå, der hele gruppen anses å være i en ubestemt tilstand hvis ikke noe alternativ er valgt.
Se Pen Inderminate Radio Buttons av Geoff Graham (@geoffgraham) på CodePen.
Vi bør merke oss at bruk :indeterminatekanskje ikke er det beste valget så langt brukeropplevelsen går.
Ubestemte fremdriftslinjer
Vi kan også gjelde :indeterminatefor element der ingen verdi er eksplisitt angitt i HTML. Det er ikke behov for Javascript, men styling av elementet er i seg selv en vanskelig ting som krever mye arbeid og hensyn til konsistens i flere nettlesere.
Se Pen Indeterminate Progress Element av Geoff Graham (@geoffgraham) på CodePen.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Mer informasjon
- CSS-velgere nivå 4 arbeidsutkast
- Ubestemte avmerkingsbokser
- Ubestemte radioknapper
- HTML5 Progress Element