Примеры использования современных веб-инструкций

Опубликовано: 19 мая 2026 г.

Это сгенерированный список всех вариантов использования, доступных в Modern Web Guidance.

accessibility

accessible-error-announcement

Синхронизируйте программные состояния доступности (например, aria-invalid) с визуальным состоянием :user-invalid, чтобы пользователи программ чтения с экрана получали обратную связь об ошибке только после взаимодействия, отражая визуальный интерфейс.

Используемые функции:

Посмотреть пример использования на GitHub

built-in-ai

language-detection

Используемые функции:

Посмотреть пример использования на GitHub

language-model

Запускайте обработку естественного языка непосредственно в браузере с помощью API Prompt, используя потоковый вывод, структурированные JSON-ответы и управление многоэтапными сессиями.

Используемые функции:

Посмотреть пример использования на GitHub

summarizer

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

Используемые функции:

Посмотреть пример использования на GitHub

translator

Используемые функции:

Посмотреть пример использования на GitHub

css

highlight-text-ranges

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

Используемые функции:

Посмотреть пример использования на GitHub

forms

animated-select-picker

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

Используемые функции:

Посмотреть пример использования на GitHub

autofill-address-form

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

Используемые функции:

Посмотреть пример использования на GitHub

autofill-highlight-inputs

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

Используемые функции:

Посмотреть пример использования на GitHub

autofill-payment-form

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

Используемые функции:

Посмотреть пример использования на GitHub

autofill-sign-in-form

Создайте форму входа с корректными значениями автозаполнения и поддержкой автоподполнения.

Используемые функции:

Посмотреть пример использования на GitHub

autofill-sign-up-form

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

Используемые функции:

Посмотреть пример использования на GitHub

brand-consistent-forms

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

Используемые функции:

Посмотреть пример использования на GitHub

branded-select-styling

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

Используемые функции:

Посмотреть пример использования на GitHub

custom-select-picker-layouts

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

Используемые функции:

Посмотреть пример использования на GitHub

form-fields-automatically-fit-contents

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

Используемые функции:

Посмотреть пример использования на GitHub

required-field-feedback

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

Используемые функции:

Посмотреть пример использования на GitHub

rich-media-picker

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

Используемые функции:

Посмотреть пример использования на GitHub

select-menu-interaction

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

Используемые функции:

Посмотреть пример использования на GitHub

validate-input-after-interaction

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

Используемые функции:

Посмотреть пример использования на GitHub

passkeys

passkey-authentication

Для аутентификации повторно входящего пользователя используйте пароль для основного входа в систему.

Используемые функции:

Посмотреть пример использования на GitHub

passkey-conditional-create

После успешного входа в систему с использованием пароля, система автоматически регистрирует пароль для существующего пользователя.

Используемые функции:

Посмотреть пример использования на GitHub

passkey-management

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

Используемые функции:

Посмотреть пример использования на GitHub

passkey-reauthentication

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

Используемые функции:

Посмотреть пример использования на GitHub

passkey-registration

Зарегистрируйте пароль для существующей учетной записи пользователя.

Используемые функции:

Посмотреть пример использования на GitHub

performance

batch-analytics-events

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

Используемые функции:

Посмотреть пример использования на GitHub

break-up-long-tasks

Разделите ресурсоемкую синхронную обработку (сложные вычисления и/или длинные циклы) или обновления DOM, чтобы позволить браузеру обрабатывать ввод пользователя и перерисовывать экран.

Используемые функции:

Посмотреть пример использования на GitHub

calculate-total-foreground-time

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

Используемые функции:

Посмотреть пример использования на GitHub

conditional-async-dependencies

Условная загрузка или инициализация асинхронных зависимостей (например, импорт полифилов для отсутствующих веб-функций) без необходимости сложной координации всех зависимостей скриптов страницы.

Используемые функции:

Посмотреть пример использования на GitHub

defer-rendering-heavy-content

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

Используемые функции:

