CSS ::selection — как работает
CSS ::selection: принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Когда применять
Для «::selection» важно отделить назначение от случайного оформления. Псевдоэлемент ::selection выбирает специальную часть элемента без отдельного HTML-узла. При проверке в карточке материала с длинным заголовком сначала зафиксируйте момент загрузки ресурса в Network для «::selection», затем фиксируйте ожидаемое состояние до открытия DevTools.
Для «::selection» сначала проверяйте, создаётся ли псевдоэлемент в выбранном контексте и доступно ли содержимое без него. После этого сравните исходное и изменённое состояние «::selection» на одном и том же содержимом.
Синтаксис ::selection
Для демонстрации «::selection» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.label::selection {
color: #2563eb;
}Как работает ::selection
Чтобы объяснить работу «::selection», проследите путь от структуры и входного значения до отображения или поведения. Применяет декларации к псевдоэлементу без добавления лишнего HTML-узла. Контрольная точка для «::selection» — размер содержащего блока в Layout.
Проверка в проекте
- Проверяйте, создаётся ли псевдоэлемент в выбранном контексте и доступно ли содержимое без него; результат относится непосредственно к «::selection».
- Проверить печать и убедиться, что важное содержимое не исчезает при разборе «::selection».
- Проверьте «::selection» в карточке материала с длинным заголовком через момент загрузки ресурса в Network и запишите наблюдаемое изменение.
Оставляйте «::selection» в решении только после проверки в карточке материала с длинным заголовком. Если нативная конструкция решает задачу «::selection» с меньшим числом условий, используйте её.
Практика с ::selection
Создайте два варианта «::selection» в рабочем фрагменте интерфейса: корректный и с одной типичной ошибкой. Сравните варианты «::selection» через момент загрузки ресурса в Network и объясните различие.
Сценарий: в карточке материала с длинным заголовком.
Ошибки при работе с ::selection
Устойчивость
Смысловое содержимое нельзя оставлять доступным только через ::selection — это предметный риск для «::selection».
Доступность
Подмена семантики визуально похожим div или span при использовании «::selection».
Каскад
Смешивание данных, оформления и поведения в одной хрупкой конструкции; для «::selection» проверьте это отдельно.
Поддержка ::selection
Для «::selection» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «::selection»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о ::selection
Как понять, что «::selection» выбрано правильно?
«::selection» выбрано правильно, когда оно решает задачу «выбрать создаваемую браузером часть элемента или особый фрагмент его содержимого», сохраняет результат в карточке материала с длинным заголовком и проходит предметную проверку: проверяйте, создаётся ли псевдоэлемент в выбранном контексте и доступно ли содержимое без него.
Нужен ли запасной вариант для «::selection»?
Запасной вариант для «::selection» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «::selection» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.