Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в июле 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);
}
Поддержка браузера
Еще много примеров вы можете найти в статье блога «Синтаксис относительного цвета CSS» . Относительный синтаксис цветов — одно из основных направлений Interop 2024, поэтому это обновление помогает улучшить оценку стабильной версии Firefox.
Альтернативный текст для свойства content
Firefox 128 поддерживает альтернативный текст для свойства content
CSS, если оно включает изображение. Альтернативный текст отображается в дереве доступности. Это означает, что альтернативный текст теперь поддерживается всеми браузерами для content
.
Поддержка браузера
Обновление Chrome 127 гарантирует, что Chrome принимает произвольное количество элементов, а не одну строку, что позволяет, например, использовать функцию attr()
.
Свойство font-size-adjust
Chrome 127 включает в себя font-size-adjust
, который также является областью внимания для Interop 2024. Это свойство полезно в ситуациях, когда может возникнуть резервный шрифт, поскольку оно помогает сопоставить размер резервного шрифта со шрифтом первого выбора.
В этом выпуске 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, которые определяют синтаксис, наследование и начальное значение.
В следующем примере пользовательское свойство определено так, чтобы принимать только значение <color>
, не наследовать и иметь начальное значение hotpink
.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Правило @property
теперь является частью новой версии Baseline, подробнее читайте в @property: переменные CSS следующего поколения теперь с универсальной поддержкой браузеров .
Изменяемый размер ArrayBuffer
и расширяемый SharedArrayBuffer
Изменяемый размер ArrayBuffer и расширяемый SharedArrayBuffer теперь поддерживаются в Firefox 128, что позволяет изменять размер буферов без необходимости выделять новый буфер и копировать в него данные. Эти объекты также присоединяются к новым доступным базовым вариантам.
safe
ключевое слово в свойствах flexbox
Safari 17.6 — это по большей части исправления существующих функций, однако он также включает ключевое слово safe
для свойств выравнивания flexbox. Это делает safe
ключевое слово совместимым между браузерами.
Поддержка браузера
Ключевое слово 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 в стабильную версию.