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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

См. раздел «Просмотр CSS элемента» для получения подробной информации.

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

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

Просмотреть CSS

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

Навигация с помощью ссылок

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

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

Вот некоторые из них, которые выделены:

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

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

В разделе «Элементы > Стили» при наведении курсора на определенные элементы отображаются всплывающие подсказки с полезной информацией.

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

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

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

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

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

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

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

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

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

Отображение недействительных, переопределенных, неактивных и других CSS-стилей.

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

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

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

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

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

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

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

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

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

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

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

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

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

«Правила @» — это операторы CSS, позволяющие управлять поведением CSS-кода. В разделе «Элементы > Стили» в отдельных подразделах отображаются следующие правила @:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

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

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

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

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

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

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

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

View @scope at-rules

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

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

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

1. Внимательно изучите текст на карточке в режиме предварительного просмотра.
2. На вкладке «Стили» найдите правило @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 .

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

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

View @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 :

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

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

Просмотреть модель блока элемента

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

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

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

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

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

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

Имитация страницы сфокусированного внимания

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

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

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

Аналогичную опцию можно найти и на панели «Рендеринг» .

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

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

Для переключения псевдокласса:

1. Выберите элемент .
2. На панели «Элементы» перейдите на вкладку «Стили» .
3. Click :hov .
4. Отметьте псевдокласс, который вы хотите включить.

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

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

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Кроме того, некоторые элементы могут иметь собственные псевдоклассы. При выборе такого элемента на вкладке «Стили» отображается раздел «Принудительное применение специфичных для элемента свойств» , который можно развернуть и включить псевдоклассы, специфичные для этого элемента.

См. раздел «Добавление псевдосостояния в класс» для интерактивного руководства.

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

Псевдоэлементы позволяют стилизовать определенные части элементов. Псевдоэлементы подсветки — это части документа со статусом «выбрано», и они стилизуются как «выделено», чтобы указать пользователю на этот статус. Например, к таким псевдоэлементам относятся ::selection , ::spelling-error , ::grammar-error и ::highlight .

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

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

1. Ознакомьтесь с текстом ниже .

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

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

3. На вкладке «Стили» прокрутите вниз, чтобы найти раздел « Inherited from ::selection pseudo of... .

Просмотреть каскадные слои

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

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

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

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

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

Просмотреть страницу в режиме печати

Чтобы просмотреть страницу в режиме печати:

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

Просматривайте используемые и неиспользуемые CSS-стили на вкладке «Покрытие».

Вкладка «Покрытие» показывает, какие именно CSS-стили использует страница.

1. Чтобы открыть командное меню, нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux, ChromeOS), когда DevTools находится в фокусе.

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

   

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

   

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

   

   Зелёным цветом обозначены используемые CSS-стили. Красным — неиспользуемые CSS-стили.

5. Щёлкните по файлу CSS, чтобы увидеть построчное описание используемых в нём CSS-стилей в предварительном просмотре выше.

   

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

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

См. раздел «Принудительное переключение инструментов разработчика в режим предварительного просмотра печати» .

Скопировать CSS

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

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

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

1. Выберите элемент .
2. На вкладке «Элементы» > «Стили» щелкните правой кнопкой мыши по свойству CSS.

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 и использовать автозаполнение кода.

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

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

• Добавьте встроенное объявление . Это эквивалентно добавлению атрибута style к HTML-коду элемента.
• Добавьте объявление в правило стиля .

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

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

Добавьте встроенное объявление

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

1. Выберите элемент .
2. На вкладке «Стили» щелкните между скобками в разделе element.style . Курсор сфокусируется, позволяя вам ввести текст.
3. Введите название объекта недвижимости и нажмите Enter .

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Наведите курсор на название подразделения, и вы увидите, что оно подчеркнуто.

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

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

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

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

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

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

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

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

Имитация настроек светлой и темной тем оформления и включение автоматического темного режима.

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

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 .

На скриншоте видно, что после нажатия кнопки «Создать правило стиля» в DevTools добавляется правило стиля h1.devsite-page-title .

Выберите, в какой файл стилей добавить правило.

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

Переключить объявление

Чтобы включить или выключить отдельное объявление:

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

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

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

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

Для получения дополнительной информации см. раздел «Плавные и простые переходы с помощью API переходов между представлениями» .

Выровняйте элементы сетки и их содержимое в редакторе сетки.

См. соответствующий раздел в инструменте «Проверить CSS-сетку» .

Изменяйте цвета с помощью палитры цветов.

См. раздел «Проверка и отладка цветов HD и не-HD с помощью палитры цветов» .

Изменяйте значение угла с помощью угловых часов.

Angle Clock предоставляет графический интерфейс для изменения значений свойства CSS ` <angle> `.

Чтобы открыть часы Angle Clock :

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 ). Выберите Outset или Inset .
   • Смещение по осям X и Y. Перетащите синюю точку или укажите значения.
   • Размытие . Перетащите ползунок или укажите значение.
   • Расширение (только для box-shadow ). Перетащите ползунок или укажите значение.

5. Обратите внимание на изменения, внесенные в элемент .

Редактируйте время анимации и переходов с помощью редактора сглаживания.

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

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

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

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

Для регулировки времени одним щелчком мыши используйте предустановленные параметры в редакторе сглаживания :

1. В редакторе настроек , чтобы задать значение ключевого слова , нажмите одну из кнопок выбора:
   • линейный
   • плавный вход/выход
   • промежуточный
   • выход

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

   • Линейные предустановки: elastic , bounce или emphasized .
   • Предустановки кубической кривой Безье :

Настройте пользовательские параметры времени.

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

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

  

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

  

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

(Экспериментальная версия) Скопировать изменения CSS

При включении этого эксперимента вкладка «Стили» выделяет ваши изменения CSS зеленым цветом.

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

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

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