Medienfunktionen

Hier findest du eine Übersicht über alle Möglichkeiten, wie du mithilfe von Medienfunktionen auf Geräte und Einstellungen reagieren kannst.

Ohne Medienabfragen wäre responsives Webdesign nicht möglich. Vor Media Queries gab es keine Möglichkeit zu erfahren, mit welchem Gerät Nutzer Ihre Website besucht haben. Die Designer mussten Annahmen treffen. Diese Annahmen wurden in Designs mit fester Breite oder in Liquid-Layouts codiert.

Das hat sich mit der Einführung von Medienabfragen geändert. Zum ersten Mal konnten Designer den Nutzern entgegenkommen. Designer könnten ihre Layouts so anpassen, dass sie auf die Geräte der Nutzer reagieren.

Eine Medienabfrage besteht aus einem optionalen Medientyp und einer obligatorischen Medienfunktion. Die Medientypen haben sich im Laufe der Jahre nicht wesentlich verändert. Es gibt weiterhin nur vier mögliche Werte:

@media all
@media screen
@media print
@media speech

Die Medienfunktionen wurden hingegen stark erweitert. Designer können jetzt mehr für Nutzer tun, indem sie Designs nicht nur an die Bildschirmgröße anpassen.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Darstellungsbereichsabmessungen

Die mit Abstand beliebtesten Medienabfragen im Web beziehen sich auf die Darstellungsfensterbreite. Aber auch hier haben Sie die Wahl. Mit der Medienfunktion max-width können Sie Stile unter einer bestimmten Breite anwenden. Mit der Medienfunktion min-width können Sie Stile über einer bestimmten Breite anwenden.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}
@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Ich persönlich verwende min-width. Ich wende Layoutstile additiv an. Ich füge an jedem Wendepunkt neue Layoutregeln hinzu, anstatt die vorherigen Regeln rückgängig zu machen.

Dieser additive Ansatz funktioniert auch für die Höhe. Mit min-height können Sie weitere Regeln hinzufügen, sobald mehr Viewport-Höhe verfügbar ist. Angenommen, Sie haben ein Kopfzeilenelement, das Sie oben im Browserfenster verankern möchten, wenn genügend vertikaler Platz vorhanden ist.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Sie können aber auch die Medienfunktion max-height verwenden. Hier ist die Überschrift standardmäßig verankert, aber die Fixierung wird aufgehoben, wenn nicht genügend vertikaler Platz vorhanden ist.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Die Wahl zwischen den Präfixen min- und max- gilt nicht nur für width und height. Die Medienfunktion aspect-ratio bietet dieselben Optionen. Es gibt auch eine Version ohne Präfix, wenn Sie Stile mit einem genauen Seitenverhältnis anwenden möchten.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Unterschiedliche Stile für verschiedene Seitenverhältnisse zu erstellen, kann schnell unübersichtlich werden. Wenn Sie diese detaillierte Steuerung nicht benötigen, ist die Medienfunktion orientation möglicherweise besser für Sie geeignet. Es gibt zwei mögliche Werte: portrait oder landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Auch wenn die Begriffe „Hochformat“ und „Querformat“ am häufigsten für die Ausrichtung von Mobilgeräten verwendet werden, ist die orientation-Medienfunktion nicht gerätespezifisch. Ein Browserfenster im Vollbildmodus auf einem typischen Laptop hat einen orientation-Wert von landscape.

Displays

Unterschiedliche Displays haben unterschiedliche Pixeldichten, die in dpi (Punkte pro Zoll) gemessen werden. Mit der Medienfunktion resolution können Sie Ihre Stile für verschiedene Pixeldichten anpassen. Wie aspect-ratio gibt es auch resolution in drei Varianten: Minimum, Maximum und Genau.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Möglicherweise müssen Sie nie resolution-Medienabfragen verwenden. Die Pixeldichte ist in der Regel nur bei Bildern ein Problem. Responsive Bilder sind eine Möglichkeit, die Pixeldichte direkt in HTML zu steuern.

In CSS hingegen definieren Sie Ihre Animationen und Übergänge. Mit der Medienfunktion update können Sie diese Animationen und Übergänge so anpassen, dass sie auf unterschiedliche Bildwiederholraten reagieren. Für diese Medienfunktion wird einer der drei Werte none, slow oder fast erfasst.

Ein Wert von none für update bedeutet, dass keine Aktualisierungsrate festgelegt ist. Eine gedruckte Seite kann beispielsweise nicht aktualisiert werden.

Ein Wert von slow für update bedeutet, dass das Display nicht schnell genug aktualisiert werden kann. Ein E-Ink-Display ist ein Beispiel für einen Bildschirm mit einer langsamen Bildwiederholrate.

Ein Wert von update = fast bedeutet, dass das Display schnell genug aktualisiert wird, um Animationen und Übergänge zu verarbeiten.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Nicht alle Aspekte des Displays hängen mit den Hardwarefunktionen zusammen. Im Modul zum Thema Design haben Sie gelernt, wie Sie Attribute in einer Manifestdatei für Web-Apps definieren. Eine dieser Properties heißt display und kann den Wert fullscreen, standalone, minimum-ui oder browser haben. Mit der entsprechenden display-mode-Medienfunktion können Sie Ihre Stile an diese verschiedenen Optionen anpassen.

