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

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

Рэйчел Эндрю

Стабильные версии браузера

В июле 2024 года Firefox 128 , Safari 17.6 и Chrome 127 стали стабильными. В этом посте рассматриваются новые функции, добавленные в веб-платформу.

Синтаксис относительного цвета CSS

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

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

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

  • 119
  • 119
  • 128
  • 16,4

Еще много примеров вы можете найти в статье блога «Синтаксис относительного цвета CSS» . Относительный синтаксис цветов — одно из основных направлений Interop 2024, поэтому это обновление помогает улучшить оценку стабильной версии Firefox.

Альтернативный текст для свойства content

Firefox 128 поддерживает альтернативный текст для свойства content CSS, если оно включает изображение. Альтернативный текст отображается в дереве доступности. Это означает, что альтернативный текст теперь поддерживается всеми браузерами для content .

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

  • 77
  • 79
  • 128
  • 17,4

Обновление Chrome 127 гарантирует, что Chrome принимает произвольное количество элементов, а не одну строку, что позволяет, например, использовать функцию attr() .

Свойство font-size-adjust

Chrome 127 включает в себя font-size-adjust , который также находится в фокусе внимания Interop 2024. Это свойство полезно в ситуациях, когда может произойти откат шрифта, поскольку оно помогает сопоставить размер резервного шрифта со шрифтом первого выбора.

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

  • 127
  • 127
  • 3
  • 16,4

Источник

В этом выпуске Chrome свойство font-size-adjust становится частью Baseline Newly Available .

Поддержка API перехода просмотра в iframe.

В Chrome 127 будут доступны одновременные переходы между представлениями одного и того же документа в основном фрейме и iframe того же происхождения.

Ранее запуск перехода представления с использованием document.startViewTransition в iframe того же происхождения не работал, если основной фрейм одновременно выполнял переход. Переход iframe будет автоматически пропущен. Теперь оба перехода будут выполнены.

Контейнеры прокрутки с возможностью фокусировки на клавиатуре

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

Узнайте больше об этом изменении в публикации «Скроллеры с фокусом на клавиатуре» .

Правило @property

Firefox 128 включает поддержку правила @property и связанных с ним API-интерфейсов JavaScript. Это означает, что вы можете создавать пользовательские свойства CSS, которые определяют синтаксис, наследование и начальное значение.

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

  • 85
  • 85
  • 128
  • 16,4

Источник

В следующем примере пользовательское свойство определено так, чтобы принимать только значение <color> , не наследовать и иметь начальное значение hotpink .

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

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

Изменяемый размер ArrayBuffer и расширяемый SharedArrayBuffer

Изменяемый размер ArrayBuffer и расширяемый SharedArrayBuffer теперь поддерживаются в Firefox 128, что позволяет изменять размер буферов без необходимости выделять новый буфер и копировать в него данные. Эти объекты также присоединяются к новым доступным базовым показателям.

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

  • 111
  • 111
  • 128
  • 16,4

Источник

safe ключевое слово в свойствах flexbox

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

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

  • 115
  • 115
  • 63
  • 18

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

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

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

Chrome 128 включает свойство CSS ruby-align , а также изменения, позволяющие делать разрывы строк внутри элементов, имеющих display: ruby , свойство zoom также было обновлено в соответствии со спецификацией. В API AudioContext имеется обновление, добавляющее обратный вызов, назначенный AudiContext.onerror , который сообщает об ошибках создания и рендеринга AudioContext.

Firefox 129 включает правило @starting-style и свойство transition-behavior . Эти свойства станут частью Baseline Newly Available после выхода Firefox 129 в стабильную версию.