Chrome 118 の新機能

Adriana Jara 氏
Adriana Jara

フォーマットの詳細については次をご覧ください。

アドリアナ ジャラです。では、Chrome 118 のデベロッパー向けの新機能を詳しく見ていきましょう。

CSS の @scope ルール

@scope at ルールを使用すると、デベロッパーは、スタイルルールのスコープを指定のスコープ ルートに設定し、そのスコープ ルートの近さに応じて要素のスタイルを設定できます。

@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 つ目のリンクには「I&#39;m lightpink!」と書かれ、2 つ目のリンクには「異なるピンク」と書いてある。リンクのテキストの下にはソース順序の宣言スタイルと書かれている。リンクの下は実際には薄いピンク。

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

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

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

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

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

@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 の横に「scope」という単語が表示され、2 番目と 4 番目の div の横に「exclude」という単語が表示されます。

<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 のソースパネルの改善

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

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

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

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

など多数

もちろんこれだけではありません。

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

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

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

参考資料

ここでは、主なハイライトのみを取り上げます。Chrome 118 の追加の変更点については、以下のリンクをご覧ください。

チャンネル登録

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

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