[Перевод] Вышел Chrome 118
Эта статья — перевод оригинальной статьи «New in Chrome 118».
Также я веду телеграм канал «Frontend по-флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.
CSS @scope.
Правило @scope at-rule позволяет разработчикам распространять правила стилей на заданный корень описания и стилизовать элементы в соответствии с близостью к этому корню.
С помощью @scope можно отменять стили, основанные на близости, что отличается от обычных стилей CSS, которые применяются только на основе порядка и специфики источника. В следующем примере имеется две темы.
без @scope, применяемым стилем является последний объявленный
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }
С помощью @scope можно иметь вложенные элементы, при этом применяется стиль ближайшего предка.
@scope (.pink-theme) {
a {
color: hotpink;
}
}
@scope (.lightpink-theme){
a {
color: lightpink;
}
}
@scope также избавляет от необходимости писать длинные и запутанные имена классов, облегчает управление большими проектами и позволяет избежать конфликтов имен.
Без @scope
I'm the main title
I'm the main title, but somewhere else
.first-container__main-title {
color: grey;
}
.second-container__main-title {
color: mediumturquoise;
}С @scope
I'm the main title
I'm the main title, but somewhere else
@scope(.first-container){
.main-title {
color: grey;
}
}
@scope(.second-container){
.main-title {
color: mediumturquoise;
}
}С помощью @scope можно также стилизовать компонент, не стилизуя некоторые вложенные в него элементы. Таким образом, можно создать «дыры», к которым не будет применяться стиль, заданный в области видимости.
Как в следующем примере, мы можем применить стиль к тексту и исключить элементы управления, или наоборот.
Drink water
hydration is important
not in scope
Exercise
move it move it
Excluded from scope
link here
@scope (.component) to (.click-here, .link-here) {
div {
color: purple;
text-align: center;
font-family: sans-serif;
}
}Более подробную информацию можно найти в документации по @scope.
scripting и мультимедийные функции prefers-reduced-transparency
Мы используем медиазапросы для создания пользовательского опыта, который адаптируется к предпочтениям пользователя и условиям устройства. В этой версии Chrome добавлены два новых значения, которые могут быть использованы для адаптации пользовательского опыта: scripting и prefers-reduced-transparency.
Мы можем считать само собой разумеющимся наличие скриптов при работе в вебе, однако они не всегда включены. Теперь с помощью функции scripting медиазапросов можно определить наличие скриптов и применить определенные стили для каждого случая. Доступные значения: enabled, initial-only или none
@media (scripting: none) {
.script-none {
color: red;
}
}Еще одно значение, которое можно проверить с помощью медиазапросов, — prefers-reduced-transparency, позволяющее разработчикам адаптировать веб-контент к выбранным пользователем предпочтениям по уменьшению прозрачности в ОС, например к настройке Reduce transparency в macOS. Возможные варианты: reduce или no-preference.
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}А проверить, как это выглядит, можно с помощью DevTools:
Для получения дополнительной информации ознакомьтесь с документацией по scripting и prefers-reduced-transparency.
Улучшения панели source в DevTools
В панели Sources в DevTools реализованы следующие улучшения: функция workspace улучшила согласованность, в частности, панель Sources > Filesystem переименована в Workspace вместе с другими текстами пользовательского интерфейса, Sources > Workspace также позволяет синхронизировать изменения, сделанные в DevTools, непосредственно с исходными файлами.
Кроме того, теперь можно изменять порядок расположения панелей в левой части панели Sources путем перетаскивания, а панель Sources теперь может красиво выводить inline JavaScript в следующих типах сценариев: module, importmap, speculationrules и подсвечивать синтаксис скриптов типа importmap и speculationrules, которые содержат JSON.
Подробнее об обновлениях Chrome 118 DevTools читайте в разделе «Что нового в DevTools».
И ещё!
Конечно, есть и ещё.
