CSS :disabled — как работает
CSS :disabled: принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Когда применять
«:disabled» рассматривается не как изолированный синтаксис, а как часть области «псевдоклассы». Псевдокласс :disabled сопоставляет элемент с определённым состоянием или структурным условием. Практический контекст для «:disabled» — в адаптивной навигации на экране 320 px; во время проверки проверяйте отсутствие данных как отдельный сценарий.
Перед применением «:disabled» сформулируйте ожидаемое поведение, затем не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса. Для «:disabled» такое сравнение показывает реальную причину изменения.
Синтаксис :disabled
Минимальная запись «:disabled» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.button:disabled {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Как работает :disabled
Селектор пересчитывается браузером при изменении состояния или структуры DOM. Для «:disabled» проверьте две контрольные точки — результат при отключённом JavaScript и изменение DOM в панели Elements: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса; результат относится непосредственно к «:disabled».
- Снять JavaScript и убедиться, что базовая информация остаётся доступной при разборе «:disabled».
- Проверьте «:disabled» в адаптивной навигации на экране 320 px через результат при отключённом JavaScript и запишите наблюдаемое изменение.
Оставляйте «:disabled» в решении только после проверки в адаптивной навигации на экране 320 px. Если нативная конструкция решает задачу «:disabled» с меньшим числом условий, используйте её.
Практика с :disabled
Проверьте «:disabled» в минимальном компоненте с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «:disabled»: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса.
Сценарий: в адаптивной навигации на экране 320 px.
Ошибки при работе с :disabled
Доступность
Состояние :disabled не должно быть единственным способом увидеть важное действие или информацию — это предметный риск для «:disabled».
Каскад
Дублирование интерактивной роли без нативного управления при использовании «:disabled».
Поддержка
Использование физической стороны там, где нужен логический отступ; для «:disabled» проверьте это отдельно.
Поддержка :disabled
Для «:disabled» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «:disabled»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2.
Вопросы о :disabled
Как понять, что «:disabled» выбрано правильно?
«:disabled» выбрано правильно, когда оно решает задачу «выбрать элемент по состоянию, положению или отношению к другим узлам», сохраняет результат в адаптивной навигации на экране 320 px и проходит предметную проверку: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса.
Нужен ли запасной вариант для «:disabled»?
Запасной вариант для «:disabled» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «:disabled» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.