CSS 媒體特性 - 更新

CSS update 媒體特性有助於檢查裝置在內容顯示後更改內容外觀的頻率。

可能的值

none − 顯示不更新。此值通常用於列印文件。
slow − 顯示重新整理率低。這在電子書閱讀器或非常慢的裝置上很常見。
fast − 顯示重新整理率高。這允許使用定期更新的元素，例如 CSS 動畫，這在計算機螢幕上很常見。

語法

update: none|slow|fast;

CSS update - none 值

以下示例演示瞭如何使用 update: none 媒體特性在輸出裝置的更新頻率為 none 時將動畫應用於 body 元素。此動畫在普通螢幕上不可見，但在您在列印頁面等內容上檢視時會產生效果。−

<html>
<head>
<style>
   body {
      color: black;
   }
   @media (update: none) {
      body {
         animation: animation 1s infinite;
         color: red;
      }
   }
   @keyframes animation {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100px);
      }
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <p>CSS Media feature update: none</p>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS update - slow 值

如果您使用 update: slow 媒體特性，您應該會看到文字內容在顯示更新緩慢的裝置上向右移動並變成紅色。這包括低功耗裝置和電子墨水顯示器等裝置。

這是一個示例：−

<html>
<head>
<style>
   body {
      color: black;
   }
   @media (update: slow) {
      body {
         animation: animation 1s infinite;
         color: red;
      }
   }
   @keyframes animation {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100px);
      }
   }
</style>
</head>
<body>
   <h3>You can see the effect of the update: slow media query on low-powered devices and e-ink displays.</h3>
   <p>CSS Media feature update: slow</p>
</body>
</html>

CSS update - fast 值

以下示例演示了 update: fast 媒體特性將導致 body 元素在 1 秒內向右移動 100 畫素，然後返回左側。−

<html>
<head>
<style>
   body {
      color: black;
   }
   @media (update: fast) {
      body {
         animation: animation 1s infinite;
         color: red;
      }
   }
   @keyframes animation {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100px);
      }
   }
</style>
</head>
<body>
   <p>CSS Media feature update: fast</p>
</body>
</html>

列印頁面