CSSscripting メディア特性は、出力機器がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。

構文

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 の定義
勧告候補 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし ? なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? ? ? ? ? ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,