Chrome 118 的新变化

Adriana Jara

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

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

• 开发者工具在 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>

无作用域时，应用的样式是最后声明的。

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

在作用域内，您可以嵌套元素，并且应用的样式是最接近祖先的样式。

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

作用域还可让您免去编写冗长而复杂的类名称，并可让您轻松管理较大的项目并避免命名冲突。

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

如需了解详情，请参阅使用 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”面板改进

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

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

如需详细了解 Chrome 118 中的开发者工具更新，请查看 DevTools 的新变化。

等等！

当然还有很多其他功能。

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

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

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

深入阅读

本指南仅涵盖部分重要内容。请访问以下链接 Chrome 118 中的其他变更。

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

订阅

要随时掌握最新动态，请订阅 Chrome 开发者 YouTube 频道， ，每当我们发布新视频时，您都会收到电子邮件通知。

对了，Adriana Jara，Chrome 浏览器 119 发布后， 告诉您 Chrome 中的新变化！