update
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
構文
update
特性は、以下の一覧のうち一つのキーワード値で指定します。
none
-
いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。
slow
-
通常の CSS の規則によってレイアウトを動的に変更することができますが、出力端末はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い端末。
fast
-
レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力端末はふつう表示速度が制約されることがなく、 CSS アニメーションのような恒常的な更新を使用することができます。例: コンピューターの画面。
例
HTML
html
<p>このテキストが動いていれば、高速に更新できる端末を使用しています。</p>
CSS
css
@keyframes jiggle {
from {
transform: translateY(0);
}
to {
transform: translateY(25px);
}
}
@media (update: fast) {
p {
animation: 1s jiggle linear alternate infinite;
}
}
結果
仕様書
Specification |
---|
Media Queries Level 4 # update |
ブラウザーの互換性
BCD tables only load in the browser