Руководства Modern Web Guidance

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выделять в меню навигации раздел, который сейчас виден на странице

Создайте стилизованный индикатор выполнения, который сообщает о завершении задачи или процесса как в определенных, так и в неопределенных состояниях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поддержка перетаскивания плавающего элемента по странице.

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

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

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

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

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

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

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

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

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

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

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

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

Создайте модальное диалоговое окно, которое можно закрыть, нажав за его пределами.

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

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

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

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

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

Запретите прокрутку страницы, когда открыто модальное диалоговое окно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сделайте специальные элементы доступными по умолчанию, задав роли и состояние ARIA с помощью миксина ElementInternals ARIA, управляя фокусом с помощью delegatesFocus и сохраняя отношения ARIA в одном корневом элементе shadow.

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

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

Практические рекомендации по современной архитектуре HTML, семантике, нативным интерактивным API (Dialog, Popover, Details), управлению фокусом и приоритизации ресурсов. Используйте это руководство при структурировании веб-документов, реализации нативных оверлеев или оптимизации порядка загрузки ресурсов.

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

Инкапсулируйте DOM и стили компонента с помощью Shadow DOM, эффективно создавайте дерево с помощью HTML-шаблонов и проецируйте пользовательский контент с помощью слотов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбирайте элементы на основе пересечения или объединения селекторов и условных @-правил, сводя к минимуму повторения.

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

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

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

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

Вычисляйте прошедшее или оставшееся время между датами и временем, балансируйте единицы продолжительности и форматируйте человекочитаемые локализованные продолжительности с помощью Temporal.Duration и Intl.DurationFormat.

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

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

Выполняйте синтаксический анализ, сортируйте и измеряйте интервалы между временными метками ISO 8601 в субмиллисекундах или наносекундах без конфликтов усечения даты с помощью Temporal.Instant.

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

Компиляция C/C++ в WebAssembly с помощью Emscripten

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

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

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

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

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

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

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

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

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

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

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

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

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

Как определить скрипты, которые больше всего влияют на длительные кадры анимации

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

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

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

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

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

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

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

Декларативно обновляйте страницу с помощью контента, который передается позже в тот же HTML-документ или через императивные API JavaScript.

Практические рекомендации по оптимизации современных веб-приложений. Используйте это руководство при проверке эффективности, оптимизации показателей загрузки, устранении медленных взаимодействий и оптимизации Core Web Vitals (LCP, INP, CLS).

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

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

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

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

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

Используйте контент, созданный с помощью CSS (::before/::after), так, чтобы он оставался доступным, включая альтернативный текст для декоративного контента.

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

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

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

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

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

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

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

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

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

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

Чтобы предотвратить XSS-атаки на основе DOM, определите правила Trusted Types для очистки ненадежного HTML-кода, используйте эти правила при записи в приемники DOM, такие как innerHTML, и обеспечьте соблюдение правил Trusted Types с помощью Content Security Policy.

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

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

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

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

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

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

Рекомендации по безопасности для веб-разработчиков (XSS, CSP, файлы cookie, изоляция от междоменных источников). Используйте этот навык, чтобы направлять процесс аудита, тестирования и безопасного развертывания политик безопасности.

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

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

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

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

Обобщайте текстовый контент с помощью Summarizer API на устройстве.

Переводите текст на разные языки с помощью Translator API на устройстве.

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

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

Это руководство поможет вам реализовать WebMCP (Web Model Context Protocol) в браузерных приложениях, предоставляя ИИ-агентам доступ к клиентским функциям в виде инструментов через декларативные или императивные API.