Update frequency media query
update は CSS のメディア特性で、出力端末がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 113 | 113 | 102 | 17 | 113 | 17 | |
基本構文
CSS
@media (update: slow) {
* { animation: none !important; }
}
@media (update: none) {
.animated { display: none; }
}ライブデモ
実務での使いどころ
-
eインクデバイス対応
eインクディスプレイのような更新が遅いデバイスでアニメーションを無効化し、適切な静的表示を提供します。
注意点
- このメディアクエリは prefers-reduced-motion と目的が異なり、デバイスの能力に基づくものであり、ユーザーの好みに基づくものではありません。
アクセシビリティ
- アニメーションが表示できないデバイスのユーザーに対して、同等の情報を静的な方法で提供してください。