Chrome 118 の新機能

Adriana Jara

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

Adriana Jara です。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>

スコープなしでは、最後に宣言されたスタイルが適用されます。

@scope なし
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

2 つのリンク。1 つ目のリンクには「異なるピンク」と書いてある。2 つ目のリンクは「異なるピンク」で、リンクテキストの下には「ソースの順序の宣言」スタイル。

スコープを使用すると、要素をネストすることができ、適用されるスタイルは最も近い祖先のスタイルになります。

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

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

2 つのリンク。1 つ目のリンクには「異なるピンク」と書いてある。2 つ目のリンクはより濃いピンクで、リンクテキストに最も近い祖先スタイルの下に緑色のチェックマークがある。

また、Scope を使用すると、長く複雑なクラス名を記述する手間が省け、大規模なプロジェクトの管理も容易になり、名前の競合も回避できます。

@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 の表現で、1 番目と 3 番目の div の横に「対象の単語」、2 番目と 4 番目の 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 件のメディア機能

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

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

.translucent {
  opacity: 0.4;
}

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

どのように表示されるかは DevTools で確認できます。

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

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

DevTools の [ソース] パネルの改善

DevTools の [Sources] パネルでの改善点は次のとおりです。ワークスペース機能の整合性が改善されました。特に、[Sources] > [Filesystem] ペインの名前を、他の UI テキストと一緒に [Workspace] に変更したことで、[Sources] > [Workspace] で、DevTools で行った変更をソースファイルに直接同期できるようになりました。

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

プリティ プリントの前と後、投機ルール スクリプト タイプの構文のハイライト表示。

Chrome 118 DevTools の更新について詳しくは、DevTools の新機能をご覧ください。

など多数

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

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

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

  • Chrome のリリース サイクルが短縮され、3 週間後にリリースされる Chrome 119 より、安定版が 3 週間ごとにリリースされます。

関連情報

ここでは、重要なハイライトについてのみ説明します。Chrome 118 で追加される変更については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。

Chrome 119 のリリースと同時に Chrome の新機能をお知らせします