Новое в Chrome 131

Mariko Kosaka
X

Вот что вам нужно знать:

Я Марик Косака. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 131.

Наследование подсветки CSS

Наследование подсветки CSS меняется для псевдоклассов ::selection и ::target-text . Это создает более интуитивную модель наследования стилей и согласуется с недавно добавленными псевдоклассами ::highlight , ::spelling-error и ::grammar-error .

Подумайте об этом фрагменте кода с выделенным текстом.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

В более ранних версиях Chrome, когда вы выделяли выделенный текст, цвет текста не менялся на синий, несмотря на установку псевдокласса ::selection для родительского элемента абзаца.

Выделенный текст розовым цветом

Это связано с тем, что он был реализован с использованием модели наследования исходного элемента. Таким образом, псевдокласс ::selection в этом случае сопоставляет только элементы с синим классом, которого нет у элемента внутри этого абзаца.

После изменения наследования выделения, когда в Chrome 131 выбран тот же текст, текст меняет свой цвет на синий.

Выделенный текст синим цветом

С этим связано еще несколько изменений, поэтому обязательно ознакомьтесь с изменениями в наследовании для стилей выделения CSS, написанными Стивеном Ченни из Igalia, который работал над этой функцией.

Улучшения стиля в <details> и <summary>

Теперь у вас есть больше возможностей для стилизации структуры элементов <details> и <summary> для создания виджетов раскрытия или аккордеона.

Изменения, представленные в этом выпуске, позволяют использовать свойство display и добавлять псевдоэлемент ::details-content для стилизации части, которая расширяется и сворачивается.

Исторически изменить тип отображения элемента details было невозможно. Теперь это ограничение снято, и вы можете использовать такие вещи, как сетка или гибкие макеты.

В этом эксклюзивном примере аккордеона, состоящем из нескольких элементов details , когда один из элементов details развернут, его содержимое размещается рядом со summary .

Виджет «Гармошка» с макетом Flex

Это достигается за счет использования гибкого макета элемента details . Вы также можете попробовать больше шаблонов макета с другими значениями отображения, такими как grid .

Прочтите статью Брамуса « Дополнительные варианты оформления <details> для более подробного объяснения.

Поля @page

Добавлена ​​поддержка полей полей страницы при печати веб-документа или его экспорте в формате PDF.

Поля полей страницы позволяют определить содержимое в области полей страницы. Таким образом, вы можете предоставлять собственные верхние и нижние колонтитулы вместо использования встроенных верхних и нижних колонтитулов, созданных браузером.

Поле страницы определяется с помощью правила @page в CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

Внешний вид и содержимое поля поля задаются с помощью свойств CSS внутри at-правил, представляющих 16 полей поля, использующих сгенерированный контент.

Для нумерации страниц также поддерживаются счетчики: page для текущего номера страницы и pages для общего количества страниц.

Более подробное объяснение можно найти в статье Рэйчел «Добавление содержимого на поля веб-страниц при печати с помощью CSS» .

И многое другое!

И, конечно же, есть еще много всего.

  • Поддержка внешних ресурсов SVG для «обтравочного контура», «заливки», «обводки» и «маркера».
  • WebHID включен внутри выделенных рабочих контекстов.
  • Управляйте поведением Emoji с помощью CSS-свойства font-variant-emoji .

Дальнейшее чтение

Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 131.

Подписаться

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

Меня зовут Марико Косака, и как только выйдет Chrome 132, мы будем здесь, чтобы рассказать вам, что нового в Chrome!