:indeterminateon CSS: ssä pseudoluokan valitsin, joka on nimetty tilalle, jota ei ole tarkistettu eikä sitä ole valittu. Se on välitila, jota voimme harkita "ehkä" vaihtoehdon "kyllä" ja "ei" välillä. Tila ei ole täysin määritelty, joten nimi: määrittelemätön.
Määrittelemättömät valintaruudut
Yleisin paikka, jonka saatamme nähdä tässä pelissä, on valintaruudut muodossa:
:indeterminateValintaruutujen suhteen on muutama omituinen asia, joka on syytä huomata ennen kuin kaivaa miten se voidaan valita CSS: ssä.
Sitä ei voi asettaa HTML-koodissa
Ensinnäkin, ei ole mitään tapaa asettaa valintaruutua määrittelemättömään tilaan HTML-muodossa. Yllä olevassa avaavassa esimerkissä pystyimme asettamaan toisen valintaruudun tarkistettavaksi sanomalla nimenomaisesti niin HTML: ssä.
On vain loogista olettaa, että voimme tehdä saman määrittelemättömällä tilalla:
Mutta valitettavasti näin ei ole, joten älä käytä tätä viimeistä esimerkkiä koodissasi.
Tämän kirjoituksen aikaan Javascript on ainoa tapa asettaa määrittelemätön tila valintaruutuun. Yksi tapa edetä on valita tietty valintaruutu tunnuksen mukaan:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Yllä olevan esimerkin rajoitus on, että valintaruutu ei voi koskaan palata määrittelemättömään tilaan, kun se muuttuu toiseen tilaan. Sen sijaan voimme kiertää tarkistettujen, tarkistamattomien ja määrittelemättömien tilojen välillä:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Katso Geoff Grahamin (@geoffgraham) kynänkierron valintaruudun tilat CodePenistä.
Se on puhtaasti visuaalinen tila
Valintaruutu laskee edelleen vain, onko se valittu vai ei, riippumatta siitä, onko aktivoitu määrittelemätön tila. Toisin sanoen määrittelemätön peittää valintaruudun todellisen arvon eikä sitä lasketa omaksi arvoksi.
Sen oletusnäköisyys on epäjohdonmukainen kaikissa selaimissa
Kuten numeeriset syötteet, myös määrittelemätön tila ei ole tyyliltään johdonmukainen kaikissa selaimissa.
Kaiken kaikkiaan tässä on kuitenkin tuki määrittelemättömille valintaruuduille.
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Määrittelemättömät radiopainikkeet
:indeterminate voidaan soveltaa ryhmätason painikkeisiin, joissa koko ryhmän katsotaan olevan määrittelemättömässä tilassa, jos mitään vaihtoehtoa ei ole valittu.
Katso Geoff Grahamin (@geoffgraham) kynän lopetusradiopainikkeet CodePenistä.
Meidän on huomattava, että käyttö :indeterminateei välttämättä ole paras valinta käyttökokemuksen kannalta.
Määrittelemättömät edistymispalkit
Voimme soveltaa :indeterminatemyös elementtiä, jossa HTML-koodissa ei ole nimenomaisesti määritetty arvoa. Javascriptia ei tarvita, mutta elementin muotoilu on itsessään hankala asia, joka vaatii paljon työtä ja harkintaa selainten välisen johdonmukaisuuden kannalta.
Katso Geoff Grahamin (@geoffgraham) kynän määrittelemätön edistymisosa CodePenistä.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Lisää tietoa
- CSS-valitsinten tason 4 työluonnos
- Määrittelemättömät valintaruudut
- Määrittelemättömät radiopainikkeet
- HTML5 Progress -elementti