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

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

Подробнее о том, как просматривать и изменять CSS…

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

На панели Элементы в Инструментах разработчика можно просматривать и изменять CSS-код отдельных элементов.

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

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

Подробнее о том, как посмотреть CSS элемента…

Выбирать элементы можно разными способами:

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

Посмотреть CSS

Чтобы посмотреть правила CSS и диагностировать проблемы с CSS, откройте вкладку Элементы и выберите Стили или Вычислено.

На вкладке Стили есть ссылки на разные разделы, в том числе:

  • Рядом с правилами CSS – на таблицы стилей и источники CSS. При нажатии на такие ссылки открывается панель Источники. Если таблица стилей минифицирована, прочитайте статью Как сделать минифицированный файл читаемым.
  • В разделах Унаследовано от… – к родительским элементам.
  • в вызовах var() – к объявлениям специальных свойств.
  • В сокращенных свойствах animation – @keyframes.
  • Ссылки Подробнее в подсказках к документации.
  • И многое другое.

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

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

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

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

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

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

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

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

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

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

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

Как посмотреть специфичность селектора

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

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

Как посмотреть значения дополнительных параметров

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

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

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

На вкладке Стили распознаются многие типы проблем с CSS и выделяются разными способами.

Подробнее о том, как работать с CSS на вкладке "Стили"…

Как посмотреть только те правила CSS, которые применяются к элементу

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

  1. Выберите элемент.
  2. Перейдите на вкладку Computed (Вычислено) на панели Elements (Элементы).

Вкладка Computed (Вычисленные).

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

Подробнее о вкладке "Вычислено"…

Как посмотреть свойства ССЦ в алфавитном порядке

Используйте вкладку Вычислено. Подробнее о том, как посмотреть только те правила CSS, которые применяются к элементу…

Как посмотреть унаследованные свойства CSS

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

Также можно прокрутить вкладку Стили и найти разделы с названием Inherited from <element_name>.

Посмотрите раздел Inherited from... (Унаследовано от...) на вкладке Styles (Стили).

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

Правила @ – это операторы CSS, которые позволяют управлять поведением CSS. На вкладке Elements (Элементы) > Styles (Стили) в отдельных разделах показаны следующие at-правила:

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

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

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

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

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

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

Просмотр @supports at-rules.

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

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

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

Новые правила @scope являются частью спецификации CSS Cascading and Inheritance Level 6. Эти правила позволяют задавать область действия стилей CSS, то есть явно применять стили к определенным элементам.

Посмотрите, как будет выглядеть правило @scope:

.
  1. Проверьте текст на карточке в окне предварительного просмотра.
  2. На вкладке Стили найдите правило @scope.

Правило @scope.

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

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

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

At-правило @font-palette-values позволяет настраивать значения по умолчанию для свойства font-palette. На панели Elements (Элементы) > Styles (Стили) это правило отображается в отдельном разделе.

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

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

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

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

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

Посмотреть правила @position-try

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

На вкладке Elements (Элементы) > Styles (Стили) можно найти и открыть следующие элементы:

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

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

Демонстрация использования фиксированного объявления с popover
  1. В окне предварительного просмотра откройте подменю, то есть нажмите YOUR ACCOUNT (Ваш аккаунт), а затем STOREFRONT (Витрина).
  2. Проверьте элемент с id="submenu" в окне предварительного просмотра.
  3. В разделе Стили найдите свойство position-try-options и нажмите на его значение --bottom. На вкладке Стили можно перейти к соответствующему разделу @position-try.
  4. Нажмите на ссылку на значение position-anchor или на те же аргументы anchor(). На панели Элементы будет выбран элемент с соответствующим атрибутом popovertarget, а на вкладке Стили будет показан CSS элемента.

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

Чтобы изменить значения, дважды нажмите на них.

Как посмотреть блочную модель элемента

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

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

Чтобы изменить значение, дважды нажмите на него.

Как искать и фильтровать CSS элемента

Используйте поле Фильтр на вкладках Стили и Вычисленные, чтобы найти определенные селекторы CSS (включая родительские селекторы во вложенных правилах), свойства или значения.

фильтрацию на вкладке &quot;Стили&quot;;

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

Фильтрация унаследованных свойств на вкладке &quot;Вычисленные&quot;.

Чтобы упростить навигацию по вкладке Вычисленные, сгруппируйте отфильтрованные свойства в сворачиваемые категории, установив флажок Группировать.

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

Как эмулировать страницу в фокусе

