Chrome 118 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

• 使用 @scope CSS 规则在组件中声明特定样式。
• 新增了媒体功能：prefers-reduced-transparency。

• DevTools 改进了 Sources 面板。

• 还有许多其他功能。

我是 Adriana Jara。我们来深入了解一下 Chrome 118 中面向开发者的新功能。

CSS @scope 规则。

借助 @scope at 规则，开发者可以将样式规则的作用域限定为给定作用域根，并根据该作用域根的距离来设置样式元素。

借助 @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

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

借助作用域，您还可以为组件设置样式，而无需为嵌套在其中的某些内容设置样式。在某种程度上，可能会出现范围样式不适用的“空洞”。

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

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

您可以使用 DevTools 查看其效果：

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

更正：本文的先前版本提到了此版本中包含新的 scripting 媒体功能。实际上将采用版本 120。

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

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

此外，您现在可以通过拖放来重新排列 Sources 面板左侧的窗格，并且 Sources 面板现在可以为以下脚本类型内嵌的 JavaScript 进行美化输出：module、importmap、speculationrules，并突出显示 importmap 和 speculationrules 脚本类型的语法（这两种脚本类型都包含 JSON）。

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

等等！

当然，还有许多其他功能。

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

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

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

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 118 中的其他变更，请点击以下链接。

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

订阅

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

我是 Adriana Jara，Chrome 119 发布后，我会立即为您介绍 Chrome 中的新变化！