Chrome 118 的新变化

Adriana Jara

以下是您有必要知道的信息：

• 使用 @scope CSS 规则在组件内声明特定样式。
• 有一项新的媒体功能：prefers-reduced-transparency。

• 开发者工具在Sources 面板中进行了改进。

• 还有许多更多内容。

我是 Adriana Jara。我们来深入了解一下 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;
  }
}

借助 Scope，您还可以设置组件的样式，而无需设置嵌套在其中的特定内容的样式。在某种程度上，您可以在不适用作用域样式的位置留出“孔”。

如下例所示，我们可以对文本应用样式，并排除控件，反之亦然。

<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;
  }
}

如需了解详情，请参阅使用 CSS @scope at-rule 限制选择器的覆盖范围一文。

prefers-reduced-transparency 媒体功能

我们使用媒体查询来提供可适应用户的偏好和设备条件的用户体验。此 Chrome 版本新增了可用于调整用户体验的值：prefers-reduced-transparency。

您可以使用媒体查询测试一个新值，即 prefers-reduced-transparency；借助该值，开发者可以根据用户选择的偏好设置调整 Web 内容，从而降低操作系统中的透明度，例如 macOS 上的“降低透明度”设置。有效选项为 reduce 或 no-preference。

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

您还可以使用开发者工具查看其外观：

如需了解详情，请参阅 prefers-reduced-transparency 文档。

更正：本文之前的版本提到了此版本中新增的 scripting 媒体功能。实际版本为 120。

开发者工具中的“Sources”面板改进

DevTools 在 Sources 面板中有以下改进：workspace 功能提高了一致性，最值得注意的是，通过将 Sources > Filesystem 窗格重命名为 Workspace 以及其他界面文本，您还可以使用 Sources > Workspace 将您在开发者工具中所做的更改直接同步到源文件。

此外，您现在可以通过拖放操作对 Sources 面板左侧的窗格进行重新排序。Sources 面板现在可以美观输出下列脚本类型中的内嵌 JavaScript：module、importmap、speculationrules，并突出显示 importmap 和 speculationrules 脚本类型的语法（两者均保存 JSON）。

如需详细了解 Chrome 118 开发者工具更新，请参阅 开发者工具的新变化。

还有更多其他奖励！

当然还有很多。

• WebUSB API 现已公开给由浏览器扩展程序注册的 Service Worker，让开发者可以在响应扩展程序事件时使用 API。

• 为了帮助开发者减少付款请求流程中的不便，我们将从 Payment Request 和 Secure Payment Confirmation 中移除用户激活要求。

• Chrome 的发布周期越来越短，稳定版本每 3 周发布一次，从 Chrome 119 开始，版本将在三周后发布。

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 118 中的其他变化，请点击以下链接。

• Chrome 开发者工具的新变化 (118)
• Chrome 118 弃用和移除
• 针对 Chrome 118 的 ChromeStatus.com 更新
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

嗨，Adriana Jara！Chrome 119 发布后，我会在这里 告诉大家 Chrome 的新功能！