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