Новое в Chrome 142

Rachel Andrew

Опубликовано: 28 октября 2025 г.

Выходит новая версия Chrome 142, и в этом посте мы расскажем о некоторых ключевых особенностях этого релиза. Ознакомьтесь с полными примечаниями к выпуску Chrome 142 .

Основные моменты этого релиза:

• Сопоставьте маркеры прокрутки с псевдоклассами :target-before и :target-after .
• Используйте синтаксис диапазонов в запросах контейнеров стилей и функцию CSS if() .
• Реагируйте на проявление пользователями интереса к элементу с помощью interestfor .

Псевдоклассы :target-before и :target-after

Эти псевдоклассы соответствуют маркерам прокрутки, расположенным до или после активного маркера (соответствующего :target-current ) в пределах одной группы маркеров прокрутки, определяемой порядком в плоском дереве:

• :target-before : Соответствует всем маркерам прокрутки, предшествующим активному маркеру в порядке плоского дерева внутри группы.
• :target-after : Соответствует всем маркерам прокрутки, следующим за активным маркером в порядке плоского дерева внутри группы.

Синтаксис диапазона для запросов к контейнерам стилей и оператора if()

Chrome расширяет возможности CSS-запросов стилей и функции if() за счет добавления поддержки синтаксиса диапазонов .

Это расширяет возможности запросов стиля за пределы точного сопоставления значений (например, style(--theme: dark) ). Разработчики могут использовать операторы сравнения (такие как > и < ) для сравнения пользовательских свойств, литеральных значений (например, 10px или 25%) и значений из функций подстановки, таких как attr() и env() . Для корректного сравнения обе стороны должны соответствовать одному и тому же типу данных. Оно ограничено следующими числовыми типами: <length> , <number> , <percentage> , <angle> , <time> , <frequency> и <resolution> .

Примеры:

Сравните пользовательское свойство с буквальной длиной:

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

Сравните два буквальных значения.

@container style(1em < 20px) {
  /* ... */
}

Использование диапазонов стилей в функции if() :

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

Инициаторы интересов (атрибут interestfor )

Chrome добавляет атрибут interestfor к элементам <button> и <a> . Этот атрибут добавляет элементу поведение, связанное с проявлением интереса. Когда пользователь проявляет интерес к элементу, на целевом элементе запускаются действия, например, отображается всплывающее окно.

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

Дополнительная информация

Здесь описаны лишь некоторые ключевые моменты. Дополнительные изменения в Chrome 141 можно найти по следующим ссылкам.

• Примечания к выпуску Chrome 142 .
• Что нового в инструментах разработчика Chrome (142) .
• ChromeStatus.com обновляет Chrome до версии 142 .
• Календарь релизов Chrome .

Подписаться

Чтобы быть в курсе всех новостей, подпишитесь на YouTube-канал Chrome Developers , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео. Или подпишитесь на нас в X или LinkedIn, чтобы получать новые статьи и записи в блоге.

Как только выйдет Chrome 143, мы сразу же расскажем вам о новинках в Chrome!