Medienfunktionen

Eine Zusammenfassung aller Möglichkeiten, wie du mit Medienfunktionen auf Geräte und Einstellungen.

Responsives Webdesign wäre ohne Medienabfragen nicht möglich. Vor Medienabfragen konnten wir nicht herausfinden, mit welcher Art von Gerät die Nutzer Ihre Website besucht haben. Designschaffende mussten Annahmen treffen. Diese Annahmen wurden in Designs mit fester Breite oder in flüssige Layouts codiert.

Das änderte sich mit der Einführung von Medienabfragen. Zum ersten Mal konnten Designschaffende Menschen auf halber Strecke treffen. Designschaffende könnten ihre Layouts an die Geräte der Nutzer anpassen.

Eine Medienabfrage umfasst einen optionalen Medientyp und eine obligatorische Medienfunktion. Die Medientypen haben sich in den letzten Jahren kaum verändert. Es gibt immer noch vier mögliche Werte:

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

Medienfunktionen wurden hingegen stark erweitert. Designschaffende können Nutzende jetzt mehr als zur Hälfte kennenlernen und Designs an weit mehr als nur eine Bildschirmgröße anpassen.

Dimensionen des Darstellungsbereichs

Die bei Weitem beliebtesten Medienabfragen im Web sind diejenigen, die sich auf die Breite des Darstellungsbereichs beziehen. Aber auch hier haben Sie die Wahl. Mit der Medienfunktion max-width können Sie Stile unter einer bestimmten Breite oder mit der Medienfunktion min-width Stile über eine bestimmte 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 nutze min-width gerne. Ich wende Layoutstile additiv an. Ich führe an jedem Haltepunkt neue Layoutregeln ein, anstatt vorherige Regeln rückgängig zu machen.

Dieser additive Ansatz eignet sich auch für die Höhe. Mit min-height können Sie weitere Regeln einführen, sobald mehr Höhe des Darstellungsbereichs verfügbar ist. Angenommen, Sie haben ein Kopfzeilenelement, das Sie oben im Browserfenster verankern möchten, wenn es genügend vertikalen Platz gibt.

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

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

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

Die Auswahl zwischen Präfixen min- und max- gilt nicht nur für width und height. Diese Option bietet die Medienfunktion aspect-ratio. Sie bietet auch eine Version ohne Präfix, wenn Sie Stile mit einem exakten Verhältnis von Breite zu Höhe 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.
}

Die Bereitstellung verschiedener Stile für unterschiedliche Seitenverhältnisse könnte schnell aus dem Ruder geraten. Wenn Sie diese Einstellung 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" werden am häufigsten verwendet, um sich auf die Ausrichtung von Mobilgeräten zu beziehen. Die Medienfunktion orientation ist nicht gerätespezifisch. Ein Vollbild-Browserfenster auf einem typischen Laptop hat den orientation-Wert landscape.

Displays

Verschiedene Displays haben unterschiedliche Pixeldichten, gemessen in dpi (Punkte pro Zoll). Mit der Medienfunktion resolution können Sie die Stile für verschiedene Pixeldichten anpassen. Wie bei aspect-ratio gibt es auch für resolution drei Varianten: minimal, maximal 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.
}

Sie müssen möglicherweise nie resolution-Medienabfragen verwenden. Die Pixeldichte stellt normalerweise nur ein Problem bei Bildern dar. Mit responsiven Bildern kann die Pixeldichte direkt in HTML verarbeitet werden.

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 Aktualisierungsraten reagieren. Diese Medienfunktion meldet einen von drei Werten: none, slow und fast.

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

Der Wert für update slow bedeutet, dass die Anzeige nicht schnell aktualisiert werden kann. Ein E-Ink-Display ist ein Beispiel für einen Bildschirm mit einer langsamen Aktualisierungsrate.

Ein update-Wert von fast bedeutet, dass die Anzeige 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 beziehen sich auf die Hardwarefunktionen. Im Modul zu Designs haben Sie gesehen, wie Properties in einer Web-App-Manifestdatei definiert werden. Eines dieser Attribute heißt display und Sie können ihm den Wert fullscreen, standalone, minimum-ui oder browser zuweisen. Mit der entsprechenden Medienfunktion display-mode können Sie Ihre Designs an diese Optionen anpassen.

Angenommen, Sie haben in Ihrem Web-App-Manifest den display-Wert standalone angegeben. Wenn ein Nutzer Ihre Website zu seinem Startbildschirm hinzufügt, wird sie ohne Browseroberfläche gestartet. Sie könnten sich dafür entscheiden, diesen Nutzenden eine Zurück-Schaltfläche anzuzeigen.

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

Farbe

Es gibt zahlreiche Medienfunktionen für die Abfrage der Farbfunktionen eines Geräts. Wenn Sie Ihre Stile für eine Anzeige anpassen möchten, die nur Grautöne ausgibt, können Sie die Medienfunktion monochrome ohne Wert verwenden.

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

Es gibt eine entsprechende Medienfunktion color.

@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 Berichte enthalten spezifische Details zu den Farbfunktionen des Bildschirms.

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 angibt. Mögliche Werte sind standard und high. Ein HD-Bildschirm, der den dynamic-range-Wert high anzeigt, erhält mithilfe 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 erfassen, der für die Interaktion mit Ihrer Website verwendet wird: hover, any-hover, pointer und any-pointer. Weitere Informationen erhalten Sie im Modul zur Interaktion.

Einstellungen

Es gibt eine Reihe von Medienabfragen, mit denen Sie auf Nutzereinstellungen reagieren können: prefers-color-scheme, prefers-contrast und prefers-reduced-motion. Weitere Informationen finden Sie in den Modulen Design 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 schnelle Aktualisierungsrate hat und der Nutzer keine Bewegungselemente 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

Wir arbeiten daran, weitere Medienfunktionen hinzuzufügen.

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

Mit einer Medienfunktion von scripting können Sie Ihr CSS an die Verfügbarkeit von JavaScript anpassen.

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

Weitere Vorschläge sind noch in der Entwicklung. Im nächsten und letzten Modul geht es um ein Angebot für eine Medienfunktion, die unterschiedliche Bildschirmkonfigurationen unterstützt.

Wissen testen

Testen Sie Ihr Wissen über Medienfunktionen