Weitere Media Features

Nicht nur Bildschirmbreite: das Ausgabemedium

@media kann auch nach dem Medientyp verzweigen - am häufigsten gebraucht: der Unterschied zwischen Bildschirm und Ausdruck.

@media print {
  nav, .btn { display: none; }  /* Navigation/Buttons braucht niemand auf Papier */
  body { color: black; font-size: 11pt; }
}

@media screen {
  body { font-size: 16px; }
}

Ausrichtung: `orientation`

@media (orientation: portrait) {
  .gallery { grid-template-columns: 1fr; }
}

@media (orientation: landscape) {
  .gallery { grid-template-columns: 1fr 1fr; }
}

portrait (hochkant) oder landscape (querformat) - unabhängig von der absoluten Breite in Pixeln. Praktisch für Tablets, die Nutzer*innen oft aktiv drehen.

Eingabegerät erkennen: `hover` und `pointer`

Nicht jedes Gerät hat eine Maus - ein Smartphone hat nur einen (ungenauen) Finger, kein :hover. CSS kann das erkennen:

/* Nur wenn das Gerät wirklich "hovern" kann (Maus) */
@media (hover: hover) {
  .card:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  }
}

/* Nur bei ungenauer Eingabe (Finger) - größere Klickflächen */
@media (pointer: coarse) {
  .btn {
    padding: 16px 24px;
  }
}

Feature	Werte	Bedeutung
`hover`	`hover` / `none`	Kann das Gerät ein Element “hovern”, ohne zu klicken?
`pointer`	`fine` / `coarse` / `none`	Wie präzise ist die primäre Eingabe? Maus = `fine`, Finger = `coarse`

Bewegung reduzieren: `prefers-reduced-motion`

Manche Nutzer*innen aktivieren in ihrem Betriebssystem “Bewegung reduzieren” - z.B. wegen Reisekrankheit-ähnlichen Symptomen (vestibuläre Störungen) durch große Animationen. CSS kann das respektieren:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Der bessere Ansatz: Statt Animationen komplett zu entfernen, oft besser nur reduzieren:

.card {
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition-duration: 0.01ms; /* praktisch sofort, aber kein hartes "none" */
  }
}

Weitere Präferenzen: Kontrast & Farbmodus

/* Nutzer*in hat in den Systemeinstellungen "hoher Kontrast" aktiviert */
@media (prefers-contrast: more) {
  body {
    --color-text: black;
    --color-bg: white;
    border-width: 2px; /* Ränder deutlicher sichtbar machen */
  }
}

/* Windows High-Contrast-Modus: eigenes, vom System erzwungenes Farbschema */
@media (forced-colors: active) {
  .btn {
    border: 1px solid; /* system-color statt eigener Farbe verwenden */
  }
}