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 を使用すると、長くて複雑なクラス名を書く必要がなくなり、大規模なプロジェクトの管理や名前の競合の回避が容易になります。

@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 の新機能についてお知らせします。