Media Features

Zuletzt aktualisiert am 15. Februar 2026

Media Features erkennen Systemeinstellungen und Geräte-Fähigkeiten deiner Nutzer. Statt nur auf Viewport-Breiten zu reagieren, kannst du Dark Mode aktivieren, Animationen für empfindliche Nutzer reduzieren oder Touch-optimierte Interfaces für Geräte ohne Maus anbieten. Das macht deine Website nicht nur responsiv, sondern wirklich anpassungsfähig.

Grundlagen

Media Features werden wie Width-Bedingungen in @media-Blöcken verwendet. Der entscheidende Unterschied: Sie fragen nicht die Viewport-Größe ab, sondern System- und Geräte-Einstellungen. Man unterscheidet zwei Gruppen:

Nutzer-Präferenzen reagieren auf Betriebssystem-Einstellungen wie Dark Mode, reduzierte Bewegung oder erhöhten Kontrast. Diese Features sind besonders wichtig für Barrierefreiheit, da sie die individuellen Bedürfnisse der Nutzer respektieren.

Geräte-Fähigkeiten erkennen, ob ein Gerät eine Maus hat (hover), wie präzise der Zeiger ist (pointer) oder ob der Bildschirm im Hoch- oder Querformat steht (orientation). Damit vermeidest du Hover-Effekte auf Touch-Geräten und passt Button-Größen an.

In JavaScript kannst du Media Features mit window.matchMedia() abfragen. Das ist nützlich, wenn du auf Änderungen reagieren musst (z.B. wenn der Nutzer den Dark Mode umschaltet).

Syntax & Werte

Nutzer-Präferenzen

Eingabe-Geräte

Orientierung

Beispiele

Dark Mode mit prefers-color-scheme

Custom Properties machen den Wechsel zwischen Light und Dark Mode einfach. Du definierst Farb-Variablen und überschreibst sie per Media Query.

:root {
  --bg: #ffffff;
  --text: #1e293b;
  --card-bg: #f8fafc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
    --card-bg: #1e293b;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

<div class="dark-demo">
<div class="card">
  <span class="badge">Automatisch</span>
  <h4>Dark Mode</h4>
  <p>Passt sich an deine Systemeinstellung an.</p>
</div>
</div>

prefers-reduced-motion

Nutzer mit Bewegungsempfindlichkeit können in ihrem Betriebssystem reduzierte Bewegung aktivieren. Respektiere diese Einstellung, indem du Animationen reduzierst oder entfernst.

.animated-element {
  animation: bounce 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
  }
}

<div class="motion-demo">
<div class="motion-box"></div>
<div class="motion-info">Animation wird bei reduzierten Bewegungen deaktiviert</div>
</div>

Hover-Effekte nur mit Maus

hover: hover erkennt, ob das Gerät eine Maus hat. Damit vermeidest du Hover-Effekte, die auf Touch-Geräten hängen bleiben.

.button {
  padding: 0.75rem 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Hover-Effekt nur wenn Maus vorhanden */
@media (hover: hover) {
  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

<div>
<div class="hover-demo">
  <button class="hover-btn">Hover mich</button>
  <button class="hover-btn">Button 2</button>
</div>
<div class="hover-info" style="text-align:center;font-size:11px;color:#64748b;">Hover-Effekt nur auf Geräten mit Maus</div>
</div>

Touch-optimierte Buttons

pointer: coarse erkennt ungenaue Zeiger wie Finger auf Touchscreens. Vergrößere interaktive Elemente für bessere Bedienbarkeit.

.menu-item {
  padding: 0.5rem 0.75rem;
}

/* Größere Touch-Targets auf Touch-Geräten */
@media (pointer: coarse) {
  .menu-item {
    padding: 0.875rem 1rem;
    min-height: 44px;
  }
}

<div class="touch-demo">
<ul class="touch-list">
  <li class="touch-item">Menüpunkt 1</li>
  <li class="touch-item">Menüpunkt 2</li>
  <li class="touch-item">Menüpunkt 3</li>
</ul>
<div class="touch-label">Größere Targets auf Touch-Geräten</div>
</div>

Orientation: Portrait vs. Landscape

orientation erkennt, ob der Viewport höher als breit (portrait) oder breiter als hoch (landscape) ist.

/* Hochformat: volle Breite, gestapelt */
@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* Querformat: nebeneinander */
@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="orient-demo">
<div class="orient-box orient-portrait">
  <h4>Portrait</h4>
  <p>Höher als breit</p>
</div>
<div class="orient-box orient-landscape">
  <h4>Landscape</h4>
  <p>Breiter als hoch</p>
</div>
</div>

Barrierefreiheit

prefers-reduced-motion ist Pflicht für barrierefreie Websites (WCAG 2.3.3). Nutzer mit vestibulären Störungen können durch Animationen Übelkeit, Schwindel oder Kopfschmerzen bekommen. Biete immer eine reduzierte Alternative an, entferne aber nicht alle Animationen komplett, sondern reduziere sie auf dezente Übergänge wie opacity.

prefers-contrast: more hilft Nutzern mit Sehbehinderungen. Erhöhe Kontraste, verstärke Rahmen und vermeide halbtransparente Farben. Das WCAG-Minimum-Kontrastverhältnis von 4.5:1 für Text sollte immer eingehalten werden, bei prefers-contrast: more solltest du noch höher gehen.

Vergiss nicht hover: none: Touch-Nutzer können nicht hovern. Informationen, die nur per Hover sichtbar werden (Tooltips, Dropdown-Menüs), müssen auf Touch-Geräten über Tap oder andere Interaktionen erreichbar sein.

Häufige Fehler

• prefers-reduced-motion ignorieren. Animationen können für manche Nutzer gesundheitliche Probleme verursachen. Jede nicht-essentielle Animation sollte per prefers-reduced-motion: reduce deaktivierbar sein.
• Dark Mode aktivieren, aber Text-Kontraste nicht prüfen. Ein dunkler Hintergrund mit dunkelgrauem Text ist schwer lesbar. Teste die Kontrastverhältnisse mit den DevTools.
• Das Media Feature hover mit der CSS-Pseudoklasse :hover verwechseln. @media (hover: hover) prüft die Geräte-Fähigkeit, :hover ist der Zustand. Beides zusammen nutzen: Hover-Effekte nur einschalten, wenn das Gerät sie unterstützt.
• Animationen bei prefers-reduced-motion komplett entfernen statt reduzieren. opacity-Übergänge und dezente Farbwechsel sind auch bei reduzierter Bewegung vertretbar, nur Verschiebungen, Skalierungen und komplexe Animationen sollten entfallen.

Browser-Kompatibilität

Die wichtigsten Media Features werden von allen modernen Browsern unterstützt. prefers-contrast hat in älteren Browsern eingeschränkten Support.

Email-Kompatibilität

Media Features werden in E-Mail-Clients praktisch nicht unterstützt. Nur prefers-color-scheme hat vereinzelt rudimentären Support.

Verwandte Eigenschaften