Вот что вам нужно знать:
- Объявляйте определенные стили внутри компонента с помощью правила CSS
@scope
. - Появилась новая медиа-функция:
prefers-reduced-transparency
. В DevTools улучшена панель «Источники» .
И есть еще много чего.
Я Адриана Хара. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 118.
Правило CSS @scope
.
At-правило @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!