: nenoteikts - CSS-triki

Anonim

:indeterminateir CSS pseidoklases atlasītājs, kas nosaukts valstij, kas nav ne pārbaudīta, ne arī pārbaudīta. Tas ir tas starpposma stāvoklis, kurā mēs varētu apsvērt iespēju “Varbūt” starp “Jā” un “Nē”. Valsts nav pilnībā noteikta, tāpēc nosaukums: nenoteikts.

Nenoteiktas izvēles rūtiņas

Visizplatītākā vieta, kur mēs to varam redzēt spēlē, ir izvēles rūtiņas formā:

Izbeigt kā trešo izvēles rūtiņas stāvokli

Ir dažas neparastas lietas :indeterminate, kas attiecas uz izvēles rūtiņām, kuras ir vērts atzīmēt, pirms izpētīt, kā to var atlasīt CSS.

To nevar iestatīt HTML

Pirmkārt, HTML veidā nav iespējams iestatīt izvēles rūtiņu uz nenoteiktu stāvokli. Iepriekšējā sākuma piemērā mēs varējām iestatīt atzīmēto otro izvēles rūtiņu, skaidri to sakot HTML.

Ir tikai loģiski pieņemt, ka mēs varētu darīt to pašu ar nenoteiktu stāvokli:

Diemžēl tas tā nav, tāpēc neizmantojiet šo pēdējo piemēru savā kodā.

Šīs rakstīšanas laikā Javascript ir vienīgais līdzeklis, lai izvēles rūtiņā iestatītu nenoteiktu stāvokli. Viens veids, kā to izdarīt, ir atlasīt noteiktu izvēles rūtiņu pēc ID:

var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

Iepriekš minētā piemēra ierobežojums ir tāds, ka izvēles rūtiņa nekad nevar atgriezties nenoteiktā stāvoklī, kad tā mainās uz citu. Tā vietā mēs varam pagriezties starp pārbaudītiem, nepārbaudītiem un nenoteiktiem stāvokļiem:

 
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )

Skatiet Geoff Graham (@geoffgraham) Pen Rotate izvēles rūtiņas stāvokļus vietnē CodePen.

Tas ir tīri vizuāls stāvoklis

Atzīmējot izvēles rūtiņu, tiek ņemts vērā tikai tas, vai tā ir atzīmēta vai nav atzīmēta, neatkarīgi no tā, vai esam aktivizējuši nenoteiktu stāvokli. Citiem vārdiem sakot, nenoteikts maskē izvēles rūtiņas faktisko vērtību un netiek skaitīts kā atsevišķa vērtība.

Noklusējuma izskats pārlūkprogrammās ir pretrunīgs

Tāpat kā skaitliskās ievades, nenoteiktais stāvoklis neveidojas vienmērīgi katrā pārlūkprogrammā.

Salīdzinājums ar nenoteiktu renderēšanu dažās dažādās pārlūkprogrammās

Tomēr kopumā šeit ir sniegts atbalsts nenoteiktām izvēles rūtiņām.

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
28 3.6 6 12 6

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 12.2.-12.4

Nenoteiktas radio pogas

:indeterminate var piemērot radiopogām grupas līmenī, kur visa grupa tiek uzskatīta par nenoteiktu stāvokli, ja nav izvēlēta neviena opcija.

Skatiet Geoff Graham (@geoffgraham) Pen Inderminate radio pogas vietnē CodePen.

Mums jāatzīmē, ka lietošana, :indeterminateiespējams, nav labākā izvēle, ciktāl tas attiecas uz lietotāju pieredzi.

Nenoteikti progresa bāri

Mēs varam piemērot :indeterminatearī elementu, kurā HTML nav skaidri noteikta vērtība. Javascript nav nepieciešams, taču elementa veidošana pati par sevi ir sarežģīta lieta, kas prasa daudz darba un jāapsver dažādu pārlūkprogrammu konsekvence.

Skatiet Geoff Graham (@geoffgraham) pildspalvas nenoteikto progresa elementu vietnē CodePen.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
39 51 11 79 10.1

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. 10.3

Vairāk informācijas

  • CSS atlasītāju 4. līmeņa darba projekts
  • Nenoteiktas izvēles rūtiņas
  • Nenoteiktas radio pogas
  • HTML5 progresa elements