Посмотреть пример использования на GitHub

defer-work-until-scroll-ends

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

Используемые функции:

Посмотреть пример использования на GitHub

deprioritize-background-fetches

Снизьте приоритет фоновых запросов данных, выполняемых с помощью Fetch API, чтобы предотвратить конфликты в сети, связанные с запросами, инициированными пользователями.

Используемые функции:

Посмотреть пример использования на GitHub

detect-initial-visibility-state

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

Используемые функции:

Посмотреть пример использования на GitHub

efficient-background-processing

Экономьте системные ресурсы и заряд батареи, приостанавливая фоновое выполнение JavaScript (например, анимацию <canvas> , рендеринг WebGL или высокочастотный опрос данных WebSocket), когда компонент находится за пределами экрана, и возобновляя его выполнение непосредственно при прокрутке страницы обратно в поле зрения.

Используемые функции:

Посмотреть пример использования на GitHub

faster-spa-view-transitions

Обеспечьте более быстрые переходы обратно к ранее посещенным представлениям в одностраничном приложении (SPA), сохраняя их структурное состояние DOM вместо того, чтобы разрушать и перестраивать их при каждом переходе.

Используемые функции:

Посмотреть пример использования на GitHub

full-session-analytics

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

Используемые функции:

Посмотреть пример использования на GitHub

identify-heavy-scripts

Определите скрипты, наиболее ответственные за длинные кадры анимации.

Используемые функции:

Посмотреть пример использования на GitHub

identify-inp-causes

Выявите медленно работающий JavaScript, который влияет на показатель INP.

Используемые функции:

Посмотреть пример использования на GitHub

improve-next-page-load-performance

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

Используемые функции:

Посмотреть пример использования на GitHub

interactions-in-complex-layouts

Сделайте взаимодействие более быстрым и отзывчивым (снизив показатели Interaction to Next Paint (INP)), избегая перерасчетов макета в сложных структурах, таких как панели мониторинга с большим объемом данных или таблицы.

Используемые функции:

Посмотреть пример использования на GitHub

optimize-image-priority

Оптимизировать приоритет загрузки изображений-кандидатов для режима Largest Contentful Paint (LCP) и снизить приоритет некритических изображений, чтобы уменьшить задержки загрузки критически важных ресурсов.

Используемые функции:

Посмотреть пример использования на GitHub

optimize-preload-priority

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

Используемые функции:

Посмотреть пример использования на GitHub

optimize-script-priority

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

Используемые функции:

Посмотреть пример использования на GitHub

resolution-optimized-pseudo-elements

Используйте изображения с оптимизированным разрешением в псевдоэлементах CSS (таких как ::before и ::after ), чтобы уменьшить количество узлов DOM.

Используемые функции:

Посмотреть пример использования на GitHub

schedule-tasks-by-priority

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

Используемые функции:

Посмотреть пример использования на GitHub

sequence-distributed-events

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

Используемые функции:

Посмотреть пример использования на GitHub

user-experience

adapt-scrollbar-to-contrast-preferences

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

Используемые функции:

Посмотреть пример использования на GitHub

anchor-positioning-tab-underline

Плавный переход элемента между двумя целевыми позициями. Например, перемещение подчеркивания выбранной вкладки между ранее выбранной вкладкой и текущей выбранной вкладкой.

Используемые функции:

Посмотреть пример использования на GitHub

animate-element-entry-exit

Плавное скрытие/отображение элементов при их добавлении/удалении из DOM или при изменении их значений отображения.

Используемые функции:

Посмотреть пример использования на GitHub

animate-to-from-top-layer

Анимируйте такие элементы, как диалоговые окна, всплывающие подсказки и всплывающие уведомления, при их появлении/исчезновении из верхнего слоя.

Используемые функции:

Посмотреть пример использования на GitHub

animate-to-intrinsic-sizes

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

Используемые функции:

Посмотреть пример использования на GitHub

apply-webgl-shaders

