Справочник по функциям CSS

Кейс Баскс
Kayce Basques
X GitHub
Джеселин Йен
Софья Емельянова
Sofia Emelianova
GitHub

Откройте для себя новые рабочие процессы в этом подробном справочнике по функциям Chrome DevTools, связанным с просмотром и изменением CSS.

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

Выберите элемент

Панель «Элементы» в DevTools позволяет просматривать или изменять CSS только одного элемента за раз.

Пример выбранного элемента.

На снимке экрана элемент h1 , выделенный синим цветом в дереве DOM, является выбранным элементом. Справа на вкладке «Стили» показаны стили элемента. Слева элемент выделен в области просмотра, но только потому, что на него наведен указатель мыши в дереве DOM .

Учебное пособие см. в разделе Просмотр CSS-кода элемента .

Существует много способов выбора элемента:

  • В области просмотра щелкните правой кнопкой мыши элемент и выберите «Просмотреть» .
  • В DevTools нажмите «Выбрать элемент» . Выберите элемент или нажмите Command + Shift + C (Mac) или Control + Shift + C (Windows, Linux), а затем щелкните элемент в области просмотра.
  • В DevTools щелкните элемент в дереве DOM .
  • В DevTools выполните запрос, например document.querySelector('p') в консоли , щелкните правой кнопкой мыши результат и выберите «Показать на панели элементов» .

Посмотреть CSS

Используйте вкладки «Элементы» > «Стили» и «Вычисляемые» для просмотра правил CSS и диагностики проблем CSS .

На вкладке «Стили» отображаются ссылки в различных местах на различные другие места, включая, помимо прочего:

  • Рядом с правилами CSS, таблицами стилей и источниками CSS. Такие ссылки открывают панель Sources . Если таблица стилей минифицирована, см. раздел Сделать минифицированный файл читаемым .
  • В разделах «Наследуется от ...» — к родительским элементам.
  • В вызовах var() для пользовательских объявлений свойств .
  • В сокращенных свойствах animation — @keyframes .
  • Дополнительные ссылки можно найти в подсказках к документации.
  • И многое другое.

Вот некоторые из них:

Выделены различные ссылки.

Ссылки могут иметь разный стиль. Если вы не уверены, является ли что-то ссылкой, попробуйте щелкнуть по ней, чтобы узнать.

Просмотр подсказок с документацией CSS, спецификой и пользовательскими значениями свойств

Элементы > Стили показывают подсказки с полезной информацией при наведении курсора на определенные элементы.

Просмотреть документацию CSS

Чтобы увидеть подсказку с кратким описанием CSS, наведите курсор на имя свойства на вкладке «Стили» .

Подсказка с документацией по свойству CSS.

Нажмите «Подробнее» , чтобы перейти к справочнику MDN CSS по этому свойству.

Чтобы отключить подсказки, установите флажок Флажок. Не показывать .

Чтобы включить их снова, проверьте Настройки. Настройки > Настройки > Элементы > Флажок. Показать подсказку по документации CSS .

Посмотреть специфику селектора

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

Подсказка с весом специфичности соответствующего селектора.

Просмотр значений пользовательских свойств

Наведите указатель мыши на --custom-property чтобы увидеть его значение во всплывающей подсказке.

Значение пользовательского свойства в подсказке.

Просмотр недействительных, переопределенных, неактивных и других CSS

Вкладка «Стили» распознает множество типов проблем CSS и выделяет их различными способами.

См. раздел «Понимание CSS» на вкладке «Стили» .

Просмотр только того CSS, который фактически применен к элементу

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

  1. Выберите элемент .
  2. Перейдите на вкладку «Вычисляемые» на панели «Элементы» .

Вкладка «Вычисленные».

Установите флажок Показать все , чтобы увидеть все свойства.

См. раздел «Понимание CSS» на вкладке «Вычисляемые» .

Просмотр свойств CSS в алфавитном порядке

Используйте вкладку Computed . См. Просмотр только CSS, который фактически применен к элементу .

Просмотр унаследованных свойств CSS

Установите флажок Показать все на вкладке Вычисляемые . См. Просмотр только CSS, который фактически применен к элементу .

Либо прокрутите вкладку «Стили» и найдите разделы с именем « Inherited from <element_name> .

Просмотрите раздел «Унаследовано от...» на вкладке «Стили».

Посмотреть CSS at-правила

At-rules — это операторы CSS, которые позволяют вам управлять поведением CSS. Элементы > Стили показывают следующие at-rules в выделенных разделах:

Посмотреть @property at-rules

Правило @property CSS позволяет явно определять пользовательские свойства CSS и регистрировать их в таблице стилей без запуска JavaScript.

