本頁面由 Cloud Translation API 翻譯而成。

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>

沒有範圍，樣式就會是最後一個宣告的樣式

不使用 @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;
  }
}

透過範圍，您也可以設定元件的樣式，而不設定巢狀結構中的特定項目樣式。做法是在不套用範圍樣式的情況下納入「孔洞」。

如同以下範例，我們可以對文字套用樣式，並排除控制項，反之亦然。

這個 html 表示，第一個和第三個 div 旁邊出現的字詞，以及第二個和第四個 div 旁邊排除的字詞。

<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。開發人員可根據所選偏好設定調整網頁內容，降低 OS 的透明度，例如 macOS 的「減少透明度」設定。有效選項為 reduce 或 no-preference。

.translucent {
  opacity: 0.4;
}

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

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

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

修正內容：本文的先前版本提到了此版本中的全新 scripting 媒體功能。但實際上是第 120 版。

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

開發人員工具在來源面板中進行了以下改善：工作區透過重新命名來源 >檔案系統窗格至Workspace以及其他 UI 文字、來源 >Workspace 也可讓您將開發人員工具中的變更直接同步到來源檔案。

此外，您現在可拖曳「來源」面板左側的窗格，將窗格重新排序。此外，「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 Developers YouTube 頻道，每次推出新影片時，您都會收到電子郵件通知。

Yo soy Adriana Jara 等 Chrome 119 推出後，就立即交給我告訴你 Chrome 的新功能！