必知事項は次のとおりです。
@scope
CSS ルールを使用して、コンポーネント内の特定のスタイルを宣言します。- 新しいメディア機能
prefers-reduced-transparency
が追加されました。 DevTools の [ソース] パネルが改善されました。
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>
スコープなしでは、最後に宣言されたスタイルが適用されます。
.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
です。これによりデベロッパーは、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 DevTools の新機能(118)
- Chrome 118 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 118)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 119 のリリースと同時に Chrome の新機能をお知らせします