:indeterminateon CSS-is pseudoklassi valija, mille nimi on olek, mida ei kontrollita ega kontrollita. Selle vahepealse oleku korral võiksime kaaluda valiku „Võib-olla” vahel „Jah” ja „Ei”. Olek pole täielikult kindlaks määratud, sellest ka nimi: määramatu.
Määramata ruudud
Kõige tavalisem koht, mida me seda mängus võime näha, on märkeruudud kujul:
:indeterminateMärkekastide osas on mõned veidrad asjad , mida tasub enne CSS-is valimise uurimist tähele panna.
Seda ei saa HTML-is seadistada
Esiteks ei saa HTML-is märkeruudu määramatuks olekuks seada. Ülalolevas avanäites suutsime teise märkeruudu märkida, öeldes selgesõnaliselt HTML-is.
On ainult loogiline eeldada, et saaksime sama teha ka määramatu olekuga:
Kuid kahjuks see pole nii, nii et ärge kasutage seda viimast näidet oma koodis.
Selle kirjutamise ajal on Javascript ainus võimalus märkeruutu määramata oleku määramiseks. Üks võimalus selleks on valida konkreetne märkeruut ID järgi:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Ülaltoodud näite piirang on see, et märkeruut ei saa kunagi uuesti määramatusse olekusse tagasi minna, kui see muutub teiseks olekuks. Selle asemel võime pöörata kontrollitud, kontrollimata ja määramata olekute vahel:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Vaadake CodePen'is Geoff Graham'i (@geoffgraham) pliiatsi pööramise märkeruutude olekut.
See on puhtalt visuaalne olek
Märkeruut loeb endiselt ainult seda, kas see on kontrollitud või märkimata, olenemata sellest, kas me oleme määramata oleku aktiveerinud. Teisisõnu, ebamäärane maskeerib märkeruudu tegeliku väärtuse ja seda ei loeta eraldi väärtuseks.
Vaikimisi on välimus brauserites vastuoluline
Nagu numbrilised sisendid, ei määra määramata olek igas brauseris ühtlaselt.
Üldiselt on siin aga määramatute märkeruutude tugi.
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Määramata raadionupud
:indeterminate saab rakendada raadionuppude jaoks rühma tasemel, kus kogu rühma loetakse määramata olekusse, kui ühtegi võimalust pole valitud.
Vaadake CodePenis Geoff Graham'i (@geoffgraham) pliiatsi kirjutamise nuppe.
Peaksime märkima, et kasutamine :indeterminateei pruugi olla parim valik, kuivõrd kasutaja kogemus on.
Määramata edenemisribad
Saame rakendada :indeterminateka elementi, kus HTML-is pole selget väärtust määratud. Javascripti pole vaja, kuid elemendi stiil on iseenesest keeruline asi, mis nõuab brauseriteülese järjepidevuse nimel palju tööd ja arvestamist.
Vaadake CodePenil Geoff Grahami (@geoffgraham) pliiatsi määramata progressi elementi.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Rohkem informatsiooni
- CSS-i valijate 4. taseme tööprojekt
- Määramata ruudud
- Määramata raadionupud
- HTML5 Progress Element