CSS の scripting メディア特性は、出力機器がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。
構文
update 特性は、以下の一覧のうち一つのキーワード値で指定します。
none- いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。
slow- 通常の CSS の規則によってレイアウトを動的に変更することができますが、出力機器はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い機器。
fast- レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力機器はふつう表示速度が制約されることがなく、 CSS アニメーションのような恒常的な更新を使用することができます。例: コンピューターの画面。
例
HTML
<p>このテキストが動いていれば、高速に更新できる機器を使用しています。</p>
CSS
@keyframes jiggle {
from {
transform: translateY(0);
}
to {
transform: translateY(25px);
}
}
@media (update: fast) {
p {
animation: 1s jiggle linear alternate infinite;
}
}
結果
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Media Queries Level 4 update の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。