:indeterminate- це селектор псевдокласу в CSS, названий для стану, який не перевіряється і не відмічається. Це той проміжний стан, який ми могли б розглянути на варіанті «Можливо» між «Так» та «Ні». Держава не повністю визначена, звідси і назва: невизначена.
Невизначені прапорці
Найпоширенішим місцем, де ми можемо побачити це у грі, є прапорці у формі:
Існує кілька химерних речей, :indeterminateколи мова заходить про прапорці, на які варто звернути увагу перед тим, як заглибитися в те, як це можна вибрати в CSS.
Його неможливо встановити в HTML
По-перше, у HTML немає можливості встановити прапорець у невизначений стан. У наведеному вище прикладі ми змогли встановити для другого прапорця позначку, прямо вказавши це в HTML.
Цілком логічно припустити, що ми могли б зробити те саме з невизначеним станом:
Але, на жаль, це не так, тому не використовуйте останній приклад у своєму коді.
На момент написання цієї статті Javascript є єдиним засобом для встановлення невизначеного стану для прапорця. Один із способів це зробити - встановити певний прапорець за ідентифікатором:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Обмеження наведеного вище прикладу полягає в тому, що прапорець ніколи не може повернутися до невизначеного стану, коли він зміниться на інший стан. Натомість ми можемо обертати між перевіреним, неперевіреним та невизначеним станами:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Перегляньте стани прапорця "Поворот ручки" Джеффа Грема (@geoffgraham) на CodePen.
Це суто візуальний стан
Прапорець все ще враховує лише те, чи було воно встановлене чи не встановлене, незалежно від того, чи ми активували невизначений стан. Іншими словами, невизначена маскує фактичне значення прапорця і не зараховується як власне значення.
Типовий зовнішній вигляд несумісний у браузерах
Як і числові входи, невизначений стан не стилізується послідовно в кожному браузері.
Однак загалом, тут є підтримка невизначених прапорців.
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Невизначені радіо-кнопки
:indeterminate може застосовуватися до перемикачів на рівні групи, де вся група вважається невизначеною, якщо жоден варіант не обраний.
Дивіться радіо-кнопки «Невизначене пером» Джеффа Грема (@geoffgraham) на CodePen.
Слід зазначити, що використання :indeterminateможе бути не найкращим вибором, що стосується користувацького досвіду.
Невизначені індикатори прогресу
Ми також можемо застосувати :indeterminateдо елемента, де в HTML явно не встановлено значення. У Javascript немає потреби, але стилізація елемента сама по собі хитра річ, яка вимагає великої праці та уваги щодо узгодженості між браузерами.
Дивіться Елемент невизначеного прогресу ручки Джеффа Грем (@geoffgraham) на CodePen.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Більше інформації
- Селектори CSS Рівень 4 Робочий проект
- Невизначені прапорці
- Невизначені радіо-кнопки
- Елемент прогресу HTML5