Media Features

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.

Steckbrief Media Features

Syntax: @media (prefers-color-scheme: dark) { ... }
Initialwert: N/A (Media Feature)
Vererbt: Nein
Animierbar: Nein

Kategorie: Responsive Design
Werte: 7
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

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

7 Werte

Nutzer-Präferenzen

Wert	Beschreibung	Beispiel
`prefers-color-scheme: light \| dark`	Erkennt, ob der Nutzer helles oder dunkles Farbschema bevorzugt.	@media (prefers-color-scheme: dark) { ... }
`prefers-reduced-motion: reduce \| no-preference`	Erkennt, ob der Nutzer reduzierte Bewegung wünscht. Pflicht für WCAG.	@media (prefers-reduced-motion: reduce) { ... }
`prefers-contrast: more \| less \| no-preference`	Erkennt, ob der Nutzer erhöhten oder verringerten Kontrast bevorzugt.	@media (prefers-contrast: more) { ... }

Eingabe-Geräte

Wert	Beschreibung	Beispiel
`hover: hover \| none`	Erkennt, ob das primäre Eingabegerät Hover unterstützt (Maus: hover, Touch: none).	@media (hover: hover) { ... }
`pointer: fine \| coarse \| none`	Erkennt die Zeiger-Präzision. fine = Maus, coarse = Finger/Touch, none = kein Zeiger.	@media (pointer: coarse) { ... }

Orientierung

Wert	Beschreibung	Beispiel
`orientation: portrait`	Viewport ist höher als breit (typisch: Smartphone hochkant).	@media (orientation: portrait) { ... }
`orientation: landscape`	Viewport ist breiter als hoch (typisch: Querformat, Desktop).	@media (orientation: landscape) { ... }

Beispiele

5 Beispiele

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

Dark Mode mit Custom Properties

: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>

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

prefers-reduced-motion

.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: hover erkennt, ob das Gerät eine Maus hat. Damit vermeidest du Hover-Effekte, die auf Touch-Geräten hängen bleiben.

Hover-Effekte nur mit Maus

.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>

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

Touch-optimierte Buttons

.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 erkennt, ob der Viewport höher als breit (portrait) oder breiter als hoch (landscape) ist.

Portrait vs. Landscape

/* 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

4 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

prefers-color-scheme teilweise unterstützt
Gmail

Keine

Kein Support für Media Features
Outlook

Keine

Kein Support für Media Features
Thunderbird

Teilweise

prefers-color-scheme teilweise unterstützt
Yahoo Mail

Keine

Kein Support für Media Features

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da