Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в декабре 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() : селекторе семейства .
API пользовательского выделения CSS
Safari 17.2 включает API Custom Highlight API , который позволяет создавать и стилизовать текстовые диапазоны, расширяя стандартные псевдоклассы выделения, такие как ::selection .
API CloseWatcher
Chrome 120 включает API CloseWatcher, новый API для прослушивания запросов на закрытие и ответа на них. Эти запросы запускаются клавишей ESC на рабочем столе и жестом или кнопкой «Назад» на Android, и их может быть сложно реализовать.
Помимо API, Chrome 120 обновляет <dialog> и атрибут popover , чтобы они реагировали на кнопку возврата Android.
Поддержка браузера
- Икс
- Икс
- Икс
- Икс
text-wrap: balance и stable
Firefox 121 включает balance и stable значения для text-wrap . Значение balance полезно для коротких блоков контента, таких как заголовки, что делает текст более приятным и легко читаемым. stable значение предотвращает повторное замедление редактируемого содержимого во время редактирования.
Узнайте больше о text-wrap: balance .
text-wrap: balance
text-wrap: stable
Ленивая загрузка элементов <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 и выделение псевдоэлементов для текста, который был написан с ошибкой или грамматически неверен.