Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в мае 2024 года.
Стабильные версии браузера
В мае 2024 года Firefox 126 , Safari 17.5 и Chrome 125 стали стабильными. В этом посте рассматриваются новые функции, добавленные в веб-платформу.
Позиционирование привязки CSS
Chrome 125 включает позиционирование привязки CSS. Это позволяет вам привязать абсолютно позиционированный элемент к одному или нескольким другим элементам на странице (якорям) декларативным способом без использования JavaScript. Позиционирование привязки работает эффективно, когда привязки можно прокручивать. Распространенным вариантом использования является размещение всплывающего окна, например всплывающей подсказки, рядом с элементом, который его вызвал, или меню выбора и списка параметров всплывающего окна.
Узнайте больше в статье «Введение в API позиционирования привязки CSS» .
Функции ступенчатого значения CSS round() , mod() и rem()
Chrome 125 также включает функции ступенчатого значения, что означает, что эти функции теперь являются базовыми новыми доступными. Функции ступенчатого значения round() , mod() и rem() преобразуют заданное значение в соответствии с другим «ступенчатым значением».
Узнайте больше в статье «Математические функции поэтапного вычисления значений CSS теперь в базовой версии 2024» .
Функция light-dark()
К новинке Baseline также присоединилась функция цвета CSS light-dark() , которая есть в Safari 17.5.
light-dark() — это функция, которая принимает два аргумента, оба из которых должны быть <color> . Один из обоих выбирается в зависимости от используемой цветовой гаммы.
- Если используемая цветовая схема
lightили неизвестна, возвращается вычисленное значение первого значения. - Если используемая цветовая схема
dark, возвращается вычисленное значение второго цвета.
Подробнее читайте в разделе «Цвета, зависящие от цветовой схемы CSS, с помощью Light-Dark()» .
API блокировки пробуждения экрана
В Firefox 126 появился API Screen Wake Lock, еще одна функция, которая теперь является частью недавно доступной версии Baseline. Этот API позволяет предотвратить затемнение и блокировку экрана устройства.
Узнайте, как использовать эту функцию в статье «Не спите с API блокировки пробуждения экрана» .
API вычисления давления
API Compute Pressure предлагает состояния высокого уровня, которые отражают загрузку ЦП в системе. Это позволяет реализации использовать правильные показатели базового оборудования, чтобы гарантировать, что пользователи смогут использовать всю доступную им вычислительную мощность, пока система не находится в неуправляемой нагрузке.
Эта функция присутствует в Chrome 125. Корпорация Intel возглавила разработку и реализацию этого API, который позволит приложениям для видеоконференций динамически балансировать функции и производительность.
Прочтите документацию по API Compute Pressure .
Правило @starting-style
Safari 17.5 включает правило @starting-style . Это правило CSS позволяет применить стиль, который браузер может найти до того, как элемент будет открыт на странице, что необходимо для анимации входа.
Правило @starting-style — это одна из функций, описанных в разделе «Четыре новые функции CSS для плавной анимации входа и выхода» .
Бета-версии браузера
Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии — Firefox 127 и Chrome 126 . Эти выпуски привносят в платформу множество замечательных функций. Ознакомьтесь со всеми подробностями в примечаниях к выпуску. Вот лишь несколько основных моментов.
Chrome 126 включает переходы между представлениями документов для навигации по одному и тому же источнику. Раньше вам приходилось перепроектировать свой веб-сайт в SPA, чтобы использовать API View Transitions. Это уже не так. Переходы просмотра теперь включены по умолчанию для навигации по одному и тому же источнику. Вы можете создать переход между двумя разными документами одного и того же происхождения.
Firefox 127 включает в себя дополнительные методы JavaScript Set intersection() , union() , difference() , symmetricDifference() , isSubsetOf() , isSupersetOf() и isDisjointFrom() .