update

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
update media featureChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

未対応  
未対応