Применяйте пользовательские визуальные эффекты с помощью шейдеров WebGL к HTML-контенту.

Используемые функции:

Посмотреть пример использования на GitHub

calculate-event-differentials

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

Используемые функции:

Посмотреть пример использования на GitHub

calculate-with-intrinsic-sizes

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

Используемые функции:

Посмотреть пример использования на GitHub

capture-location-agnostic-data

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

Используемые функции:

Посмотреть пример использования на GitHub

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

Используемые функции:

Посмотреть пример использования на GitHub

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

Используемые функции:

Посмотреть пример использования на GitHub

child-state-based-styling

Создайте компонент, который изменяет свой стиль в зависимости от состояния одного из своих дочерних элементов. Например, компонент, который отображается в светлом или темном режиме в зависимости от того, отмечен ли переключатель темы (или нет).

Используемые функции:

Посмотреть пример использования на GitHub

complex-shapes

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

Используемые функции:

Посмотреть пример использования на GitHub

component-specific-light-dark-theme

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

Используемые функции:

Посмотреть пример использования на GitHub

consistent-cross-document-transitions

Перед запуском перехода между представлениями документа убедитесь, что критически важное состояние страницы загружено и стабильно. Это означает, что критически важные стили CSS загружены и применены, критически важный JavaScript загружен и выполнен, а HTML-код, видимый пользователю при первом просмотре страницы, был проанализирован до начала перехода.

Используемые функции:

Посмотреть пример использования на GitHub

content-based-styling

Создайте компонент, который изменяет свою компоновку в зависимости от того, содержит ли он определенные дочерние элементы (или нет). Например, если компонент содержит изображение, используйте многоколоночную компоновку, в противном случае — одноколоночную компоновку по умолчанию.

Используемые функции:

Посмотреть пример использования на GitHub

coordinate-global-events

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

Используемые функции:

Посмотреть пример использования на GitHub

cross-document-transitions

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

Используемые функции:

Посмотреть пример использования на GitHub

customize-scrollbar-color-and-thickness

Настройте цвет или толщину полосы прокрутки.

Используемые функции:

Посмотреть пример использования на GitHub

dark-mode

Реализуйте поддержку темного режима таким образом, чтобы она учитывала предпочтения пользователя в отношении светлой/темной темы и адаптировалась к пользовательскому интерфейсу браузера (например, полосы прокрутки, элементы управления формами и т. д.).

Используемые функции:

Посмотреть пример использования на GitHub

declarative-button-actions

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

Используемые функции:

Посмотреть пример использования на GitHub

declarative-dialog-popover-control

Переключайте видимость диалогового окна или всплывающего окна с помощью кнопки без написания кода JavaScript.

Используемые функции:

Посмотреть пример использования на GitHub

deliver-optimized-decorative-images

Обеспечьте оптимизированную доставку декоративных изображений (таких как фоновые изображения, значки пользовательского интерфейса или сложные маски), одновременно предоставляя форматы изображений нового поколения (например, AVIF или WebP) с различной плотностью пикселей (например, 1x и 2x), чтобы браузер мог динамически выбирать оптимальное сочетание размера файла и визуального качества в соответствии с возможностями устройства пользователя.

Используемые функции:

Посмотреть пример использования на GitHub

design-token-reactivity

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

Используемые функции:

Посмотреть пример использования на GitHub

directional-navigation-transitions

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

Используемые функции:

Посмотреть пример использования на GitHub

dynamic-sibling-animations

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

Используемые функции:

Посмотреть пример использования на GitHub

dynamic-sibling-styling

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

Используемые функции:

Посмотреть пример использования на GitHub

export-html-media-from-canvas

Захват и экспорт динамического HTML-контента в виде изображений или видеокадров непосредственно с холста.

Используемые функции:

Посмотреть пример использования на GitHub

expose-canvas-content-to-browser-features

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

Используемые функции:

Посмотреть пример использования на GitHub