Angenommen, Sie haben in Ihrem Webanwendungsmanifest den Wert „standalone“ für display angegeben. Wenn jemand Ihre Website auf seinem Startbildschirm hinzufügt, wird sie ohne Browseroberfläche geöffnet. Sie können für diese Nutzer eine Schaltfläche „Zurück“ anzeigen lassen.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Farbe

Es gibt zahlreiche Medienfunktionen, mit denen die Farbfunktionen eines Geräts abgefragt werden können. Wenn Sie Ihre Stile für Displays anpassen möchten, die nur Graustufen ausgeben, können Sie die Medienfunktion monochrome ohne Wert verwenden.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Es gibt eine entsprechende color-Medienfunktion.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Für Farbbildschirme können Sie Abfragen mit den Medienfunktionen color-gamut, color-index oder dynamic-range schreiben. Alle geben spezifische Details zu den Farbfunktionen des Bildschirms an.

In diesem Beispiel werden die Farbwerte als Reaktion auf die Medienfunktion dynamic-range aktualisiert, die die Kombination aus maximaler Helligkeit, Farbtiefe und Kontrastverhältnis des Displays meldet. Mögliche Werte sind standard und high. Ein High-Definition-Bildschirm mit dem dynamic-range-Wert high erhält mit der neuen CSS-Funktion color() einen anderen Farbraum.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Interaktion

Medienfunktionen können auch die Art des Eingabemechanismus melden, mit dem Nutzer mit Ihrer Website interagieren: hover, any-hover, pointer und any-pointer. Weitere Informationen finden Sie im Modul zur Interaktion.

Einstellungen

Es gibt eine Reihe von Mediaabfragen, mit denen Sie auf die Einstellungen der Nutzer reagieren können: prefers-color-scheme, prefers-contrast und prefers-reduced-motion. Weitere Informationen finden Sie in den Modulen zu Designthemen und Barrierefreiheit.

Sie können Medienfunktionen in einer Medienabfrage kombinieren. Sie können Ihre Animationsstile so festlegen, dass sie nur angewendet werden, wenn das Gerät eine hohe Bildwiederholrate hat und der Nutzer keine reduzierte Bewegung bevorzugt.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Weitere Medienfunktionen

Weitere Medienfunktionen sind in Planung.

Die Medienfunktionen forced-colors und inverted-colors geben an, ob auf einem Gerät eine eingeschränkte oder eine invertierte Farbpalette verwendet wird.

Mit einer scripting-Medienfunktion können Sie Ihr CSS anhand der Verfügbarkeit von JavaScript anpassen.

Mit einer Medienfunktion namens prefers-reduced-data können Nutzer angeben, dass sie eine getaktete Verbindung haben, damit du kleinere oder weniger Assets senden kannst.

Andere Vorschläge werden noch formuliert. Im nächsten und letzten Modul erfahren Sie mehr über einen Vorschlag für eine Medienfunktion, die verschiedene Bildschirmkonfigurationen unterstützt.

Wissen testen

Ihr Wissen über Medienfunktionen testen

Kann eine Medienabfrage nach einem Gerät mit einer bestimmten Breite wie @media (width: 1024px) suchen?

Richtig
Eine bestimmte Breite kann nur erreicht werden, wenn gleichzeitig nach einer Breite über 1023px und unter 1025px gesucht wird.
Falsch
min-width und max-width sind verfügbar.

Kann eine Medienabfrage nach einem Gerät an einer bestimmten aspect-ratio wie @media (aspect-ratio: 4/3) suchen?

Richtig
Im Gegensatz zu anderen Formaten kann nur ein Seitenverhältnis ausgewählt werden.
Falsch
Diese Option ist für aspect-ratio verfügbar.

Welche Medienabfragen für Farben sind gültig?

@media (color)
Passt zu jedem farbigen Gerät.
@media (monochrome)
Entspricht jedem Gerät ohne Farbfunktion.
@media (color-gamut: srgb)
Passt zu Geräten mit sRGB-Farbunterstützung.
@media (min-color-index: 15000)
Passt zu Geräten mit mindestens 15.000 verfügbaren Farben.
@media (dynamic-range: high)
Passt zu Geräten mit HD-Farbbereichen.

Welche der folgenden Medienabfragen für Nutzereinstellungen sind gültig?

@media (prefers-color-scheme: dark)
Wird ausgelöst, wenn das Betriebssystem des Nutzers auf den dunklen Modus eingestellt ist.
@media (prefers-colors: high-definition)
Nicht echt.
@media (prefers-reduced-motion: reduce)
Wird ausgelöst, wenn ein Nutzer sein Betriebssystem so eingestellt hat, dass Bewegungen reduziert werden.
@media (prefers-contrast: more)
Wird verwendet, wenn ein Nutzer sein Betriebssystem auf einen höheren Kontrast eingestellt hat.
@media (prefers-site-speed: fast)
Nicht echt.