Новое в 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 DevTools (142) .
• Обновления ChromeStatus.com для Chrome 142 .
• Календарь релизов Chrome .

Подписаться

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

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