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

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

Rachel Andrew

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

В августе Firefox 104 , Chrome 104 и Chrome 105 стали стабильными.

Индивидуальные преобразования

Chrome 104 включает отдельные свойства для CSS Transforms . Свойства: scale , rotate и translate , которые вы можете использовать для индивидуального определения этих частей преобразования.

Таким образом, Chrome присоединяется к Firefox и Safari, которые уже поддерживают эти свойства.

Новый синтаксис медиа-запроса

Chrome 104 также включает синтаксис диапазона медиа-запросов . Это уже реализовано в Firefox и помогает оптимизировать медиа-запросы. Например, следующий медиа-запрос:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Можно записать с помощью оператора сравнения:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Контейнерные запросы

Chrome 105 — это захватывающий выпуск, в котором на веб-платформе появилась долгожданная функция контейнерных запросов. В то время как медиа-запросы дают вам возможность запросить размер области просмотра, контейнерные запросы предоставляют метод запроса размера контейнера.

Чтобы использовать контейнерные запросы, включите сдерживание с помощью свойства container-type .

.card-container {
  container-type: inline-size;
}

Установка container-type в inline-size запрашивает размер родителя в линейном направлении. В латинских языках, таких как английский, это будет ширина карточки, поскольку текст движется по строкам слева направо.

Теперь мы можем использовать этот контейнер для применения стилей к любому из его дочерних элементов с помощью @container :

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Вы можете узнать больше о контейнерных запросах в публикации @container и :has(): два новых мощных адаптивных API, появившихся в Chromium 105 .

Родительский псевдокласс :has()

В упомянутом выше сообщении также упоминается :has() . Этот новый псевдокласс Псевдокласс CSS :has() дает вам возможность нацеливаться на родительский элемент и дочерние элементы на основе условий. Узнайте больше в :has() о селекторе семейства .

API дезинфицирующего средства

Также в Chrome 105 есть Sanitizer API . Этот API встраивает в платформу средства очистки, помогающие устранить уязвимости межсайтового скриптинга.

Также в Chrome 105 есть псевдокласс CSS :modal . Это соответствует элементу, находящемуся в состоянии, в котором исключено любое взаимодействие с элементами вне его. Например, <dialog> открывается с помощью API showModal() .

Методы findLast() и findLastIndex().

В Firefox 104 добавлена ​​поддержка флага для методов Array.prototype.findLast() , Array.prototype.findLastIndex() , TypedArray.prototype.findLast() и TypedArray.prototype.findLastIndex() . Они используются для поиска значения и индекса (соответственно) последнего элемента в массиве или TypedArray, который соответствует предоставленной тестовой функции.

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

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

Из-за того, что даты выпуска выпадают сразу за месяц, единственной новой бета-версией в августе была Firefox 105 , о которой в настоящее время мало подробностей.

Бета-версия Safari 16 , упомянутая в июне, также все еще продолжается.

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