Оптимизация стилей CSS с помощью средства обзора CSS

  • Статья

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

Открытие средства обзора CSS

Чтобы открыть средство обзора CSS , выполните следующие действия:

  1. Перейдите к демонстрационной версии приложения списка todo в Microsoft Edge или на собственную веб-страницу.

  2. Откройте devTools, нажав клавишу F12 или CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

  3. На панели инструментов main щелкните Другие инструменты и выберите в списке обзор CSS.

    Microsoft Edge с демонстрационной версией приложения списка todo и DevTools рядом с ним, где отображается список инструментов с кнопки

  4. Откроется средство "Обзор CSS " и отображается экран приветствия.

    Microsoft Edge с демонстрационной версией приложения списка задач и средствами разработки рядом с ним, где отображается экран приветствия

Запись обзорного отчета CSS

Начните использовать средство, записав новый отчет. Щелкните Обзор записи, откроется отчет об обзоре.

Microsoft Edge с демонстрационной версией приложения списка задач и средствами разработки рядом с ним, где отображается отчет

Если вы внесете изменения на веб-страницу и хотите просмотреть новый отчет, нажмите кнопку Очистить обзор , а затем запишите новый обзор.

Microsoft Edge с демонстрационной версией списка задач и средствами разработки рядом с ним, где отображается отчет обзор CSS с кнопкой Очистить обзор в верхней части экрана.

Общие сведения об отчете

Обзорный отчет CSS содержит сведения, разделенные на несколько разделов:

  • Сводка обзора. Статистика по ключевым правилам CSS, селекторам и запросам мультимедиа на странице.
  • Цвета: цвета, используемые на странице.
  • Сведения о шрифте: список шрифтов на странице.
  • Неиспользуемые объявления: список неиспользуемых объявлений CSS.
  • Запросы мультимедиа: список запросов мультимедиа.

Чтобы просмотреть разделы отчета, используйте полосу прокрутки или щелкните разделы на боковой панели:

Демонстрационное приложение TODO слева, отчет DevTools CSS Overview справа с списком разделов и полосой прокрутки

Обзор сводки

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

Его можно использовать для оценки объема и согласованности базы кода CSS на заданной веб-странице. Например, если вы решили использовать только селекторы классов, в разделе Сводка можно быстро обнаружить другие типы селекторов, такие как идентификатор или атрибут.

Раздел "Цвета"

В разделе Цвета в обзорном отчете CSS перечислены все цвета, используемые на веб-странице, и сгруппировано их по категориям фона, текста, заливки и границы.

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

Раздел Цвета также содержит список проблем с контрастностью цветов на странице. См . раздел Просмотр элементов с цветовой контрастностью ниже.

Раздел сведений о шрифте

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

При проектировании веб-страницы использование согласованных параметров оформления может помочь достичь более эстетически приятного результата. Раздел Сведения о шрифте может быть полезен для обнаружения использования слишком большого количества различных шрифтов или стилей шрифтов.

Каждый шрифт в разделе Сведения о шрифте содержит ссылки на элементы DOM, к которых они применяются. Чтобы отобразить элементы, к которому применяется заданный шрифт, выполните следующие действия:

  1. В обзорном отчете щелкните Сведения о шрифте на боковой панели, чтобы перейти к соответствующему разделу отчета.

  2. Найдите семейство шрифтов и интересующий вас размер, вес или высоту линий.

  3. Щелкните ссылку X вхождения рядом с ней, чтобы отобразить список элементов.

  4. Наведите указатель мыши на элементы в списке, чтобы выделить их на отрисоченной странице.

    Microsoft Edge с демонстрационной версией списка задач и средствами разработки, отображающими список элементов для заданного размера шрифта и выделенным элементом при наведении указателя мыши

  5. Щелкните элемент, чтобы автоматически открыть инструмент Элементы с выбранным элементом.

    Microsoft Edge с демонстрационными приложениями списка TODO и средствами разработки, показывающими инструмент

Неиспользуемые объявления

В разделе Неиспользуемые объявления в обзорном отчете CSS перечислены некоторые объявления CSS, которые не влияют на целевые элементы.

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

Например, объявление не будет иметь никакого top: 42px эффекта, если целевой элемент не расположен с position: absolute или position: relative , например.

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

  • topЕсли свойства , right, bottomили left используются в статически расположенных элементах.
  • width Если свойства или height используются во встроенных элементах.
  • vertical-align Если свойство используется для элементов, которые не являются встроенными или табличными ячейками.

Запросы мультимедиа

