: neurčitý - Triky CSS

Anonim

:indeterminateje selektor pseudotřídy v CSS pojmenovaný pro stav, který není ani zaškrtnutý, ani nezaškrtnutý. Je to stav mezi tím, který bychom mohli považovat za „Možná“ mezi „Ano“ a „Ne“. Stát není zcela určen, proto název: neurčitý.

Neurčité zaškrtávací políčka

Nejběžnějším místem, které bychom mohli ve hře vidět, jsou zaškrtávací políčka ve tvaru:

Ukončeno jako třetí zaškrtávací políčko

Existuje několik nepředvídatelných věcí, :indeterminatepokud jde o zaškrtávací políčka, která stojí za zmínku, než se pustíte do toho, jak to lze vybrat v CSS.

Nelze jej nastavit v HTML

Nejprve neexistuje způsob, jak nastavit zaškrtávací políčko na neurčitý stav v HTML. Ve výše uvedeném úvodním příkladu jsme byli schopni nastavit druhé zaškrtávací políčko na zaškrtnuté výslovným vyslovením v HTML.

Je jen logické předpokládat, že bychom mohli udělat totéž s neurčitým stavem:

Ale bohužel tomu tak není, takže tento poslední příklad ve svém kódu nepoužívejte.

V době psaní tohoto článku je Javascript jediným prostředkem pro nastavení neurčitého stavu na zaškrtávacím políčku. Jedním ze způsobů, jak toho dosáhnout, je vybrat konkrétní zaškrtávací políčko podle ID:

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

Omezení výše uvedeného příkladu spočívá v tom, že zaškrtávací políčko se nikdy nemůže vrátit zpět do neurčitého stavu, jakmile se změní na jiný stav. Místo toho můžeme otáčet mezi kontrolovaným, nezaškrtnutým a neurčitým stavem:

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

Podívejte se na zaškrtávací políčka Pen Rotate States od Geoffa Grahama (@geoffgraham) na CodePen.

Je to čistě vizuální stav

Zaškrtávací políčko stále počítá pouze to, zda bylo zaškrtnuto nebo nezaškrtnuto, bez ohledu na to, zda jsme aktivovali neurčitý stav. Jinými slovy, neurčitý maskuje skutečnou hodnotu zaškrtávacího políčka a nepočítá se jako vlastní hodnota.

Výchozí vzhled je v různých prohlížečích nekonzistentní

Stejně jako číselné vstupy neurčitý stav není konzistentní ve všech prohlížečích.

Srovnání toho, jak neurčitý vykreslení v několika různých prohlížečích

Celkově je zde však podpora pro neurčité zaškrtávací políčka.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
28 3.6 6 12 6

Mobilní / Tablet

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

Neurčité rádiové tlačítka

:indeterminate lze použít na přepínače na úrovni skupiny, kde se celá skupina považuje za neurčitý stav, pokud není vybrána žádná možnost.

Podívejte se na Pen Inderminate Radio Buttons od Geoffa Grahama (@geoffgraham) na CodePen.

Měli bychom poznamenat, že používání :indeterminatenemusí být tou nejlepší volbou, pokud jde o uživatelskou zkušenost.

Neurčité ukazatele průběhu

Můžeme také použít :indeterminatena prvek, kde nebyla v HTML explicitně nastavena žádná hodnota. Javascript není potřeba, ale styling prvku je sám o sobě choulostivá věc, která vyžaduje hodně práce a zvážení konzistence mezi prohlížeči.

Podívejte se na prvek Pen Neurčitý pokrok od Geoffa Grahama (@geoffgraham) na CodePen.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
39 51 11 79 10.1

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Více informací

  • Pracovní koncept CSS Selectors úrovně 4
  • Neurčité zaškrtávací políčka
  • Neurčité rádiové tlačítka
  • Prvek průběhu HTML5