CSS update Media Feature

Definition and Usage

The update media feature tests how frequently (if at all) the output device can change content after it is rendered.

Use it to allow smooth animations on fast screens, drop motion on slow devices (such as e-readers), and keep static styles when the output is none (such as printed paper).

CSS Syntax

Always wrap the feature in parentheses. Invalid forms like @media update(fast) do not work.

Feature Values

How to Use update

Keep a calm default, then enhance only when the device can keep up.

1. Style the page without relying on animation.
2. Add motion only inside @media (update: fast).
3. Disable transitions inside @media (update: slow).
4. Use static cues for update: none (and often print).

Live Preview

Real @media (update: …) rules style this sample. On most desktops and phones you should see fast and a gentle bounce. Recheck reports matchMedia results.

CSS Examples

Each snippet focuses on update. Use Try It Yourself for a live editor.

@keyframes jiggle {
  from { transform: translateY(0); }
  to { transform: translateY(8px); }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}

.card {
  transition: background 0.3s ease;
}

@media (update: slow) {
  .card {
    transition: none;
    background: #fef3c7;
  }
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media (update: none) {
  a {
    text-decoration: underline;
  }
}

Key Takeaways