Новые возможности CSS, улучшения для печати и удобные виджеты в обновленном Chrome 131

Chrome 131 приносит разработчикам сразу несколько полезных функций, которые могут существенно облегчить стилизацию и повысить гибкость работы с CSS. От улучшенного наследования до новых опций для печати и оформления страниц. В этом обзоре вы узнаете, как использовать каждое из этих новшеств на практике.

Раньше, если текст на странице был выделен, его цвет не всегда корректно применялся, особенно если выделение происходило в элементах без заданного CSS-класса. В Chrome 131 эта проблема решена: теперь браузер автоматически применяет стили к выделенному тексту, делая его, например, синим или подчеркивая по умолчанию, если так указано в ваших стилях.

Чтобы увидеть изменения, можно добавить к любому тексту класс, управляющий цветом выделения. Например:

Теперь при выделении такой текст становится синим, без дополнительных сложных настроек. Это новшество делает работу с выделенным текстом интуитивно понятной и упрощает настройку для разработчиков.

и

Chrome 131 расширяет стилизацию для HTML-элементов <details> и <summary>, которые популярны при создании виджетов для скрытия и раскрытия информации. Теперь для этих элементов можно использовать CSS-свойства display и ::before/::after, создавая привлекательные аккордеоны и раскрывающиеся списки.

Рассмотрим пример, как легко создать такой виджет:

В этом примере можно добавить иконку или изменить вид стрелки раскрытия, чтобы сделать интерфейс более выразительным:

Теперь пользователи видят, открывается ли элемент или закрыт, благодаря стрелке, которая меняет направление, а стиль легко настраивается без лишнего JavaScript.

Среди новинок Chrome 131 — поддержка полей страницы при печати документа или экспорте его в PDF. Это позволяет создавать аккуратные печатные версии сайтов, добавляя на них собственные колонтитулы и контроль размеров полей.

Теперь вы можете настроить верхние и нижние колонтитулы для страниц. Например:

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

Chrome 131 добавляет поддержку внешних SVG-ресурсов для стилей обводки, заливки и маркеров. Это значит, что теперь в CSS можно подгружать SVG-иконки и узоры, не полагаясь на PNG или иные форматы, обеспечивая более высокое качество отображения.

Пример настройки внешнего SVG:

Также добавлено новое свойство font-variant emoji, которое позволяет контролировать вид эмодзи, выбирая, какой стиль эмодзи использовать в зависимости от дизайна сайта. Например, можно выбрать чёрно-белые эмодзи для минималистичных интерфейсов.

Это новшество делает CSS более универсальным инструментом для стилизации, охватывая даже такие визуальные элементы, как эмодзи.

Chrome 131 открывает много новых возможностей для разработчиков, упрощая стилизацию и управление структурой веб-страниц. Теперь стало легче управлять выделением текста, настраивать виджеты и готовить страницы для печати. Эти изменения делают интерфейсы удобнее как для разработчиков, так и для пользователей.

Команда разработчиков обещает больше новшеств в Chrome 132. Чтобы быть в курсе последних обновлений, подписывайтесь на блоги и каналы, посвященные DevTools и CSS.