:indeterminateje izbirnik psevdorazredov v CSS, imenovan za stanje, ki ni niti preverjeno niti neoznačeno. To je tisto vmesno stanje, pri katerem bi lahko razmislili o možnostih "Mogoče" med "Da" in "Ne". Država ni popolnoma določena, od tod tudi ime: nedoločeno.
Nedoločena potrditvena polja
Najpogosteje lahko to vidimo v igri s potrditvenimi polji v obliki:
Kar :indeterminatezadeva potrditvena polja, je nekaj posebnih stvari, ki jih je vredno omeniti, preden se poglobite v to, kako jih lahko izberete v CSS.
V HTML-ju ni mogoče nastaviti
Prvič, v HTML-ju ni mogoče nastaviti potrditvenega polja v nedoločeno stanje. V uvodnem primeru zgoraj smo lahko drugo potrditveno polje nastavili na označeno, tako da smo to izrecno povedali v HTML-ju.
Logično je domnevati, da bi lahko enako storili z nedoločenim stanjem:
Na žalost pa temu ni tako, zato ne uporabljajte zadnjega primera v svoji kodi.
V času pisanja tega članka je Javascript edino sredstvo za nastavitev nedoločenega stanja na potrditvenem polju. Eden od načinov je, da določite določeno potrditveno polje z ID-jem:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Omejitev zgornjega primera je, da potrditveno polje nikoli ne more priti v nedoločeno stanje, ko se spremeni v drugo stanje. Namesto tega lahko vrtimo med preverjenimi, nepreverjenimi in nedoločenimi stanji:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Oglejte si potrditvena polja Pen Rotate Pen Geoff Graham (@geoffgraham) na CodePen.
Je zgolj vizualno stanje
Potrditveno polje še vedno šteje le, ali je bilo potrjeno ali ne, ne glede na to, ali smo aktivirali nedoločeno stanje. Z drugimi besedami, nedoločeno prikrije dejansko vrednost potrditvenega polja in se ne šteje kot lastna vrednost.
Privzeti videz je v brskalnikih nedosleden
Tako kot numerični vnosi tudi nedoločeno stanje v vsakem brskalniku ni skladno.
Na splošno pa je tu podpora za nedoločene potrditvena polja.
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 28. | 3.6 | 6. | 12. | 6. |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Nedoločeni radijski gumbi
:indeterminate lahko velja za izbirne gumbe na ravni skupine, kjer velja, da je celotna skupina v nedoločenem stanju, če ni izbrana nobena možnost.
Oglejte si radijske gumbe Pen Inderminate, avtorja Geoff Graham (@geoffgraham) na CodePen.
Upoštevati moramo, da uporaba :indeterminateuporabniške izkušnje morda ni najboljša izbira.
Neodločene vrstice napredka
Lahko se uporabimo tudi :indeterminateza element, kjer v HTML-ju ni bila izrecno nastavljena nobena vrednost. Javascripta ni treba, toda oblikovanje elementa je samo težavna stvar, ki zahteva veliko dela in upoštevanja doslednosti med brskalniki.
Oglejte si element za nedoločen napredek peresa Geoff Graham (@geoffgraham) na CodePen.
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 39 | 51 | 11. | 79 | 10.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Več informacij
- CSS Selectors Level 4 Delovni osnutek
- Nedoločena potrditvena polja
- Nedoločeni radijski gumbi
- Element napredka HTML5