: neurčitý - Triky CSS

Anonim

:indeterminateje selektor pseudo-triedy v CSS pomenovaný pre stav, ktorý nie je ani začiarknutý, ani nezaškrtnutý. Je to ten medzistupňový stav, ktorý by sme mohli zvážiť medzi možnosťami „možno“ medzi „áno“ a „nie“. Štát nie je úplne určený, odtiaľ pochádza aj názov: neurčitý.

Neurčité začiarkavacie políčka

Najbežnejšie miesto, ktoré môžeme v hre vidieť, je začiarkavacie políčka vo forme:

Ukončená ako tretí stav začiarkavacieho políčka

Existuje niekoľko svojráznych vecí, :indeterminatepokiaľ ide o začiarkavacie políčka, ktoré stojí za zmienku, skôr ako sa pustíte do hľadania možností, ako ich možno zvoliť v CSS.

Nemožno ju nastaviť v kóde HTML

Po prvé, v HTML nie je možné nastaviť začiarkavacie políčko na neurčitý stav. V úvodnom príklade vyššie sme boli schopní nastaviť druhé začiarkavacie políčko na začiarknutie výslovným vyslovením v HTML.

Je len logické predpokladať, že by sme mohli urobiť to isté s neurčitým stavom:

Bohužiaľ to tak nie je, takže tento posledný príklad vo svojom kóde nepoužívajte.

V čase písania tohto článku je Javascript jediným prostriedkom na nastavenie neurčitého stavu začiarkavacieho políčka. Jedným zo spôsobov, ako to dosiahnuť, je výber konkrétneho začiarkavacieho políčka podľa ID:

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

Obmedzenie vyššie uvedeného príkladu je, že začiarkavacie políčko sa nikdy nemôže vrátiť do neurčitého stavu, akonáhle sa zmení na iný stav. Namiesto toho môžeme rotovať medzi kontrolovaným, nekontrolovaným a neurčitým stavom:

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

Prezrite si začiarkavacie políčka Pen Rotate States od Geoffa Grahama (@geoffgraham) na CodePen.

Je to čisto vizuálny stav

Začiarkavacie políčko stále počíta iba to, či bolo začiarknuté alebo nezaškrtnuté, bez ohľadu na to, či sme aktivovali neurčitý stav. Inými slovami, neurčitý maskuje skutočnú hodnotu začiarkavacieho políčka a nepočíta sa ako vlastná hodnota.

Predvolený vzhľad je v rôznych prehliadačoch nekonzistentný

Rovnako ako numerické vstupy, aj neurčitý stav sa nemodifikuje dôsledne v každom prehľadávači.

Porovnanie toho, ako neurčité sa vykresľuje v niekoľkých rôznych prehliadačoch

Celkovo tu však existuje podpora pre neurčité začiarkavacie políčka.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
28 3.6 6 12 6

Mobil / tablet

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

Neurčité rádiové tlačidlá

:indeterminate sa môže vzťahovať na prepínače na úrovni skupiny, kde sa celá skupina považuje za neurčitý stav, ak nie je vybratá žiadna možnosť.

Pozrite si tlačidlá Pen Inderminate Radio Buttons od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Mali by sme poznamenať, že používanie :indeterminatenemusí byť najlepšou voľbou, pokiaľ ide o užívateľskú skúsenosť.

Neurčité ukazovatele priebehu

Môžeme tiež použiť :indeterminatena element, kde v HTML nebola výslovne nastavená žiadna hodnota. Javascript nie je potrebný, ale samotný štýl prvku je zložitá vec, ktorá si vyžaduje veľa práce a zváženia konzistencie medzi prehliadačmi.

Prezrite si prvok neurčitého pokroku pera od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
39 51 11 79 10.1

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Viac informácií

  • Pracovný koncept selektorov CSS úrovne 4
  • Neurčité začiarkavacie políčka
  • Neurčité rádiové tlačidlá
  • Priebeh priebehu HTML5