このページは Cloud Translation API によって翻訳されました。

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