Новое в Chrome 131

Mariko Kosaka
X

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

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

Улучшения стиля в <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!

,

Mariko Kosaka
X

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

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

Улучшения стиля в <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!