Новое на веб-платформе в мае

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

В мае 2023 года Firefox 113 , Chrome 113 , Chrome 114 и Safari 16.5 стали стабильными. Давайте посмотрим, что это значит для веб-платформы.

Веб-графический процессор

Chrome 113 включает WebGPU , преемника графических API WebGL и WebGL 2 для Интернета. Он обеспечивает современные функции, такие как вычисления на графическом процессоре, меньшие затраты на доступ к оборудованию графического процессора, возможность рендеринга на несколько холстов с одного графического устройства, а также лучшую и более предсказуемую производительность.

Поддержка браузера

  • Хром: 113.
  • Край: 113.
  • Предварительная версия технологии Firefox: поддерживается.
  • Предварительная версия технологии Safari: поддерживается.

Источник

Собственные наборы

Первичные наборы (FPS) являются частью Privacy Sandbox . Это способ для организаций объявить отношения между сайтами, чтобы браузеры могли решить, когда разрешить ограниченный доступ к сторонним файлам cookie для сайтов в наборе. FPS начал поэтапное внедрение Chrome 113.

Медиа-функции CSS и многое другое

Что касается CSS, Chrome 113 включает в себя медиа-функции overflow-inline и overflow-block .

Поддержка браузера

  • Хром: 113.
  • Край: 113.
  • Фаерфокс: 66.
  • Сафари: 17.

Источник

И функция update мультимедиа.

Поддержка браузера

  • Хром: 113.
  • Край: 113.
  • Фаерфокс: 102.
  • Сафари: 17.

Источник

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

Поддержка браузера

  • Хром: 113.
  • Край: 113.
  • Фаерфокс: 112.
  • Сафари: 17.2.

Возможности CSS Color Level 4

Firefox 113 включает функциональные обозначения color() , lab() , lch() , oklab() , oklch() и color-mix() , а также свойство принудительной настройки цвета. Это означает, что новые цветовые пространства и функции теперь поддерживаются всеми тремя основными движками. Вы можете узнать больше об этих цветовых пространствах и функциях в руководстве по цветам CSS высокой четкости .

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 113.
  • Сафари: 16.2.

Источник

Больше контроля над выбором :nth-child()

Firefox 113 также добавляет возможность передавать список селекторов в :nth-child() и nth-last-child() . Узнайте больше об этом и посмотрите примеры в статье «Больше контроля над выбором :nth-child() с помощью синтаксиса of S» .

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 113.
  • Сафари: 9.

API потоков сжатия

Теперь API Compressions Streams поддерживается во всех трех основных движках благодаря включению в Firefox 113 и позволяет сжимать и распаковывать потоки. Это означает, что приложениям JavaScript больше не требуется использовать библиотеку сжатия.

Поддержка браузера

  • Хром: 80.
  • Край: 80.
  • Фаерфокс: 113.
  • Сафари: 16.4.

Источник

CSS-вложение

Safari 16.5 в основном решил проблемы, но также добавил поддержку вложенности CSS с новым селектором вложенности > , используемым для вложения связанных правил стиля, способом, который будет знаком разработчикам, которые использовали препроцессоры:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Поддержка браузера

  • Хром: 120.
  • Край: 120.
  • Фаерфокс: 117.
  • Сафари: 17.2.

Источник

Балансировка заголовков с text-wrap: balance

В Chrome 114 вы можете использовать text-wrap: balance . Это позволяет сбалансировать заголовки, избегая проблемы наличия одного слова в последней строке, обеспечивая более приятный и читабельный результат. Вы можете узнать больше в CSS text-wrap: Balance .

Поддержка браузера

  • Хром: 114.
  • Край: 114.
  • Фаерфокс: 121.
  • Сафари: 17.4.

Источник

CHIPS: файлы cookie с независимым разделенным состоянием

В рамках работы по поэтапному отказу от сторонних файлов cookie CHIPS позволяет разрешить разделение сторонних файлов cookie по сайтам верхнего уровня с использованием нового атрибута файлов cookie Partitioned . CHIPS доступен в Chrome 114.

API-интерфейс Поповера

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

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

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

Узнайте больше в статье «Введение в API popover» .

Поддержка браузера

  • Хром: 114.
  • Край: 114.
  • Фаерфокс: 120.
  • Сафари: 17.

Источник

Бета-версии браузера

Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии — Firefox 114 , Chrome 115 и Safari 16.6 . Эти выпуски привносят в платформу множество замечательных функций. Ознакомьтесь со всеми подробностями в примечаниях к выпуску, вот лишь несколько основных моментов.

Chrome 115 включает несколько значений свойства CSS display . Это означает, что display: flex становится display: block flex и display: block становится display: block flow . Отдельные значения сохраняются как устаревшие ключевые слова, а в стабильной версии Chrome несколько значений становятся доступными для всех движков.

Также в Chrome 115 есть расширения ScrollTimeline и ViewTimeline спецификации веб-анимации. Они позволяют использовать анимацию, управляемую прокруткой, с помощью CSS и JavaScript.

Firefox 114 включает API WebTransport — современное обновление WebSockets, обеспечивающее поддержку нескольких потоков, однонаправленных потоков и доставки вне очереди.

Часть новой веб-серии.