Chrome 118 の新機能

Adriana Jara

必知事項は次のとおりです。

• @scope CSS ルールを使用して、コンポーネント内で特定のスタイルを宣言します。
• 新しいメディア機能（prefers-reduced-transparency）が追加されました。

• DevTools の [ソース] パネルが改善されました。

• 他にも多くの機能を利用できます。

アドリアナ・ジャラですChrome 118 のデベロッパー向け新機能を見てみましょう。

CSS @scope ルール。

@scope アットルールを使用すると、デベロッパーはスタイルルールのスコープを特定のスコープ対象ルートに制限し、そのスコープ対象ルートの近接性に応じて要素のスタイルを設定できます。

@scope を使用すると、近接性に基づいてスタイルをオーバーライドできます。これは、ソースの順序と特異性のみに基づいて適用される通常の CSS スタイルとは異なります。次の例では、2 つのテーマがあります。

<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 個のメディア機能

Google は、メディアクエリを使用して、ユーザーの好みやデバイスの状態に適応するユーザー エクスペリエンスを提供しています。この Chrome バージョンには、ユーザー エクスペリエンスの調整に使用できる新しい値 prefers-reduced-transparency が追加されています。

メディアクエリでテストできる新しい値は prefers-reduced-transparency です。これにより、デベロッパーは OS の透明性を下げるためにユーザーが選択した設定（macOS の [透明度を下げる] の設定など）にウェブ コンテンツを適応させることができます。有効なオプションは reduce または no-preference です。

.translucent {
  opacity: 0.4;
}

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

また、DevTools を使用してどのように表示されるかを確認できます。

詳しくは、prefers-reduced-transparency のドキュメントをご覧ください。

修正: この記事の以前のバージョンでは、このリリースに含まれる新しい scripting メディア機能について言及していました。実際にはバージョン 120 になります。

DevTools の [Sources] パネルの改善

DevTools の [ソース] パネルが次のように改善されました。ワークスペース機能では、特に [ソース] >[Filesystem] ペインから [Workspace] に移動し、他の UI テキストとともに [Sources] >ワークスペースでは、DevTools で行った変更をソースファイルに直接同期することもできます。

また、[Sources] パネルの左側のペインをドラッグ&ドロップして並べ替えることができるようになりました。[Sources] パネルでは、module、importmap、speculationrules のスクリプト タイプ内のインライン JavaScript をプリティ プリントして、importmap と speculationrules のスクリプト タイプの構文をハイライト表示できるようになりました（どちらも JSON を保持します）。

Chrome 118 DevTools のアップデートについて詳しくは、DevTools の新機能をご覧ください。

その他

もちろん、他にもたくさんあります。

• WebUSB API がブラウザ拡張機能で登録された Service Worker に公開され、デベロッパーは拡張機能イベントに応答する際に API を使用できるようになりました。

• デベロッパーが支払いリクエスト フローをスムーズに処理できるように、Payment Request と Secure Payment Confirmation でユーザー アクティベーションの要件を廃止します。

• Chrome のリリース サイクルが短縮。Stable 版は 3 週間ごとにリリースされます。Chrome 119 からは、3 週間後にリリースされる予定です。

関連情報

ここでは、重要なハイライトのみを取り上げます。以下のリンクを参照してください: その他の変更が行われます。

• Chrome DevTools の新機能（118）
• Chrome 118 のサポート終了と削除
• ChromeStatus.com の更新（Chrome 118）
• Chromium ソース リポジトリの変更リスト
• Chrome リリース カレンダー

登録

最新情報を入手するには、 Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます

Adriana Jara です。Chrome 119 がリリースされたらすぐに、 Chrome の新機能を紹介します