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