: neodređeno - CSS-trikovi

Anonim

:indeterminateje selektor pseudo-klase u CSS-u koji je imenovan za stanje koje nije ni označeno ni neprovjereno. To je ono stanje između kojeg bismo mogli razmotriti opcije "Možda" između "Da" i "Ne". Država nije u potpunosti određena, pa otuda i naziv: neodređeno.

Neodređeni potvrdni okviri

Najčešće mjesto koje bismo mogli vidjeti u igri su potvrdni okviri u obliku:

Neodrediti kao treće stanje okvira za potvrdu

Postoji nekoliko neobičnih stvari u vezi :indeterminates potvrdnim okvirima koje vrijedi napomenuti prije nego što istražite kako se to može odabrati u CSS-u.

Ne može se postaviti u HTML-u

Prvo, ne postoji način za postavljanje potvrdnog okvira u neodređeno stanje u HTML-u. U uvodnom primjeru gore, uspjeli smo postaviti drugi potvrdni okvir na označen tako što smo to izričito izgovorili u HTML-u.

Logično je pretpostaviti da bismo isto mogli učiniti s neodređenim stanjem:

Ali, nažalost, to nije slučaj pa nemojte koristiti taj posljednji primjer u svom kodu.

U vrijeme pisanja ovog teksta, Javascript je jedino sredstvo za postavljanje neodređenog stanja na potvrdni okvir. Jedan od načina za to je odabir određenog potvrdnog okvira prema ID-u:

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

Ograničenje gornjeg primjera je da se potvrdni okvir nikada ne može vratiti u neodređeno stanje nakon što se promijeni u drugo stanje. Umjesto toga, možemo se okretati između provjerenih, neprovjerenih i neodređenih stanja:

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

Pogledajte države okvira za potvrdu Rotate Pen Rotate, Geoff Graham (@geoffgraham) na CodePenu.

To je čisto vizualno stanje

Potvrdni okvir i dalje broji samo je li označen ili ne, bez obzira jesmo li aktivirali neodređeno stanje. Drugim riječima, neodređeno maskira stvarnu vrijednost potvrdnog okvira i ne računa se kao vlastita vrijednost.

Zadani je izgled nedosljedan u svim preglednicima

Poput numeričkih unosa, neodređeno stanje ne stilizira se dosljedno u svakom pregledniku.

Usporedba toga kako se neodređena generira u nekoliko različitih preglednika

Sve u svemu, ovdje je podrška za neodređene potvrdne okvire.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
28 3.6 6 12 6

Mobitel / tablet

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

Neodređeni radio gumbi

:indeterminate može se primijeniti na radio gumbe na razini grupe, gdje se smatra da je cijela grupa u neodređenom stanju ako nije odabrana nijedna opcija.

Pogledajte radio gumbe Neodređeni olovkom Geoff Graham (@geoffgraham) na CodePenu.

Morali bismo imati na umu da upotreba :indeterminatemožda nije najbolji izbor što se korisničkog iskustva tiče.

Neodređeni stupci napretka

Također se možemo primijeniti :indeterminatena element gdje u HTML-u nije izričito postavljena vrijednost. Nema potrebe za Javascriptom, ali oblikovanje elementa samo je po sebi zeznuto što zahtijeva puno rada i razmatranja za dosljednost više preglednika.

Pogledajte Element neodređenog napretka olovke, Geoff Graham (@geoffgraham) na CodePenu.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
39 51 11 79 10.1

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Više informacija

  • CSS Selectors Level 4 Radni nacrt
  • Neodređeni potvrdni okviri
  • Neodređeni radio gumbi
  • HTML5 element napretka