Если вы переключите фокус со страницы на инструменты разработчика, некоторые элементы оверлея, которые активируются фокусом, автоматически скроются. например раскрывающиеся списки, меню или окна выбора даты. Чтобы отладить такой элемент, установите флажок Эмулировать страницу в фокусе.

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

  1. Установите фокус на элементе ввода. Под ним появится ещё один элемент.
  2. Откройте инструменты разработчика. Окно инструментов разработчика теперь в фокусе, а не страница, поэтому элемент снова исчезает.
  3. В разделе Elements (Элементы) > Styles (Стили) нажмите :hov, установите флажок Emulate a focused page (Эмулировать страницу в фокусе) и убедитесь, что выбран элемент ввода. Теперь вы можете проверить элемент под ним.

До и после включения параметра &quot;Эмулировать страницу в фокусе&quot;.

Этот параметр также можно найти на панели Визуализация.

Чтобы узнать, как ещё можно зафиксировать элемент, прочитайте статью Как зафиксировать экран и проверить исчезающие элементы.

Как включить или отключить псевдокласс

Чтобы включить или отключить псевдокласс:

  1. Выберите элемент.
  2. На панели Элементы перейдите на вкладку Стили.
  3. Нажмите :hov.
  4. Установите флажок рядом с нужным псевдоклассом.

Переключение псевдосостояния наведения указателя на элемент.

В этом примере видно, что Инструменты разработчика применяют к элементу декларацию background-color, даже если на элемент не наведен указатель.

На вкладке Стили для всех элементов показываются следующие псевдоклассы:

Кроме того, у некоторых элементов могут быть собственные псевдоклассы. Если вы выберете такой элемент, на вкладке Стили появится раздел Установить определенное состояние элемента, который можно развернуть и включить псевдоклассы, относящиеся к этому элементу.

Раздел &quot;Установить определенное состояние элемента&quot; для элемента textarea.

Интерактивное руководство по добавлению псевдокласса можно найти в статье Как добавить псевдокласс.

Как посмотреть унаследованные псевдоэлементы подсветки

Псевдоэлементы позволяют задавать стиль для определенных частей элементов. Псевдоэлементы выделения – это части документа со статусом "выбрано", которые оформлены как "выделенные", чтобы указать пользователю на этот статус. Примеры псевдоэлементов: ::selection, ::spelling-error, ::grammar-error и ::highlight.

Как указано в спецификации, если несколько стилей конфликтуют, каскад определяет выигрышный стиль.

Чтобы лучше понять наследование и приоритет правил, вы можете посмотреть псевдоэлементы подсветки, которые были унаследованы:

  1. Проверьте текст ниже.

    Я унаследовал стиль псевдоэлемента выделения родительского элемента. Выбери меня!

  2. Выделите фрагмент текста выше.

  3. На вкладке Стили прокрутите страницу вниз до раздела Inherited from ::selection pseudo of....

Посмотрите раздел &quot;Наследуемые&quot; на вкладке &quot;Стили&quot;.

Просмотр каскадных слоев

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

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

На вкладке Стили посмотрите на три каскадных слоя и их стили: page, component и base.

Каскадные слои.

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

Слой page имеет наивысшую специфичность, поэтому фон элемента зеленый.

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

  1. Откройте меню команд.
  2. Начните вводить Rendering и выберите Show Rendering.
  3. В раскрывающемся списке Эмулировать медиафункцию CSS выберите print.

Как посмотреть используемый и неиспользуемый код CSS на вкладке Coverage

На вкладке "Покрытие" показано, какие CSS-стили используются на странице.

  1. Нажмите Command + Shift + P (macOS) или Control + Shift + P (Windows, Linux, ChromeOS), чтобы открыть меню команд, когда фокус находится на Инструментах разработчика.

  2. Начните вводить coverage.

    Открытие вкладки &quot;Покрытие&quot; из меню команд.

  3. Выберите Показать покрытие. Откроется вкладка "Покрытие".

    Вкладка &quot;Покрытие&quot;.

  4. Нажмите на значок Начать сбор данных о покрытии и перезагрузить страницу. Обновить. Страница перезагрузится, и на вкладке Покрытие появится информация о том, какая часть кода CSS (и JavaScript) используется из каждого файла, загружаемого браузером.

    Обзор того, сколько CSS (и JavaScript) используется и не используется.

    Зеленым цветом выделен используемый код CSS. Красным цветом выделен неиспользуемый код CSS.

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

    Разбивка по строкам с указанием, какие фрагменты кода CSS используются, а какие нет.

    На скриншоте видно, что строки 55–57 и 65–67 файла devsite-google-blue.css не используются, а строки 59–63 используются.

