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