:indeterminateer en pseudoklassevælger i CSS, der er opkaldt efter en tilstand, der hverken er markeret eller ikke markeret. Det er den mellemliggende tilstand, at vi måske overvejer mulighederne "Måske" mellem "Ja" og "Nej". Staten er ikke fuldt ud bestemt, deraf navnet: ubestemt.
Ubestemte afkrydsningsfelter
Det mest almindelige sted, vi kan se dette i spil, er med afkrydsningsfelter i en form:
Der er et par quirky ting om, :indeterminatenår det kommer til afkrydsningsfelter, der er værd at bemærke, før du graver ind i, hvordan det kan vælges i CSS.
Det kan ikke indstilles i HTML
For det første er der ingen måde at indstille et afkrydsningsfelt til en ubestemt tilstand i HTML. I åbningseksemplet ovenfor kunne vi indstille det andet afkrydsningsfelt til markeret ved eksplicit at sige det i HTML-koden.
Det er kun logisk at antage, at vi kunne gøre det samme med en ubestemt tilstand:
Men desværre er det ikke tilfældet, så brug ikke det sidste eksempel i din kode.
På dette tidspunkt er Javascript det eneste middel til at indstille en ubestemt tilstand i et afkrydsningsfelt. En måde at gøre det på er at markere et bestemt afkrydsningsfelt efter ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Begrænsningen i eksemplet ovenfor er, at afkrydsningsfeltet aldrig kan komme tilbage til en ubestemt tilstand, når den skifter til en anden tilstand. I stedet kan vi rotere mellem kontrollerede, ukontrollerede og ubestemte tilstande:
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 af Geoff Graham (@geoffgraham) på CodePen.
Det er rent en visuel tilstand
Et afkrydsningsfelt tæller stadig kun, om det er markeret eller ikke markeret, uanset om vi har aktiveret en ubestemt tilstand. Med andre ord maskerer ubestemt den faktiske værdi af afkrydsningsfeltet og tæller ikke som en egen værdi.
Standardudseendet er inkonsekvent på tværs af browsere
Ligesom numeriske indgange styler en ubestemt tilstand ikke ensartet i hver browser.
Alt i alt er her understøttelsen af ubestemte afkrydsningsfelter.
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Ubestemte radioknapper
:indeterminate kan gælde for radioknapper på gruppeniveau, hvor hele gruppen anses for at være i en ubestemt tilstand, hvis ingen valg er valgt.
Se Pen Inderminate Radio Buttons af Geoff Graham (@geoffgraham) på CodePen.
Vi bør bemærke, at brug :indeterminatemuligvis ikke er det bedste valg for så vidt brugeroplevelsen går.
Ubestemte fremdriftslinjer
Vi kan også anvende :indeterminatedet element, hvor der ikke er angivet nogen værdi eksplicit i HTML. Der er ikke behov for Javascript, men styling af elementet er i sig selv en vanskelig ting, der kræver meget arbejde og overvejelse for konsistens på tværs af browsere.
Se pennen ubestemt fremskridtselement af Geoff Graham (@geoffgraham) på CodePen.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Mere information
- CSS-vælgere niveau 4 Arbejdskladde
- Ubestemte afkrydsningsfelter
- Ubestemte radioknapper
- HTML5-fremskridtselement