:indeterminateeste un selector de pseudo-clasă în CSS numit pentru o stare care nu este nici bifată și nici bifată. Este acea stare intermediară pe care am putea să o luăm în considerare opțiunile „Poate” dintre „Da” și „Nu”. Starea nu este pe deplin determinată, de unde și numele: nedeterminat.
Casete de selectare nedeterminate
Cel mai frecvent loc în care am putea vedea acest lucru în joc este cu casetele de selectare într-un formular:
Există câteva lucruri ciudate în ceea :indeterminatece privește casetele de selectare care merită menționate înainte de a analiza modul în care poate fi selectat în CSS.
Nu poate fi setat în HTML
În primul rând, nu există nicio modalitate de a seta o casetă de selectare la o stare nedeterminată în HTML. În exemplul de deschidere de mai sus, am reușit să setăm a doua casetă de selectare la bifată spunând în mod explicit acest lucru în HTML.
Este logic doar să presupunem că am putea face același lucru cu o stare nedeterminată:
Dar, din păcate, nu este cazul, așa că nu folosiți ultimul exemplu în cod.
La momentul scrierii acestui articol, Javascript este singurul mijloc pentru setarea unei stări nedeterminate pe o casetă de selectare. O modalitate de a face acest lucru este să selectați o anumită casetă de selectare după ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Limita exemplului de mai sus este că caseta de selectare nu poate reveni niciodată la o stare nedeterminată odată ce se schimbă într-o altă stare. În schimb, putem roti între stări verificate, necontrolate și nedeterminate:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Vedeți Starea casetei de rotație stilou de Geoff Graham (@geoffgraham) pe CodePen.
Este pur o stare vizuală
O casetă de selectare încă contează numai dacă a fost bifată sau debifată, indiferent dacă am activat o stare nedeterminată. Cu alte cuvinte, nedeterminat maschează valoarea reală a casetei de selectare și nu se consideră o valoare proprie.
Aspectul său implicit este inconsecvent în toate browserele
La fel ca intrările numerice, o stare nedeterminată nu stilează în mod constant în fiecare browser.
În general, totuși, iată suportul pentru casetele de selectare nedeterminate.
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Butoane radio nedeterminate
:indeterminate se poate aplica butoanelor radio la nivel de grup, unde întregul grup este considerat a fi într-o stare nedeterminată dacă nu este selectată nicio opțiune.
Vedeți butoanele radio Pen Inderminate de Geoff Graham (@geoffgraham) pe CodePen.
Ar trebui să observăm că utilizarea :indeterminatepoate să nu fie cea mai bună alegere în ceea ce privește experiența utilizatorului.
Bare de progres nedeterminate
Ne putem aplica :indeterminateși elementului în care nu a fost stabilită în mod explicit nicio valoare în HTML. Nu este nevoie de Javascript, dar stilizarea elementului este în sine un lucru dificil care necesită multă muncă și atenție pentru consistența cross-browser-ului.
Vedeți Pen Indeterminate Progress Element de Geoff Graham (@geoffgraham) pe CodePen.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Mai multe informatii
- Selector CSS Nivel 4 Proiect de lucru
- Casete de selectare nedeterminate
- Butoane radio nedeterminate
- Element de progres HTML5