Что нового в Chrome 154: адаптивные iframe, новые возможности CSS и изменения в Web API

Google выпустила стабильную версию Chrome 154. В обновлении появились новые возможности CSS, улучшения работы с iframe, изменения в API для JavaScript и сетевых соединений. Разработчики также получили несколько обновлений, связанных с доступностью и поведением веб-интерфейсов.

Адаптивный размер для

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

Теперь iframe может получать размеры непосредственно из разметки вложенного документа.

Для включения такого поведения используется CSS-свойство frame-sizing:

.embed { width: 100%; frame-sizing: content-height;}

Встроенный документ также должен явно разрешить изменение размеров через метатег:

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

Новые режимы для scroll-marker-group

Chrome 154 расширяет возможности CSS-свойства scroll-marker-group, которое используется для создания маркеров навигации внутри прокручиваемых областей.

Теперь доступны два режима:

/* режим ссылок */scroll-marker-group: after links;/* режим вкладок */scroll-marker-group: before tabs;

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

Режим tabs меняет семантику на поведение вкладок: активный элемент становится точкой фокуса, а переключение между маркерами выполняется стрелками. Это позволяет лучше соответствовать требованиям доступности WAI-ARIA при создании интерфейсов с вкладками и каруселями.

Точная настройка подчёркиваний через text-decoration-inset

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

Свойство text-decoration-inset принимает значения в пикселях и процентах:

.title { text-decoration-inset: 10px;}

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

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

Улучшения WebSocket API

Конструктор WebSocket теперь поддерживает объект параметров вместо передачи только строки с протоколом.

Раньше использовалась такая запись:

new WebSocket("wss://example.com:8080", "soap");

Теперь можно передавать объект:

new WebSocket( "wss://example.com:8080", { protocols: "soap" });

Новый формат оставляет место для добавления дополнительных настроек в будущем.

Также появилась поддержка параметра targetAddressSpace, который позволяет указать, что соединение с публичным адресом фактически должно рассматриваться как локальное или loopback-соединение:

new WebSocket( "ws://local-server.example", { targetAddressSpace: "local" });

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

Изменения в Fetch API и Background Fetch

Chrome 154 обновляет работу с AbortController: причина отмены запроса теперь доступна не только через сам fetch(), но и через объект ответа (Response) и связанные потоки данных.

Также Background Fetch теперь учитывает ограничения CORS. Запросы через этот механизм должны проходить те же проверки безопасности, что и обычные вызовы fetch().

Новые возможности для изолированных веб-приложений

В ChromeOS появилась поддержка Window Shape API для изолированных веб-приложений (Isolated Web Apps).

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

Другие изменения

В Chrome 154 также обновлены:

  • поддержка Iterator.prototype.includes() в JavaScript — теперь можно проверять наличие значения в итераторах аналогично Array.prototype.includes();

  • API CSS Typed OM — некоторые интерфейсы CSSStyleValue стали доступны в Worker-контекстах;

  • загрузка шрифтов через FontFace — добавлены новые свойства для работы с шириной начертания;

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

Chrome 154 постепенно распространяется для Windows, macOS, Linux, Android и ChromeOS. Полный список изменений доступен в официальных заметках к выпуску.

Разобраться в новых инструментах и подходах разработки можно 8 октября в 20:00 на открытом уроке «Нюансы работы с ИИ для разработчика», где практикующий эксперт Александр Аникин расскажет, как выбирать ИИ-модели, ставить им задачи и интегрировать их в рабочий процесс.

Источник: habr.com

0 0 голоса
Рейтинг новости
1
0
Подписаться
Уведомить о
0 комментариев