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

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

Rachel Andrew

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

В апреле 2023 года Firefox 112 и Chrome 112 стали стабильными. Давайте посмотрим, что это значит для веб-платформы.

inert атрибут

Firefox 112 включает глобальный атрибут inert . Этот атрибут сообщает браузеру игнорировать элемент, указывая на то, что контент не должен быть интерактивным. Это:

• Предотвращает запуск событий click .
• Не позволяет элементу получить фокус.
• Исключает элемент и его содержимое из дерева доступности.

Этот атрибут теперь совместим со всеми тремя движками.

Функция смягчения linear()

Функция замедления linear() обеспечивает линейную интерполяцию между несколькими точками. Это позволяет создавать более сложные анимации, такие как эффекты отскока и упругости. Эта функция есть в Firefox 112.

CSS-вложение

В Chrome 112 добавлена ​​поддержка CSS Nesting — функции, которую очень ждут многие разработчики. Это вводит новый селектор вложения > , используемый для вложения связанных правил стиля способом, который будет знаком разработчикам, которые использовали препроцессоры:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

CSS- animation-composition

Chrome 112 также включает поддержку animation-composition . Узнайте, как работает это свойство, в разделе «Укажите, как несколько эффектов анимации должны объединяться с помощью анимации-композиции» .

Новый безголовый режим

Если вы используете безголовый режим Chrome, например, с Puppeteer, то в 112 появится совершенно новый безголовый режим. Узнайте об этом в обновленном режиме Headless Chrome .

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

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

Firefox 113 включает функции color() , lab() , lch() , oklab() и oklch() . Также включена функция color-mix() из CSS Color 5 и свойство forced-color-adjust .

Firefox также включает nth-child of <selector> , предоставляющий более точный контроль над тем, какие элементы вы хотите выбрать. Подробнее читайте в разделе «Больше контроля над выбором :nth-child() с помощью синтаксиса S» .

Что касается CSS, Chrome 113 включает функции overflow-inline , overflow-block и update media. Также включен в функцию плавности linear() и тип image-set() без префикса.

Chrome 113 также включает WebGPU , преемника графических API WebGL и WebGL 2 для Интернета. Он обеспечивает современные функции, такие как вычисления на графическом процессоре, меньшие затраты на доступ к оборудованию графического процессора, возможность рендеринга на несколько холстов с одного графического устройства, а также лучшую и более предсказуемую производительность.

Часть новой веб-серии.