Новое в Chrome 118

Адриана Хара

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

Я Адриана Хара. Давайте углубимся и посмотрим, что нового для разработчиков в 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>

без области видимости применяется последний объявленный стиль.

Без @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
<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;
}
С @scope
<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;
  }
}

С помощью области действия вы также можете стилизовать компонент, не стилизуя определенные элементы, вложенные в него. В каком-то смысле у вас могут быть «дыры», к которым неприменим стиль области действия.

Как и в следующем примере, мы могли бы применить стиль к тексту и исключить элементы управления или наоборот.

представление приведенного выше HTML-кода со словами в области видимости рядом с первым и третьим элементом div и исключенным словом рядом со вторым и четвертым элементом div.

<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.

И более!

Конечно, есть еще много чего.

дальнейшее чтение

Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по ссылкам ниже, чтобы узнать о дополнительных изменениях в Chrome 118.

Подписаться

Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.

Привет, Адриана Хара, как только выйдет Chrome 119, я буду здесь, чтобы рассказать вам, что нового в Chrome!