Наведите указатель мыши на имя такого свойства на вкладке «Стили» , чтобы увидеть подсказку со значением свойства, дескрипторами и ссылкой на его регистрацию в сворачиваемом разделе @property в нижней части вкладки «Стили» .

Чтобы изменить правило @property , дважды щелкните его имя или значение.

Посмотреть @supports at-правила

Вкладка Styles показывает @supports CSS at-rules, если они применяются к элементу. Например, проверьте следующий элемент:

Просмотреть правила @supports.

Если ваш браузер поддерживает функцию lab() , элемент будет зеленым, в противном случае — фиолетовым.

Посмотреть @scope at-rules

На вкладке «Стили» отображаются правила CSS @scope , если они применены к элементу.

Новые правила @scope at-rules являются частью спецификации каскадирования и наследования CSS уровня 6. Эти правила позволяют вам определять область действия стилей CSS, другими словами, явно применять стили к определенным элементам.

Посмотрите правило @scope в следующем предварительном просмотре:

  1. Изучите текст на карточке в предварительном просмотре.
  2. На вкладке «Стили» найдите правило @scope .

Правило @scope.

В этом примере правило @scope переопределяет глобальное объявление CSS background-color для всех элементов <p> внутри элементов с классом card .

Чтобы отредактировать правило @scope , дважды щелкните по нему.

Посмотреть @font-palette-values ​​в правилах

Правило @font-palette-values ​​CSS позволяет настраивать значения по умолчанию свойства font-palette . Элементы > Стили показывают это правило в специальном разделе.

Просмотрите раздел @font-palette-values ​​в следующем предварительном просмотре:

  1. Проверьте вторую строку текста в предварительном просмотре.
  2. В разделе «Стили» найдите раздел @font-palette-values .

Правило @font-palette-values.

В этом примере значения палитры шрифтов --New переопределяют значения по умолчанию для цветного шрифта.

Чтобы изменить пользовательские значения, дважды щелкните по ним.

Посмотреть @position-try at-rules

Правило CSS @position-try вместе со свойством position-try-options позволяет вам определять альтернативные позиции якоря для элементов. Чтобы узнать больше, см. Знакомство с API позиционирования якоря CSS .

Элементы > Стили решают и связывают следующее:

  • значения свойств position-try-options в специальный раздел @position-try --name .
  • значения свойств position-anchor и аргументы anchor() для соответствующих элементов с атрибутами popovertarget .

Проверьте значения position-try-options и разделы @position-try в следующем предварительном просмотре:

Демонстрация использования якоря с popover
  1. В предварительном просмотре откройте подменю, то есть нажмите ВАША УЧЕТНАЯ ЗАПИСЬ , а затем ВИТРИНА МАГАЗИНА .
  2. Проверьте элемент с id="submenu" в предварительном просмотре.
  3. В Styles найдите свойство position-try-options и щелкните его значение --bottom . Вкладка Styles перенаправит вас в соответствующий раздел @position-try .
  4. Щелкните ссылку position-anchor value или те же аргументы anchor() . Панель Elements выбирает элемент с соответствующим атрибутом popovertarget , а вкладка Styles показывает CSS элемента.

Свойство position-try-options, раздел @position-try и элемент с атрибутом popover target.

Чтобы изменить значения, дважды щелкните по ним.

Просмотр блочной модели элемента

Чтобы просмотреть блочную модель элемента, перейдите на вкладку «Стили» и щелкните значок Показать боковую панель. Показать кнопку боковой панели на панели действий.

Диаграмма блочной модели.

Чтобы изменить значение, дважды щелкните по нему.

Поиск и фильтрация CSS элемента

Используйте поле «Фильтр» на вкладках «Стили» и «Вычисляемые» для поиска определенных свойств или значений CSS.

Фильтрация вкладки «Стили».

Чтобы также выполнить поиск унаследованных свойств на вкладке «Вычисляемые» , установите флажок «Показать все» .

Фильтрация унаследованных свойств на вкладке «Вычисляемые».

Для навигации по вкладке «Вычисляемые» сгруппируйте отфильтрованные свойства в сворачиваемые категории, установив флажок «Группировать» .

Группировка отфильтрованных свойств.

Эмулировать сфокусированную страницу

Если вы переключаете фокус со страницы на DevTools, некоторые элементы наложения автоматически скрываются, если они активируются фокусом. Например, раскрывающиеся списки, меню или выборщики дат. Параметр Emulate a focused page позволяет вам отлаживать такой элемент, как будто он находится в фокусе.

Попробуйте эмулировать сфокусированную страницу на этой демонстрационной странице :

  1. Фокус на элементе ввода. Под ним появится другой элемент.
  2. Откройте DevTools . Теперь в фокусе окно DevTools, а не страница, поэтому элемент снова исчезнет.
  3. В Элементы > Стили нажмите :hov , установите Эмулировать сфокусированную страницу и убедитесь,