Принудительно включить режим предварительного просмотра печати

Подробнее о том, как принудительно включить режим предварительного просмотра в инструментах разработчика…

Копировать CSS

В раскрывающемся меню на вкладке Стили можно копировать отдельные правила, объявления, свойства и значения CSS.

Кроме того, вы можете копировать свойства CSS в синтаксисе JavaScript. Этот вариант удобен, если вы используете библиотеки CSS-in-JS.

Чтобы скопировать CSS:

  1. Выбрать элемент
  2. На вкладке Elements (Элементы) > Styles (Стили) нажмите правой кнопкой мыши на свойство CSS. Раскрывающееся меню &quot;Копировать код CSS&quot;.

  3. В раскрывающемся меню выберите один из следующих вариантов:

    • Скопировать декларацию. Копирует свойство и его значение в синтаксисе CSS: css property: value;
    • Копировать ресурс. Копирует только название property.
    • Скопировать значение. Копирует только value.
    • Копировать правило. Копирует все правило CSS: css selector[, selector] { property: value; property: value; ... }
    • Копировать объявление как JS. Копирует свойство и его значение в синтаксисе JavaScript: js propertyInCamelCase: 'value'
    • Скопировать все объявления. Копирует все свойства и их значения в правиле CSS: css property: value; property: value; ...

    • Скопировать все объявления как JS. Копирует все свойства и их значения в синтаксисе JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • Копировать все изменения кода CSS. Копирует изменения, внесенные на вкладке Стили, во все декларации.

    • Просмотр вычисленного значения. Переход на вкладку Рассчитанные.

Изменить CSS

В этом разделе перечислены все способы изменения CSS на вкладке Элементы > Стили.

Кроме того, вы можете:

Как изменить CSS с помощью дополнения кода

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

Добавление свойства CSS с помощью автозаполнения кода.

Как добавить объявление CSS к элементу

Поскольку порядок объявлений влияет на то, как оформляется элемент, вы можете добавлять объявления разными способами:

Какой рабочий процесс следует использовать? В большинстве случаев рекомендуется использовать встроенное объявление. Встроенные объявления имеют более высокий приоритет, чем внешние, поэтому встроенный рабочий процесс гарантирует, что изменения будут применены к элементу так, как вы ожидаете. Подробнее о типах селекторов…

Если вы отлаживаете стили элемента и вам нужно проверить, что происходит, когда объявление определено в разных местах, используйте другой рабочий процесс.

Как добавить встроенную декларацию

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

  1. Выбрать элемент
  2. На вкладке Стили нажмите между скобками в разделе element.style. Курсор будет выделен, и вы сможете ввести текст.
  3. Введите название ресурса и нажмите Ввод.

  4. Введите действительное значение и нажмите Ввод. В дереве DOM вы увидите, что к элементу добавлен атрибут style.

    Добавление встроенных объявлений.

    На скриншоте к выбранному элементу применены свойства margin-top и background-color. В дереве DOM вы увидите объявления, отраженные в атрибуте style элемента.

Как добавить объявление в правило стиля

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

  1. Выберите элемент.
  2. На вкладке Стили нажмите между скобками правила стиля, в которое нужно добавить объявление. Курсор переместится в поле, и вы сможете ввести текст.
  3. Введите название ресурса и нажмите клавишу Ввод.
  4. Введите допустимое значение для этого свойства и нажмите Ввод.

Изменение значения объявления.

На скриншоте показано, что правило стиля получает новое объявление border-bottom-style:groove.

Как изменить название или значение декларации

Чтобы изменить название или значение объявления, дважды нажмите на него. В разделе Изменение перечисляемых значений с помощью быстрых клавиш вы найдете сочетания клавиш, позволяющие быстро увеличивать или уменьшать значение на 0,1, 1, 10 или 100 единиц.

Как изменять перечисляемые значения с помощью сочетаний клавиш

При редактировании перечисляемого значения объявления, например font-size, вы можете использовать следующие сочетания клавиш, чтобы увеличить значение на фиксированную величину:

  • Option + Вверх (macOS) или Alt + Вверх (Windows, Linux) – увеличить на 0,1.
  • Вверх, чтобы изменить значение на 1 или на 0,1, если текущее значение находится в диапазоне от -1 до 1.
  • Shift + Вверх, чтобы увеличить на 10.
  • Shift + Command + Стрелка вверх (macOS) или Control + Shift + Page Up (Windows, Linux), чтобы увеличить значение на 100.

