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