Панель обзора CSS

В Chrome DevTools откройте панель «Обзор CSS» через Cmd+Shift+P → «Обзор CSS». Нажмите «Собрать обзор», чтобы проанализировать всю таблицу стилей текущей страницы. Панель обобщает сведения о цветах, шрифтах, медиазапросах и неиспользуемых объявлениях.

Раздел «Цвета» перечисляет все значения цветов, используемые в CSS страницы: шестнадцатеричные, значения rgb, именованные цвета и остановки градиентов, сгруппированные по типу. При нажатии на цвет отображаются элементы и свойства, которые его используют, что помогает обнаружить непреднамеренное разнообразие цветов и чрезмерное разрастание палитры.

Раздел «Шрифты» перечисляет все применённые к странице сочетания семейств, размеров и начертаний шрифтов. Он показывает резервные варианты в стеке шрифтов, выявляет непоследовательность типографической шкалы и указывает, какие элементы используют каждое сочетание.

Раздел «Медиазапросы» перечисляет каждое правило @media, его контрольные точки и количество объявлений внутри него. Этот обзор выявляет непоследовательность контрольных точек: в кодовой базе иногда накапливается более 15 немного отличающихся значений контрольных точек.

Обзор CSS отмечает объявления, которые никогда не применяются из-за конфликтов специфичности или неподходящих селекторов. Это отличается от анализа покрытия: такой анализ обнаруживает правила, которые всегда переопределяются, и для этого не требует действий пользователя.

Панель выделяет цвета текста, не соответствующие коэффициентам контрастности WCAG AA или AAA на фоне. При нажатии на нарушение контрастности элемент выбирается в DOM, поэтому проблемы доступности легко исправить без отдельных инструментов.

Используйте «Обзор CSS» после крупных изменений дизайна или при знакомстве с существующей кодовой базой. Сводка цветов показывает, насколько реализация отклонилась от токенов дизайна. Сводка шрифтов выявляет непоследовательность типографики ещё до того, как её заметят пользователи.

Запустите «Обзор CSS» на нескольких страницах одного приложения. Сравнение сводок цветов и шрифтов выявляет расхождения между страницами: компоненты могут отображаться с типографикой или цветом, отличающимися от их аналогов на других страницах.

Экспортируйте данные о цветах из «Обзора CSS» и сравните их с палитрой токенов дизайна. Цвета, присутствующие в обзоре, но отсутствующие в палитре токенов, являются жёстко заданными значениями. Их следует заменить ссылками на токены и удалить как самостоятельные значения.

Составьте список контрольных точек из «Обзора CSS», найдите дубликаты и почти совпадающие значения (768px, 769px, 770px у разных разработчиков), объедините их в шкалу контрольных точек дизайн-системы и обновите все медиазапросы, чтобы они использовали пользовательские свойства CSS или переменные SCSS.

Обзор CSS анализирует подключённые таблицы стилей, но не встроенные стили и стили CSS в JS, создаваемые во время выполнения. Динамические классы, добавленные JavaScript после первоначальной отрисовки, могут не отображаться. Для полного анализа динамических стилей дополните этот способ анализом покрытия и ручной проверкой.

Какую проблему доступности обнаруживает «Обзор CSS»?

«Обзор CSS» выполняет аудит страницы на уровне целого документа: проверяет цвета, шрифты, контрольные точки медиазапросов и проблемы контрастности. Используйте его, чтобы обнаружить отклонения от дизайна, чрезмерное разрастание палитры, непоследовательность типографики и нарушения доступности до того, как они накопятся и превратятся в технический долг, который дорого устранять.