Новое в Chrome 118

Adriana Jara

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

• Объявляйте определенные стили внутри компонента с помощью правила 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!

Adriana Jara

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

• Объявляйте определенные стили внутри компонента с помощью правила 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!