flicker-free-client-side-ab-testing

Проводите и отображайте A/B-тесты, многовариантные тесты или другие эксперименты, используя клиентский JavaScript для изменения или внедрения HTML, CSS и JavaScript без предварительного отображения исходного контента, который затем будет мерцать или мигать, показывая содержимое эксперимента.

Используемые функции:

Посмотреть пример использования на GitHub

fluid-scaling

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

Используемые функции:

Посмотреть пример использования на GitHub

format-human-readable-durations

Представляйте пользователям прошедшее время или продолжительность в удобочитаемом, локализованном формате, с возможностью отображения либо подробной разбивки по единицам измерения (например, «1 час и 30 минут»), либо общего количества единиц измерения (например, «90 минут») в зависимости от контекста.

Используемые функции:

Посмотреть пример использования на GitHub

group-element-transitions

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

Используемые функции:

Посмотреть пример использования на GitHub

improve-text-layout-and-legibility

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

Используемые функции:

Посмотреть пример использования на GitHub

individual-transform-properties

Анимируйте или переопределяйте отдельные свойства преобразования CSS (например, translate, rotate, scale) независимо от других свойств преобразования для отдельного элемента.

Используемые функции:

Посмотреть пример использования на GitHub

interactive-content-in-3d-scenes

Интегрируйте интерактивные HTML-элементы в 3D-сцену.

Используемые функции:

Посмотреть пример использования на GitHub

interactive-content-reveal

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

Используемые функции:

Посмотреть пример использования на GitHub

interest-triggered-action-previews

Отображайте предварительный просмотр эффекта кнопки в реальном времени, когда пользователь проявляет интерес (например, наводит курсор, фокусируется или удерживает кнопку), но до того, как он примет решение о нажатии.

Используемые функции:

Посмотреть пример использования на GitHub

interest-triggered-tooltips

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

Используемые функции:

Посмотреть пример использования на GitHub

light-dismiss-a-dialog

Создайте модальное диалоговое окно, которое можно закрыть с помощью легкого закрытия (т.е. щелчком или касанием за пределами диалогового окна).

Используемые функции:

Посмотреть пример использования на GitHub

manage-recurring-intervals

Рассчитывайте повторяющиеся интервалы для выставления счетов по подписке или циклов выплаты заработной платы, автоматически корректируя их с учетом таких нестандартных ситуаций, как переходы в конце месяца (например, добавление одного месяца к 31 января), чтобы обеспечить точные расчеты за период.

Используемые функции:

Посмотреть пример использования на GitHub

model-partial-time-concepts

Моделируйте понятия даты и времени, которые по своей природе не имеют стандартного компонента (например, конкретного года, дня или даты), не используя произвольные значения-заполнители, которые приводят к ошибкам вычислений.

Используемые функции:

Посмотреть пример использования на GitHub

move-dom-element-without-losing-state

Перемещайте или меняйте родительский элемент DOM, не теряя при этом важное состояние элемента, такое как состояния интерактивности (:focus/:active), состояние загрузки <iframe> , состояние анимации/перехода и т. д.

Используемые функции:

Посмотреть пример использования на GitHub

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

Используемые функции:

Посмотреть пример использования на GitHub

overflow-clipping-control

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

Используемые функции:

Посмотреть пример использования на GitHub

parallax-scroll-effects

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

Используемые функции:

Посмотреть пример использования на GitHub

persistent-app-tours

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

Используемые функции:

Посмотреть пример использования на GitHub

persistent-toast-notifications

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

Используемые функции:

Посмотреть пример использования на GitHub

persistent-top-layer-ui

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

Используемые функции:

Посмотреть пример использования на GitHub

physics-based-easing

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

Используемые функции:

Посмотреть пример использования на GitHub

platform-controls-dismiss-dialog

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

Используемые функции:

Посмотреть пример использования на GitHub

position-aware-tooltips

