: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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 28 | 3,6 | 6 | 12 | 6 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12,2–12,4 |
Неопределенные радиокнопки
:indeterminate может применяться к переключателям на уровне группы, где вся группа считается находящейся в неопределенном состоянии, если не выбран ни один параметр.
См. Радио-кнопки Pen Inderminate от Джеффа Грэма (@geoffgraham) на CodePen.
Мы должны отметить, что использование :indeterminateможет быть не лучшим выбором с точки зрения пользовательского опыта.
Неопределенные индикаторы прогресса
Мы также можем применить :indeterminateк элементу, значение которого не было явно задано в HTML. В Javascript нет необходимости, но стилизация элемента - это сложная вещь, требующая много работы и учета кросс-браузерной согласованности.
См. Элемент Pen Indeterminate Progress Element от Джеффа Грэма (@geoffgraham) на CodePen.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 10,3 |
Дополнительная информация
- CSS Selectors Level 4 Рабочий проект
- Неопределенные флажки
- Неопределенные радиокнопки
- HTML5 элемент прогресса