Chrome 118 版新功能

Adriana Jara

以下是一些注意事項：

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

• 開發人員工具已改良「Sources」面板。

• 還有更多應用程式。

我是 Adriana Jara讓我們深入探索 Chrome 118 為開發人員推出的新功能。

CSS @scope 規則。

只要使用 @scope at-rule，

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

透過範圍功能，您也可以在不設定特定巢狀結構項目的情況下，設定元件樣式。您可以加入不適用範圍樣式的「孔洞」。

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

<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 版。

改善開發人員工具中的來源面板

開發人員工具在「Sources」面板中有下列改善項目：最值得注意的是，工作區功能可將「來源」 >「檔案系統」窗格與其他 UI 文字重新命名為「Workspace」，藉此改善一致性，最顯著的就是「來源」 >「工作區」也可以將您在開發人員工具中所做的變更直接同步到來源檔案。