Уменьшение также работает. Просто замените все экземпляры Up, упомянутые ранее, на Down.

Изменить значения длины

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

Чтобы изменить единицу измерения длины:

  1. Наведите указатель на название рекламного блока. Оно будет подчеркнуто.

  2. Нажмите на название подразделения, чтобы выбрать его в раскрывающемся списке.

Чтобы изменить длину:

  1. Наведите указатель на значение единицы. Он примет вид горизонтальной двунаправленной стрелки.

  2. Перетащите ползунок по горизонтали, чтобы увеличить или уменьшить значение.

Чтобы изменить значение на 10, удерживайте клавишу Shift при перетаскивании.

Как добавить класс к элементу

Чтобы добавить класс к элементу:

  1. Выберите элемент в дереве DOM.
  2. Нажмите .cls.
  3. Введите название класса в поле Добавить новый класс.
  4. Нажмите Ввод.

Раздел &quot;Классы элемента&quot;.

Как эмулировать настройки светлой и тёмной тем и включить автоматическую тёмную тему

Чтобы включить автоматическую тёмную тему или эмулировать предпочтения пользователя в отношении светлой или тёмной темы:

  1. На вкладке Элементы > Стили нажмите Включить или отключить распространенные эмуляции отрисовки.Включить или отключить распространенные эмуляции отрисовки. Включить или отключить распространенные эмуляции отрисовки.

  2. В раскрывающемся списке выберите один из следующих вариантов:

    • prefers-color-scheme: light. Указывает, что пользователь предпочитает светлую тему.
    • prefers-color-scheme: dark. Указывает, что пользователь предпочитает тёмную тему.
    • Автоматическая тёмная тема. Показывает страницу в тёмном режиме, даже если вы его не реализовали. Кроме того, автоматически задает для параметра prefers-color-scheme значение dark.

Это меню – быстрый способ включить параметры Эмулировать медиафункцию CSS prefers-color-scheme и Включить автоматический тёмный режим на вкладке Отрисовка.

Переключить класс

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

  1. Выберите элемент в дереве DOM.
  2. Откройте раздел Классы элементов. Подробнее о том, как добавить класс к элементу… Под полем Добавить новый класс перечислены все классы, которые применяются к этому элементу.
  3. Установите или снимите флажок рядом с нужным классом.

Как добавить правило стиля

Чтобы добавить новое правило стиля:

  1. Выбрать элемент
  2. Нажмите Новое правило стиля. Новое правило стиля. Инструменты разработчика вставят новое правило под правилом element.style.

Добавление нового правила стиля.

На скриншоте Инструменты разработчика добавляют правило стиля h1.devsite-page-title после нажатия кнопки Новое правило стиля.

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

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

Выбор таблицы стилей.

Как включить или отключить декларацию

Чтобы включить или отключить одну декларацию:

  1. Выбрать элемент
  2. На вкладке Стили наведите указатель мыши на правило, которое определяет декларацию. Рядом с каждым заявлением появится флажок.
  3. Установите или снимите флажок рядом с декларацией. Когда вы очищаете объявление, DevTools зачеркивает его, чтобы указать, что оно больше не активно.

Переключатель декларации.

На скриншоте свойство color для выбранного элемента отключено.

Как изменить псевдоэлементы ::view-transition во время анимации

См. соответствующий раздел в статье Анимация.

Подробнее о плавных и простых переходах с помощью View Transitions API…

Выравнивание элементов сетки и их контента с помощью редактора сетки

Ознакомьтесь с соответствующим разделом в статье "Проверка сетки CSS".

Как изменить цвета с помощью палитры

Подробнее о том, как проверять и отлаживать цвета HD и других форматов с помощью палитры…

Изменение значения угла с помощью часов

Часы с углами – это графический интерфейс пользователя, позволяющий изменять значения <angle> в свойствах CSS.

Чтобы открыть Угловые часы:

  1. Выберите элемент с объявлением угла.

  2. На вкладке Стили найдите объявление transform или background, которое нужно изменить. Нажмите на поле Предварительный просмотр угла рядом со значением угла.

    Предварительный просмотр угла.

    Маленькие часы слева от -5deg и 0.25turn – это предварительный просмотр угла.

  3. Нажмите на предварительный просмотр, чтобы открыть Angle Clock.

    Часы с углами.

  4. Чтобы изменить значение угла, нажмите на круг Часы угла или прокрутите колесико мыши, чтобы увеличить или уменьшить значение угла на 1.

  5. Для изменения угла можно использовать больше сочетаний клавиш. Подробнее о сочетаниях клавиш для панели "Стили"…

