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

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

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

inert атрибут

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

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

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

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

  • Хром: 102.
  • Край: 102.
  • Фаерфокс: 112.
  • Сафари: 15.5.

Источник

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

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

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

  • Хром: 113.
  • Край: 113.
  • Фаерфокс: 112.
  • Сафари: 17.2.

CSS-вложение

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

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

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

  • Хром: 120.
  • Край: 120.
  • Фаерфокс: 117.
  • Сафари: 17.2.

Источник

CSS- animation-composition

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

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

  • Хром: 112.
  • Край: 112.
  • Фаерфокс: 115.
  • Сафари: 16.

Источник

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

Если вы используете безголовый режим 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 для Интернета. Он обеспечивает современные функции, такие как вычисления на графическом процессоре, меньшие затраты на доступ к оборудованию графического процессора, возможность рендеринга на несколько холстов с одного графического устройства, а также лучшую и более предсказуемую производительность.

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