CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました
Post on:2023年5月9日
sponsors
2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。
新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。
下記は各ポイントを意訳したものです。
※元サイト様のライセンスの元、翻訳しています。
はじめに
CSSのメディアクエリは、Webサイトやアプリを表示されているデバイスに基づいて外観をコントロールできる強力なツールです。メディアクエリを使用すると、さまざまなスクリーンサイズや向きなどに対してレイアウトを最適化できます。
updateクエリは、デバイスのリフレッシュレートに適応することができます。この機能はさまざまなデバイスの機能に関連するfast, slow, noneのキーワードを値として使用できます。
fast- 通常のコンピュータやスマホなど
slow- 電子書籍リーダーなど
none- 紙に印刷されるドキュメントなど
詳しくは、Media Queries Level 4をご覧ください。
updateクエリは、先日リリースされたChrome 113をはじめ、Edge, Firefoxでサポートされています。
「update」クエリの基礎知識
わたし達が制作するデバイスのほとんどは、リフレッシュレートがfastだと思います。このfastには、デスクトップやほとんどのスマホデバイスが含まれます。
デバイスにクエリを実行し、コンテンツをレンダリングするためのリフレッシュレートが速いかどうかを確認し、それに応じたスタイルを設定することができます。
|
1 2 3 |
@media (update: fast) { /* 通常のコンピュータのスクリーン、アニメーションはクールに動作します */ } |
slowクエリは、電子書籍リーダーや低電力決済システムなどのリフレッシュレートが遅いデバイス向けです。デバイスがアニメーションや頻繁な更新に対応できないことを知ることは、バッテリーの使用やビューの更新の失敗を防ぐことができることを意味します。
|
1 2 3 |
@media (update: slow) { /* 電子書籍リーダーや低電力のデバイス */ } |
noneクエリは、印刷された紙や電子インクのディスプレイのように1回のレンダリングパスしか提供できないデバイス向けです。これらの出力はリフレッシュがまったくできないので、noneと呼ばれます。
|
1 2 3 |
@media (update: none) { /* 印刷された紙のように1回だけレンダリングするデバイス */ } |
新しいメディアクエリ「update」を使用したデモ
この新しいメディアクエリupdateを使用して、段階的に強化されたホバーアニメーションのデモをご覧ください。
See the Pen
CSS update Media Query Demo by web.dev (@web-dot-dev)
on CodePen.
リソース
sponsors
