: neapibrėžtas - CSS-gudrybės

Turinys

:indeterminateyra pseudo klasės selektorius CSS, pavadintas būsena, kuri nėra nei pažymėta, nei nepažymėta. Būtent tą tarpinę būseną galime apsvarstyti „Galbūt“ tarp „Taip“ ir „Ne“. Būsena nėra iki galo nustatyta, todėl ir pavadinimas: neapibrėžta.

Neapibrėžti žymimieji laukeliai

Dažniausiai tai galime pamatyti žaisdami su formos langeliais:

Įterpiama kaip trečioji žymės langelio būsena

Yra keletas keistų dalykų :indeterminate, susijusių su žymės langeliais, į kuriuos verta atkreipti dėmesį prieš įsigilinant į tai, kaip jį galima pasirinkti CSS.

Jo negalima nustatyti HTML

Pirmiausia, HTML negalima žymėti žymimuoju laukeliu į neapibrėžtą būseną. Pirmiau pateiktame pradiniame pavyzdyje mes galime nustatyti pažymėtą antrą žymimąjį laukelį, aiškiai pasakydami tai HTML.

Tik logiška manyti, kad tą patį galime padaryti ir su neapibrėžta būsena:

Deja, taip nėra, todėl nenaudokite paskutinio pavyzdžio savo kode.

Šiuo metu „Javascript“ yra vienintelė priemonė nustatyti žymimąjį laukelį neapibrėžtai būsenai. Vienas iš būdų tai padaryti yra pažymėti konkretų žymimąjį laukelį pagal ID:

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

Ankstesnio pavyzdžio apribojimas yra tas, kad žymės langelis niekada negali grįžti į neapibrėžtą būseną, kai jis pasikeis į kitą būseną. Vietoj to, mes galime pasukti tarp patikrintų, nepatikrintų ir neapibrėžtų būsenų:

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

Žr. Geoffo Grahamo (@geoffgraham) „Pen Rotate“ žymės langelio būsenas „CodePen“.

Tai grynai vizuali būsena

Pažymėtas langelis vis tiek skaičiuoja tik tai, ar jis buvo pažymėtas, ar nepažymėtas, neatsižvelgiant į tai, ar įjungėme neapibrėžtą būseną. Kitaip tariant, neapibrėžtas užmaskuoja tikrąją žymimojo langelio vertę ir nelaikomas savo verte.

Numatytoji išvaizda yra nenuosekli visose naršyklėse

Kaip ir skaitiniai įvedimai, neapibrėžta būsena nėra vienodo stiliaus kiekvienoje naršyklėje.

Neapibrėžtų vaizdų palyginimas keliose skirtingose ​​naršyklėse

Apskritai, čia yra nenustatytų žymimųjų laukelių palaikymas.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
28 3.6 6 12 6

Mobilusis / planšetinis kompiuteris

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

Neapibrėžti radijo mygtukai

:indeterminate gali būti taikomas radijo mygtukams grupės lygiu, kai laikoma, kad visa grupė yra neapibrėžtos būsenos, jei nepasirenkama nė viena parinktis.

Žr. Geoffo Grahamo (@geoffgraham) „Pen Inderminate“ radijo mygtukus „CodePen“.

Turėtume atkreipti dėmesį į tai, kad naudojimas :indeterminategali būti ne pats geriausias pasirinkimas, kiek tai susiję su vartotojo patirtimi.

Neapibrėžti progreso barai

Mes taip pat gali kreiptis :indeterminateį elementą, kai nėra vertė buvo aiškiai nustatytą HTML. „Javascript“ nereikia, tačiau pats elemento stilius yra keblus dalykas, reikalaujantis daug darbo ir atsižvelgti į skirtingų naršyklių nuoseklumą.

Žr. Geoffo Grahamo (@geoffgraham) „Pen Nenustatytą pažangos elementą“ „CodePen“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
39 51 11 79 10.1

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 10.3

Daugiau informacijos

  • CSS selektorių 4 lygio darbinis projektas
  • Neapibrėžti žymimieji laukeliai
  • Neapibrėžti radijo mygtukai
  • HTML5 pažangos elementas

Įdomios straipsniai...