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 つは「I&#39;m lightpink!」、もう 1 つは「Different pink」）が表示されます。どちらのリンクも実際には薄いピンク色で、リンクの下には「sources order declaration style」というテキストが表示されます。

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

@scope を使用
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

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

2 つのリンク。最初のリンクには「I&#39;m lightpink!」とあり、2 番目のリンクには「Different pink」とあります。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 つ目の div と 3 つ目の div の横に、除外された単語は 2 つ目の div と 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 アットルールを使用してセレクタの範囲を制限するをご覧ください。

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 の [ソース] パネルが次のように改善されました。ワークスペース機能の整合性が改善されました。特に、[ソース] > [ファイルシステム] ペインの名前を [ワークスペース] に変更し、他の UI テキストも変更しました。また、[ソース] > [ワークスペース] で、DevTools で行った変更をソースファイルに直接同期できるようになりました。

また、ソース パネルの左側のパネルをドラッグ＆ドロップして並べ替えられるようになりました。また、ソース パネルで、module、importmap、speculationrules の各スクリプト タイプ内のインライン JavaScript を美しく表示できるようになりました。また、importmap と speculationrules のスクリプト タイプの構文をハイライト表示できます。どちらも JSON を保持します。

推測ルール スクリプト型の美しい出力と構文ハイライトの前後。

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

その他

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

関連情報

主なハイライトのみを記載しています。Chrome 118 のその他の変更については、以下のリンクをご覧ください。

登録

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

Adriana Jara と申します。Chrome 119 がリリースされ次第、Chrome の新機能についてお知らせします。