CSS update Media Feature

What You’ll Learn

The update media feature detects how quickly a display can change content after rendering. Adapt animations and transitions for fast monitors, slow e-readers, and static print output.

Introduction

Not every screen updates at the same speed. Your laptop redraws content dozens of times per second. An e-reader’s e-ink display refreshes slowly and can ghost between frames. Printed paper cannot update at all once ink hits the page.

The CSS update media feature lets you detect that refresh capability and tailor animations, transitions, and hover effects accordingly.

Definition and Usage

Write @media (update: fast) before adding CSS animations on normal screens. Use @media (update: slow) to disable transitions on e-readers. Use @media (update: none) for static output where hover states never apply.

📝 Syntax

Use (update: value) inside @media:

/* Fast-updating screens (monitors, phones) */
@media (update: fast) {
  /* Animations and transitions OK */
}

/* Slow-updating displays (e-readers) */
@media (update: slow) {
  /* Disable animations, simplify hovers */
}

/* Static output (printed paper) */
@media (update: none) {
  /* Show static fallbacks */
}

Accepted Values

update vs @media rule

update vs prefers-reduced-motion

Basic Example

@keyframes bounce {
  50% { transform: translateY(-8px); }
}

@media (update: fast) {
  .badge {
    animation: bounce 1s ease-in-out infinite;
  }
}

Default Value

There is no CSS default. The matched value depends on the output device. Most desktops and phones report fast.

Syntax Rules

• Use parentheses: (update: fast) — not @media update alone.
• Boolean form: (update) matches fast or slow; not (update) matches none.
• Combine with OR: (update: slow), (hover: none) for e-readers or touch devices.
• Do not call update a CSS property — it is a media feature.
• Also respect prefers-reduced-motion alongside update queries.

Related Topics

• print — printed output media type
• hover — hover capability detection
• scan — progressive vs interlaced scanning

When to Use update

Reach for update when display refresh speed affects the user experience:

• CSS animations — Enable only on update: fast screens.
• E-readers — Disable transitions and hover effects on update: slow.
• Static output — Show link underlines and full details on update: none.
• Battery saving — Avoid unnecessary repaints on slow-updating devices.
• Progressive enhancement — Layer animations on top of static fallbacks.

Examples Gallery

Practice update with fast animations, slow transitions, static links, and combined queries.

@keyframes bounce {
  50% { transform: translateY(-8px); }
}

@media (update: fast) {
  .badge {
    animation: bounce 1s ease-in-out 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;
  }
}

.details {
  display: none;
}

@media (update: slow), (hover: none) {
  .details {
    display: block;
  }
}

🛠 Usage Tips

• Animate on fast — Wrap animations in @media (update: fast).
• Simplify on slow — Remove transitions and hover-dependent layouts.
• Static on none — Show all info upfront; no hover-only reveals.
• Pair with reduced-motion — Also check prefers-reduced-motion.
• Progressive enhancement — Base styles work everywhere; fast adds polish.

⚠️ Common Pitfalls

• Confusing with @media rule — update is a feature, not the whole media query system.
• Calling it a property — update is a media feature inside @media.
• Animations everywhere — Do not animate on slow e-ink without a fallback.
• Hover-only content — On update: none or slow, hover may never work.
• Ignoring user prefs — update: fast does not override prefers-reduced-motion.

♿ Accessibility

• No hover-only info — Reveal details on slow and touch devices automatically.
• Respect reduced motion — Combine update: fast with prefers-reduced-motion: no-preference.
• Readable static output — On update: none, ensure links and labels are always visible.
• E-reader comfort — Avoid flashing animations on update: slow displays.
• Progressive disclosure — Do not hide essential content behind fast-only animations.

💡 Best Practices

Related Topics