В разделе Запросы к мультимедиа в обзорном отчете CSS перечислены запросы мультимедиа CSS, найденные на веб-странице.

Запросы мультимедиа CSS можно использовать для применения определенных стилей в зависимости от типа носителя (например print , или screen) или в зависимости от размера окна просмотра. Это часто используется для того, чтобы веб-страницы реагировали на доступное пространство.

Когда база кода CSS становится сложной, отслеживать все запросы мультимедиа CSS может быть трудно. Это упрощается в разделе Запросы мультимедиа. Каждый запрос мультимедиа в разделе также содержит ссылку на CSS-файл, в котором он определен. Чтобы отобразить этот файл, выполните приведенные далее действия.

  1. В обзорном отчете щелкните Запросы мультимедиа на боковой панели, чтобы перейти к соответствующему разделу отчета.

  2. В отчете найдите интересующий вас запрос мультимедиа.

  3. Щелкните ссылку X вхождения рядом с ней, чтобы отобразить соответствующие файлы.

    Microsoft Edge с демонстрационными приложениями списка задач и средствами разработки, показывающими раздел

  4. Щелкните один из файлов, чтобы автоматически открыть средство "Источники " с открытым файлом.

    Microsoft Edge с демонстрационной версией списка TODO и средствами разработки, показывающими инструмент

Несложные селекторы

В разделе Несложные селекторы отчета об обзоре CSS перечислены несложные селекторы CSS, найденные на веб-странице.

В CSS простые селекторы — это селекторы только с одним компонентом (например, с одним id селектором или селектором типа). Эти селекторы не объединяются с другими компонентами селектора или комбинаторами. Все базовые селекторы, атрибуты, а также отдельные псевдоклассы и псевдоэлементы являются простыми селекторами.

Несложные селекторы являются более сложными и, как правило, соответствуют большему количества элементов, что может привести к длительным событиям Recalculate Styles в средствепроизводительности . Вы можете попытаться изменить эти селекторы так, чтобы они были более конкретными и соответствовали меньшему количеству элементов, что сокращает время, затратяемое браузером на вычисление стилей в следующих случаях:

  • При добавлении элементов в DOM или удалении из него.
  • При изменении атрибутов элемента, например class или id.
  • При вводе пользователем, например при перемещении мыши или изменении фокуса, что может повлиять на :hover правила.

Чтобы просмотреть список несложных селекторов, в обзорном отчете щелкните Несложные селекторы на боковой панели, чтобы прокрутить соответствующий раздел отчета:

Список несложных селекторов в средстве обзора CSS

Здесь вы можете дополнительно проанализировать влияние изменений и производительность отдельного селектора с помощью функции Статистика выбора в средстве производительности .

См. также

Просмотр элементов с проблемами цветовой контрастности

Раздел Цвета в обзорном отчете также можно использовать для поиска проблем с контрастностью цветов на веб-странице. Если текущая веб-страница содержит элементы, в которых контраст между цветом шрифта и цветом фона недостаточно, отобразится подраздел Проблемы с контрастностью .

Чтобы найти проблемы с контрастностью цветов, выполните приведенные ниже действия.

  1. Перейдите на веб-сайт демонстрации "Приют для животных ", где есть проблемы с контрастностью цветов, в Microsoft Edge. Или перейдите на собственный веб-сайт.

  2. Откройте средства разработки, нажав клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

  3. На панели инструментов main щелкните Другие инструменты и выберите в списке обзор CSS.

  4. В средстве "Обзор CSS" щелкните Элемент Обзор , а затем выберите Цвета на боковой панели обзорного отчета.

  5. Прокрутите вниз до подраздела Проблемы с контрастностью , чтобы просмотреть все проблемы.

    Microsoft Edge с демонстрационной версией приложения списка задач и средствами Разработки, показывающая список проблем с контрастностью в отчете Обзор CSS

  6. Чтобы просмотреть элементы с определенной проблемой контрастности цветов, выберите проблему, которую нужно устранить, и нажмите кнопку Текст. Перечислены соответствующие элементы.

    Microsoft Edge с демонстрационной версией приложения списка задач и средствами разработки, отображающими список элементов с проблемой цветовой контрастности

  7. Чтобы открыть соответствующий элемент в инструменте Элементы , щелкните элемент в списке.

    Microsoft Edge с демонстрационными приложениями списка TODO и Средствами Разработки, показывающими инструмент Элементы, с выбранным элементом проблемы цветовой контрастности

Чтобы устранить проблемы с контрастностью, проверка раздел Контрастность текста функций devTools для тестирования специальных возможностей.

См. также