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

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

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

В декабре 2023 года Firefox 121 , Chrome 120 и Safari 17.2 стали стабильными. В этом посте рассматривается, что это значит для веб-платформы.

Удобный анализ вложенности CSS

Chrome 120 и Safari 17.2 включают упрощенный анализ вложенности CSS . Поскольку это поддерживается в Firefox начиная с версии 117, это означает, что все основные движки поддерживают это изменение синтаксиса.

Эксклюзивные аккордеоны с элементом <details>

Chrome 120 и Safari 17.2 включают поддержку атрибута name для элемента <details> . Это означает, что вы можете создавать эксклюзивные компоненты-аккордеоны, группируя несколько элементов <details> .

Узнайте больше в эксклюзивном аккордеоне .

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

  • 120
  • 120
  • Икс
  • 17.2

Селектор :has()

Firefox 121 включает селектор CSS :has() . Этот выпуск делает :has() совместимым со всеми основными движками.

Узнайте больше в :has() : селекторе семейства .

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

  • 105
  • 105
  • 121
  • 15,4

Источник

API пользовательского выделения CSS

Safari 17.2 включает API Custom Highlight API , который позволяет создавать и стилизовать текстовые диапазоны, расширяя стандартные псевдоклассы выделения, такие как ::selection .

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

  • 105
  • 105
  • 17.2

Источник

API CloseWatcher

Chrome 120 включает API CloseWatcher, новый API для прослушивания запросов на закрытие и ответа на них. Эти запросы запускаются клавишей ESC на рабочем столе и жестом или кнопкой «Назад» на Android, и их может быть сложно реализовать.

Помимо API, Chrome 120 обновляет <dialog> и атрибут popover , чтобы они реагировали на кнопку возврата Android.

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

  • 126
  • 126
  • Икс
  • Икс

text-wrap: balance и stable

Firefox 121 включает balance и stable значения для text-wrap . Значение balance полезно для коротких блоков контента, таких как заголовки, что делает текст более приятным и легко читаемым. stable значение предотвращает повторное замедление редактируемого содержимого во время редактирования.

Узнайте больше о text-wrap: balance .

text-wrap: balance

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

  • 114
  • 114
  • 121
  • 17,5

Источник

text-wrap: stable

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

  • Икс
  • Икс
  • 121
  • 17,5

Источник

Ленивая загрузка элементов <iframe>

Firefox 121 поддерживает атрибут loading в элементах <iframe> . Это означает, что отложенная загрузка iframe теперь поддерживается во всех основных движках.

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

  • 77
  • 79
  • 121
  • 16,4

Поддержка функции плавности linear()

Safari 17.2 также включает поддержку функции плавности linear() , которую можно использовать для создания эффектов подпрыгивания и пружинения .

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

  • 113
  • 113
  • 112
  • 17.2

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

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

Firefox 122 и Chrome 121 включают метод showPicker() для HTMLSelectElement . Здесь отображается тот же инструмент выбора, который будет отображаться при выборе элемента, но его можно активировать нажатием кнопки или другим взаимодействием с пользователем.

Chrome 121 включает в себя свойства стиля полосы прокрутки scrollbar-color и scrollbar-width , а также улучшенную маскировку CSS для SVG и выделение псевдоэлементов для текста, который был написан с ошибкой или грамматически неверен.