CSS によるメディアクエリの更新

画面のリフレッシュ レートの機能に合わせて UI を調整します。

Adam Argyle

CSS メディア クエリは、表示されるデバイスに基づいてウェブサイトやウェブアプリの外観を制御できる強力なツールです。メディアクエリを使用すると、画面サイズ、向き、その他の要素に応じて異なるレイアウトを作成できます。

update メディアクエリを使用すると、デバイスのリフレッシュ レートに合わせて UI を調整できます。この機能は、さまざまなデバイスの機能に関連する fast、slow、none の値を報告できます。

デバイスとリフレッシュ レート

設計対象のデバイスのほとんどは、リフレッシュ レートが速い傾向があります。これには、パソコンとほとんどのモバイル デバイスが含まれます。

デバイスにクエリを実行して、コンテンツのレンダリングに高速な更新レートがあるかどうかを確認し、1 つのスタイルシートを配信しながら、それに応じてスタイルを設定できます。

@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 では、この新しい更新メディアクエリを使用して、ホバー アニメーションが段階的に強化される様子を確認できます。

その他のリソース

• CSS メディアクエリ レベル 4
• MDN のメディアクエリを更新