Как изменить тени блоков и текста с помощью редактора теней

Редактор теней – это графический интерфейс пользователя, позволяющий изменять объявления CSS text-shadow и box-shadow.

Чтобы изменить тени с помощью редактора теней:

  1. Выберите элемент с объявлением тени. Например, выберите следующий элемент.

  2. На вкладке Стили найдите значок тени Тень. рядом с объявлением text-shadow или box-shadow.

    Значки с тенью.

  3. Нажмите на значок тени, чтобы открыть редактор теней.

    Редактор теней.

  4. Измените свойства тени:

    • Тип (только для box-shadow). Выберите Внешняя или Внутренняя.
    • Смещение по осям X и Y. Перетащите синюю точку или укажите значения.
    • Размытие. Перетащите ползунок или укажите значение.
    • Размытие (только для box-shadow). Переместите ползунок или укажите значение.

  5. Посмотрите, какие изменения были применены к элементу.

Как изменить время анимации и переходов с помощью редактора динамики

Редактор динамики предоставляет графический интерфейс пользователя для изменения значений transition-timing-function и animation-timing-function.

Чтобы открыть редактор плавности:

  1. Выберите элемент с объявлением временной функции, например элемент <body> на этой странице.
  2. На вкладке Стили найдите фиолетовый значок Стандартная. рядом с декларациями transition-timing-function, animation-timing-function или сокращенным свойством transition. Значок редактора динамики.
  3. Нажмите на значок, чтобы открыть редактор плавности: Редактор динамики.

Как использовать готовые настройки для изменения времени

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

  1. В редакторе смягчения, чтобы задать значение ключевого слова, нажмите одну из кнопок выбора:
    • linear Кнопка линейного режима.
    • ease-in-out Кнопка &quot;Медленное начало и завершение&quot;.
    • ease-in Кнопка плавного начала.
    • ease-out Кнопка замедления.

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

Ключевое слово для времени Набор настроек Кубическая кривая Безье
ease-in-out Вход, выход, синус cubic-bezier(0.45, 0.05, 0.55, 0.95)
Вход и выход, квадратичная cubic-bezier(0.46, 0.03, 0.52, 0.96)
Кубическая (вход и выход) cubic-bezier(0.65, 0.05, 0.36, 1)
Быстрое начало, медленное завершение cubic-bezier(0.4, 0, 0.2, 1)
Вход, выход, назад cubic-bezier(0.68, -0.55, 0.27, 1.55)
ease-in Вход, синус cubic-bezier(0.47, 0, 0.75, 0.72)
Вход, квадратичная cubic-bezier(0.55, 0.09, 0.68, 0.53)
Кубический дюйм cubic-bezier(0.55, 0.06, 0.68, 0.19)
Внутрь, назад cubic-bezier(0.6, -0.28, 0.74, 0.05)
Быстрое исчезновение, линейное появление cubic-bezier(0.4, 0, 1, 1)
ease-out Выход, синус cubic-bezier(0.39, 0.58, 0.57, 1)
Квадратичная (выход) cubic-bezier(0.25, 0.46, 0.45, 0.94)
Кубическая (выход) cubic-bezier(0.22, 0.61, 0.36, 1)
Линейное нарастание, медленное затухание cubic-bezier(0, 0, 0.2, 1)
Туда, обратно cubic-bezier(0.18, 0.89, 0.32, 1.28)

Настройте время показа

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

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

    Перетаскивание контрольной точки линейной функции.

  • Для кубических функций Безье перетащите одну из контрольных точек.

    Перетаскивание контрольных точек функции кубической кривой Безье.

Любое изменение запускает анимацию мяча в окне Предварительный просмотр в верхней части редактора.

Копировать изменения кода CSS (экспериментальная функция)

Если этот эксперимент включен, на вкладке Стили изменения CSS выделяются зеленым цветом.

Чтобы скопировать одно изменение объявления CSS, наведите указатель на выделенное объявление и нажмите кнопку Копировать. Копировать.

Скопируйте изменение объявления CSS.

Чтобы скопировать все изменения кода CSS в объявлениях, нажмите правой кнопкой мыши на любое объявление и выберите Копировать все изменения кода CSS.

Копировать все изменения кода CSS.

Кроме того, вы можете отслеживать изменения на вкладке Изменения.