Chrome 118 版新功能

Adriana Jara

以下是一些注意事項：

• 使用 @scope CSS 規則，在元件中宣告特定樣式。
• 我們推出了新的媒體功能：prefers-reduced-transparency。

• 開發人員工具的「來源」面板已進行改善。

• 除此之外，還有更多功能。

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

範圍也能讓您避免編寫冗長、複雜的類別名稱，讓您輕鬆管理大型專案並避免命名衝突。

<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，這可讓開發人員根據使用者選取的偏好設定調整網站內容，以減少作業系統的透明度，例如 macOS 上的「減少透明度」設定。有效選項為 reduce 或 no-preference。

.translucent {
  opacity: 0.4;
}

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

此外，您也可以使用開發人員工具檢查顯示內容：

詳情請參閱 prefers-reduced-transparency 說明文件。

更正：這篇文章的舊版本提到了這個版本中的新 scripting 媒體功能。但實際上是第 120 版。

開發人員工具中的「來源」面板改善項目

開發人員工具的「Sources」面板有以下改善項目：工作區功能改善了一致性，最明顯的例子是將「Sources」 >「Filesystem」窗格重新命名為「Workspace」，以及其他 UI 文字；「Sources」 >「Workspace」 也讓您可以將在開發人員工具中所做的變更，直接同步至來源檔案。

此外，您現在可以透過拖曳和放置，重新排序「Sources」面板左側的窗格，而「Sources」面板現在可以針對下列指令碼類型內嵌式 JavaScript 進行美化列印：module、importmap、speculationrules，並醒目顯示 importmap 和 speculationrules 指令碼類型的語法，這兩者都會保留 JSON。

如要進一步瞭解 Chrome 118 版 DevTools 的更新內容，請參閱「DevTools 的新功能」。

還有更多獎品等著您！

當然，還有更多功能。

• WebUSB API 現在會公開給瀏覽器擴充功能註冊的 Service Worker，讓開發人員在回應擴充功能事件時使用此 API。

• 為協助開發人員降低付款要求流程中的操作不便，我們將移除 Payment Request 和 Secure Payment Confirmation 中的使用者啟用規定。

• Chrome 的發布週期越來越短，穩定版將每三週發布一次，從三週後發布的 Chrome 119 開始。

延伸閱讀

這份報告僅涵蓋部分重點。如要瞭解 Chrome 118 版的其他變更，請點選下方連結。

• Chrome 開發人員工具 (118) 的新功能
• Chrome 118 淘汰和移除項目
• Chrome 118 的 ChromeStatus.com 更新
• Chromium 來源存放區變更清單
• Chrome 發布時程表

訂閱

歡迎訂閱 Chrome Developers YouTube 頻道，即時掌握最新消息，每當我們推出新影片時，您都會收到電子郵件通知。

我是 Adriana Jara，Chrome 119 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！