Создавайте всплывающие подсказки и всплывающие окна с направляющими стрелками (или другими визуальными элементами оформления), которые автоматически указывают в нужном направлении, когда элемент возвращается в резервное положение.

Используемые функции:

Посмотреть пример использования на GitHub

precise-text-alignment

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

Используемые функции:

Посмотреть пример использования на GitHub

prevent-text-wrapping

Убедитесь, что браузер не вставляет переносы строк в текст и позволяет тексту выходить за пределы своего контейнера.

Используемые функции:

Посмотреть пример использования на GitHub

pull-to-reveal

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

Используемые функции:

Посмотреть пример использования на GitHub

reduce-style-repetition

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

Используемые функции:

Посмотреть пример использования на GitHub

resilient-context-menus-and-nested-dropdowns

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

Используемые функции:

Посмотреть пример использования на GitHub

same-document-transitions

Визуально соединяйте элементы, сохраняющиеся в разных состояниях страницы или навигации в одностраничном приложении (SPA) (например, расширяйте миниатюру товара до полноэкранного изображения в верхней части страницы), плавно изменяя их размер, положение или другие свойства стиля.

Используемые функции:

Посмотреть пример использования на GitHub

scroll-entry-exit-effects

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

Используемые функции:

Посмотреть пример использования на GitHub

scroll-position-aware-elements

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

Используемые функции:

Посмотреть пример использования на GitHub

scroll-progress-indicator

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

Используемые функции:

Посмотреть пример использования на GitHub

scroll-snap-realtime-feedback

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

Используемые функции:

Посмотреть пример использования на GitHub

scroll-snap-state-sync

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

Используемые функции:

Посмотреть пример использования на GitHub

scroll-target-on-load

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

Используемые функции:

Посмотреть пример использования на GitHub

scrollability-affordance-hints

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

Используемые функции:

Посмотреть пример использования на GitHub

scrollytelling

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

Используемые функции:

Посмотреть пример использования на GitHub

search-hidden-content

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

Используемые функции:

Посмотреть пример использования на GitHub

shaped-cutouts

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

Используемые функции:

Посмотреть пример использования на GitHub

shrinking-header-on-scroll

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

Используемые функции:

Посмотреть пример использования на GitHub

size-aware-styling

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

Используемые функции:

Посмотреть пример использования на GitHub

soft-edge-content-fade

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

Используемые функции:

Посмотреть пример использования на GitHub

stabilize-reactive-state

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

Используемые функции:

Посмотреть пример использования на GitHub

stack-drill-down

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

Используемые функции:

Посмотреть пример использования на GitHub

style-parent-with-has

Стилизуйте родительские элементы поля формы (например, метки или наборы полей), если поле недействительно.

Используемые функции:

Посмотреть пример использования на GitHub

support-global-calendar-systems

Точное отображение и расчет дат в негригорианских календарных системах (например, исламских, ивритских или китайских) для пользователей из разных стран.

Используемые функции:

Посмотреть пример использования на GitHub

swipe-to-remove

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

Используемые функции:

Посмотреть пример использования на GitHub

visually-stable-font-fallbacks

Задайте стили шрифтов таким образом, чтобы текст оставался читаемым и визуально согласованным в случае замены предпочтительного шрифта на один из резервных (или наоборот).

Используемые функции:

Посмотреть пример использования на GitHub

visually-stable-mixed-fonts

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

Используемые функции:

Посмотреть пример использования на GitHub

visually-texture-content

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

Используемые функции:

Посмотреть пример использования на GitHub

webmcp

agentic-forms

Предоставьте агентам ИИ доступ к функциональности клиентской части в качестве инструментов, аннотируя стандартные HTML-формы атрибутами WebMCP.

Используемые функции:

Посмотреть пример использования на GitHub

agentic-javascript-tools

Программная регистрация клиентских JavaScript-функций в качестве инструментов для агентов ИИ с использованием API WebMCP Imperative.

Используемые функции:

Посмотреть пример использования на GitHub