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