Chrome 120 beta

CSS

Синтаксис <Image> для кастомных свойств

Синтаксис <Image> добавлен в поддержку для своих кастомных свойств @property или registerProperty() и может использоваться для url() картинок или градиентов.

Синтаксис <transform-function> and <transform-list> для кастомных свойств

Синтаксис <transform-function> and <transform-list> добавлен в поддержку для своих кастомных свойств @property или registerProperty(). Позволяет использовать переходы и анимации в этих пользовательских свойствах.

Media выражения: scripting свойство

Позволяет определять для JavaScript некоторые условия

@media (scripting: none) {
  .script-none {
    ...
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    ...
  }
}

@media (scripting: enabled) {
  .script-enabled {
    ...
  }
}

:dir() селектор псевдоклассов

Псевдоэлемент позволяет применить стили для текстов которые имеют направленность «ltr или rtl»

:dir(ltr) {
  background-color: red;
}

:dir(rtl) {
  background-color: blue;
}

Экспоненциальные функции CSS

Из спецификации CSS Values and Units Level 4 доступны функции pow(), sqrt(), hypot(), log() и exp(). Как можно применить на примере базовых размеров для заголовков:

:root {
--h6: calc(1rem * pow(1.5, -1));
--h5: calc(1rem * pow(1.5, 0));
--h4: calc(1rem * pow(1.5, 1));
--h3: calc(1rem * pow(1.5, 2));
--h2: calc(1rem * pow(1.5, 3));
--h1: calc(1rem * pow(1.5, 4));
}

Маски для CSS

Свойства mask-image and mask-mode позволит обрезать изображение или фон под изображения в разных модах. Также можно использовать и для текста. Примеры на css-tricks:

Пример на градиенте и SVG картинки:

Упрощён nesting в CSS

Вложенный уровень больше не начинается с символа &. Теперь валидный пример:

.card {
  h1 {
    /* Это валидно! */
  }
}

/* Тоже самое */
.card {
  & h1 {
    /* Это валидно сейчас */
  }
}

HTML

В HTML немного фич, с помощью нескольких тегов<details> теперь можно сделать аккордион. Если они имеют одно имя, то они образуют группу и можно без JS сделать полезный активный элемент. Важный момент, что активный details может быть открыт только один.

Web APIs

CSS Font Loading API FontFaceSet: check() метод

К API FontFaceSet добавили метод check который позволит узнать возможность использования указанных шрифтов.

Запрос для закрытия CloseWatcher

Новая концепция и включает в себя запросы пользователей на закрытие через Esc или свайпом назад в Android.

FedCM: API ошибок и API AutoSelectedFlag

Новый API, помогающий пользователям и разработчикам лучше понимать процесс аунтификации. Лучше всего объяснит, отдельный пост — https://developer.chrome.com/blog/fedcm-chrome-120-updates/

Остальные более низкоуровневые и не очень важные нововведения смотрите на официальном сайте https://developer.chrome.com/blog/chrome-120-beta/#fenced-frames-functionality-updates