Вот что вам нужно знать:
- Объявляйте определенные стили внутри компонента с помощью правила CSS
@scope
. - Появилась новая медиа-функция:
prefers-reduced-transparency
. В DevTools улучшена панель «Источники» .
И есть еще много чего .
Я Адриана Хара. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 118.
Правило CSS @scope
.
Правило @scope
позволяет разработчикам ограничивать правила стиля заданным корнем области видимости и стилизовать элементы в соответствии с близостью к этому корню области видимости.
С помощью @scope
вы можете переопределять стили на основе близости, что отличается от обычных стилей CSS, которые применяются только на основе порядка и специфики источника. В следующем примере есть две темы.
<div class="lightpink-theme">
<a href="#">I'm lightpink!</a>
<div class="pink-theme">
<a href="#">Different pink!</a>
</div>
</div>
без области видимости применяется последний объявленный стиль.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
С помощью области видимости вы можете иметь вложенные элементы, и применяемый стиль — это стиль ближайшего предка.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
Scope также избавляет вас от необходимости писать длинные и запутанные имена классов, упрощает управление более крупными проектами и позволяет избежать конфликтов имен.
<div class="first-container"> <h1 class="first-container__main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1> </div>
.first-container__main-title { color: grey; } .second-container__main-title { color: mediumturquoise; }
<div class="first-container"> <h1 class="main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="main-title"> I'm the main title, but somewhere else</h1> </div>
@scope(.first-container){ .main-title { color: grey; } } @scope(.second-container){ .main-title { color: mediumturquoise; } }
С помощью области действия вы также можете стилизовать компонент, не стилизуя определенные элементы, вложенные в него. В каком-то смысле у вас могут быть «дыры», к которым неприменим стиль области действия.
Как и в следующем примере, мы могли бы применить стиль к тексту и исключить элементы управления или наоборот.
<div class="component">
<div class="purple">
<h1>Drink water</h1>
<p class="purple">hydration is important</p>
</div>
<div class="click-here">
<p>not in scope</p>
<button>click here</button>
</div>
<div class="purple">
<h1 class="purple">Exercise</h1>
<p class="purple">move it move it</p>
</div>
<div class="link-here">
<p>Excluded from scope</p>
<a href="#"> link here </a>
</div>
</div>
@scope (.component) to (.click-here, .link-here) {
div {
color: purple;
text-align: center;
font-family: sans-serif;
}
}
Дополнительную информацию можно найти в статье Ограничьте охват селекторов с помощью at-правила CSS @scope .
prefers-reduced-transparency
Мы используем медиа-запросы, чтобы обеспечить взаимодействие с пользователем, которое адаптируется к предпочтениям пользователя и условиям устройства. В этой версии Chrome добавлено новое значение, которое можно использовать для адаптации пользовательского опыта: prefers-reduced-transparency
.
Новое значение, которое вы можете протестировать с помощью медиа-запросов, — это prefers-reduced-transparency
, которое позволяет разработчикам адаптировать веб-контент к выбранным пользователем предпочтениям для снижения прозрачности в ОС, например, параметру «Уменьшить прозрачность» в macOS. Допустимые параметры: reduce
или no-preference
.
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}
И вы можете проверить, как это выглядит, с помощью DevTools:
Для получения дополнительной информации ознакомьтесь с документацией о предпочтительной пониженной прозрачности .
Исправление: в предыдущей версии этой статьи упоминалась новая функция мультимедиа scripting
, представленная в этом выпуске. На самом деле это будет в версии 120.
Улучшения панели «Источники» в DevTools
DevTools имеет следующие улучшения в панели «Источники» : улучшена согласованность рабочей области , в первую очередь за счет переименования панели «Источники » > «Файловая система » в « Рабочая область » вместе с другим текстом пользовательского интерфейса; « Источники » > « Рабочая область» также позволяет синхронизировать изменения, внесенные вами в DevTools, непосредственно с исходные файлы.
Кроме того, теперь вы можете изменять порядок панелей в левой части панели «Источники» , перетаскивая их, а на панели « Источники» теперь можно красиво печатать встроенный JavaScript в следующих типах сценариев: module
, importmap
, speculationrules
и выделять синтаксис importmap
и speculationrules
. типы сценариев, оба из которых содержат JSON.
Ознакомьтесь с новостями в DevTools, чтобы узнать больше об обновлениях Chrome 118 DevTools.
И более!
Конечно, есть еще много чего.
WebUSB API теперь доступен Service Workers, зарегистрированным расширениями браузера, что позволяет разработчикам использовать API при реагировании на события расширения.
Чтобы помочь разработчикам уменьшить сложности в потоках запросов платежей, мы убираем требование активации пользователя в
Payment Request
иSecure Payment Confirmation
.Цикл выпуска Chrome становится короче , стабильные версии будут выпускаться каждые три недели, начиная с Chrome 119, который появится через три недели.
дальнейшее чтение
Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по ссылкам ниже, чтобы узнать о дополнительных изменениях в Chrome 118.
- Что нового в Chrome DevTools (118)
- Устаревание и удаление Chrome 118
- Обновления ChromeStatus.com для Chrome 118
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Привет, Адриана Хара, как только выйдет Chrome 119, я буду здесь, чтобы рассказать вам, что нового в Chrome!