画面のリフレッシュ レート機能に合わせて UI を調整します。
CSS メディアクエリは、ウェブサイトやウェブアプリの表示環境を、その表示先のデバイスに基づいて制御できる便利なツールです。メディアクエリを使用すると、画面サイズ、向き、その他の要因に応じてさまざまなレイアウトを作成できます。
update メディアクエリを使用すると、デバイスのリフレッシュ レートに UI を適応させることができます。この機能は、さまざまなデバイスの機能に関連する fast、slow、または none の値を報告できます。
デバイスとリフレッシュ レート
設計するデバイスのほとんどは、高速リフレッシュ レートを搭載する傾向があります。これにはパソコンとほとんどのモバイル デバイスが含まれます。
デバイスにクエリを実行し、コンテンツのレンダリングでリフレッシュ レートが高いかどうかを確認し、それに応じてスタイル設定を行いながら単一のスタイルシートを提供できます。
@media (update: fast) {
/* computer screens, totally cool to animate */
}
電子書籍リーダーや、低電力決済システムなどのデバイスでは、リフレッシュ レートが遅くなることがあります。デバイスがアニメーションや頻繁な更新を処理できないことがわかれば、バッテリー使用量を節約したり、ビューの更新の失敗を防いだりできます。
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
最後に、印刷された紙や電子インク ディスプレイなど、1 つのレンダリング パスしか提供されないシナリオもあります。このような出力はまったく更新できないため、none と呼ばれます。次のようにしてクエリできます。
@media (update: none) {
/* one time render like printed paper */
}
次の CodePen では、この新しい更新メディアクエリを使用して、段階的に拡張されるホバー アニメーションが表示されています。