Medienfunktionen

Ohne Media Queries wäre responsives Design nicht möglich. Vor Media Queries gab es keine Möglichkeit, herauszufinden, mit welchem Gerät Nutzer Ihre Website aufrufen. Designer mussten Annahmen treffen. Diese Annahmen wurden in Designs mit fester Breite oder in responsiven Layouts codiert.

Das hat sich mit der Einführung von Media Queries geändert. Zum ersten Mal konnten Designer den Nutzern entgegenkommen. Designer konnten ihre Layouts an die Geräte der Nutzer anpassen.

Eine Media-Anfrage besteht aus einem optionalen Medientyp und einer obligatorischen Media-Funktion. Bei den Medientypen hat sich im Laufe der Jahre nicht viel geändert. Es gibt weiterhin nur vier mögliche Werte:

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

Media-Funktionen wurden dagegen stark erweitert. Designer können jetzt mehr als nur die Bildschirmgröße berücksichtigen und Designs an die Bedürfnisse der Nutzer anpassen.

Abmessungen des Darstellungsbereichs

Die mit Abstand beliebtesten Media-Queries im Web sind diejenigen, die sich mit der Darstellungsbereichsbreite befassen. Aber auch hier haben Sie die Wahl. Mit der Media-Funktion max-width können Sie Stile unterhalb einer bestimmten Breite anwenden. Mit der Media-Funktion min-width können Sie Stile oberhalb 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 gerne min-width. Ich wende Layoutstile additiv an. Ich führe an jedem Breakpoint neue Layoutregeln ein, anstatt vorherige Regeln rückgängig zu machen.

Dieser additive Ansatz funktioniert auch für die Höhe. Mit min-height können Sie weitere Regeln einführen, wenn mehr Höhe im Viewport verfügbar ist. Sie haben beispielsweise ein Headerelement, 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 Media-Funktion max-height verwenden. Hier ist der Header standardmäßig fixiert, 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 den Präfixen min- und max- gilt nicht nur für width und height. Die Media-Funktion aspect-ratio bietet dieselbe Auswahl. Außerdem gibt es eine Version ohne Präfix, wenn Sie Stile mit einem genauen 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.
}

Verschiedene Stile für unterschiedliche Seitenverhältnisse anzubieten, könnte schnell unübersichtlich werden. Wenn Sie diese detaillierte Steuerung nicht benötigen, ist die orientation-Mediafunktion 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.
}

Die Begriffe „Hochformat“ und „Querformat“ werden zwar am häufigsten verwendet, um sich auf die Ausrichtung von Mobilgeräten zu beziehen, die Media-Funktion orientation ist jedoch nicht gerätespezifisch. Ein Vollbild-Browserfenster auf einem typischen Laptop hat einen orientation-Wert von landscape.

Displays

Die Pixeldichte von Displays wird in dpi (Dots per Inch) gemessen. Sie können Ihre Stile für verschiedene Pixeldichten mit dem Media-Feature resolution anpassen. Wie aspect-ratio ist resolution in drei Varianten verfügbar: „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-Media-Queries verwenden. Die Pixeldichte ist in der Regel nur bei Bildern ein Problem. Responsive Bilder sind eine Möglichkeit, die Pixeldichte direkt in HTML zu berücksichtigen.

In CSS definieren Sie hingegen Ihre Animationen und Übergänge. Mit der Media-Funktion update können Sie diese Animationen und Übergänge an unterschiedliche Aktualisierungsraten anpassen. Für diese Media-Funktion wird einer von drei Werten ausgegeben: none, slow und fast.

Ein update-Wert von none bedeutet, dass es keine Aktualisierungsrate gibt. Eine gedruckte Seite kann beispielsweise nicht aktualisiert werden.

Ein update-Wert von slow bedeutet, dass das Display 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 das Display schnell genug aktualisiert wird, um Animationen und Übergänge darzustellen.

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

Nicht alle Aspekte der Anzeige hängen mit den Hardwarefunktionen zusammen. Im Modul zum Theming haben Sie gesehen, wie Sie Attribute in einer Web-App-Manifestdatei definieren. Eine dieser Eigenschaften heißt display und kann die Werte fullscreen, standalone, minimum-ui oder browser haben. Mit der entsprechenden Media-Funktion display-mode können Sie Ihre Stile für diese verschiedenen Optionen anpassen.

Angenommen, Sie haben im Manifest Ihrer Web-App den display-Wert standalone angegeben. Wenn jemand Ihre Website auf seinem Startbildschirm hinzufügt, wird sie ohne Browserschnittstelle gestartet. Sie können diesen Nutzern eine Schaltfläche „Zurück“ anzeigen lassen.

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

Farbe

Es gibt zahlreiche Media-Funktionen zum Abfragen der Farbfunktionen eines Geräts. Wenn Sie Ihre Stile für ein Display anpassen möchten, das nur Graustufen ausgibt, können Sie das Media-Feature monochrome ohne Wert verwenden.

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

Es gibt eine entsprechende Media-Funktion color.

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

Für Farbbildschirme können Sie Abfragen mit den Media-Funktionen color-gamut, color-index oder dynamic-range schreiben. Alle enthalten spezifische Details zu den Farbfunktionen des Displays.

In diesem Beispiel werden die Farbwerte als Reaktion auf die Media-Funktion dynamic-range aktualisiert, die die Kombination aus maximaler Helligkeit, Farbtiefe und Kontrastverhältnis des Displays meldet. Die möglichen Werte sind standard und high. Ein hochauflösender Bildschirm, für den der dynamic-range-Wert high gemeldet wird, 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

Bei Media-Funktionen kann auch die Art des Eingabemechanismus angegeben werden, der für die Interaktion mit Ihrer Website verwendet wurde: hover, any-hover, pointer und any-pointer. Weitere Informationen finden Sie im Modul zur Interaktion.

Abfragen von Nutzereinstellungen

Mit CSS können Sie mit Ihren Nutzern zusammenarbeiten, damit sie auf Ihre Inhalte zugreifen können. In dieser Lektion haben Sie gelernt, wie Sie unterschiedliches CSS basierend auf den Abmessungen und Funktionen des Geräts des Nutzers anwenden. Sie können aber auch unterschiedliches CSS basierend auf den Einstellungen des Nutzers anwenden.

Dunkler und heller Modus

Sie können auf die Vorliebe des Nutzers für ein helles oder dunkles Design reagieren. Viele Nutzer legen dies als Systemeinstellung fest.

Farbschema für UI-Elemente festlegenx

Der Browser stellt Standardfarben für Elemente wie Scrollleisten und Formularelemente bereit. Sie können angeben, ob für Nutzer mit color-scheme: light ein helles Design oder für Nutzer mit color-scheme: dark ein dunkles Design verwendet werden soll. Sie können auch angeben, dass die Seite beides unterstützt, indem Sie color-scheme: light dark verwenden. Sie können das Schema für die gesamte Seite im :root- oder html-Element festlegen oder es für bestimmte Elemente überschreiben.

Sie können auch ein meta-Tag für color-scheme festlegen, um das Schema einer Seite festzulegen, bevor die Formatierungen geladen werden. Wenn Sie color-scheme: normal für ein Element auf der Seite festlegen, wird der color-scheme-Wert verwendet, den Sie in diesem Meta-Tag festgelegt haben.

<meta name="color-scheme" content="dark light">

prefers-color-scheme Mediafunktion

Sie können auch benutzerdefinierte Stile als Reaktion auf das bevorzugte Farbdesign eines Nutzers mit einer Media-Anfrage für prefers-color-scheme definieren.

light-dark

Wenn Sie Ihren Nutzern die Wahl zwischen einem hellen und einem dunklen Design geben, kann es umständlich sein, jede Farbe in einer Media-Anfrage festzulegen. Mit light-dark() können Sie beides in einer einzigen Property angeben.

Dazu müssen Sie color-scheme: light dark für das Element oder eines seiner übergeordneten Elemente festlegen. Zuerst legen Sie eine Farbe für den hellen Modus und dann eine Farbe für den dunklen Modus fest.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Wenn ein Nutzer in seinen Systemeinstellungen den hellen Modus angefordert hat, ist die Überschrift schwarz. Wenn der Nutzer den dunklen Modus bevorzugt, ist die Überschrift weiß.

Kontrasteinstellungen

Nutzer können Inhalte mit hohem oder niedrigem Kontrast möglicherweise besser lesen und ihr System so einrichten, dass Ihr Design durch das für sie am besten geeignete Design überschrieben wird. Ihre Aufgabe ist es, dafür zu sorgen, dass Ihre Website weiterhin gut mit den Einstellungen der Nutzer funktioniert.

Im Cascade-Modul haben Sie vielleicht schon gelernt, dass !important lokale Nutzerstile die vom Autor einer Webseite bereitgestellten Stile überschreiben können. So können Nutzer Stile verwenden, die für sie besser geeignet sind.

Erzwungene Farben

Windows bietet „Kontrastdesigns“, die Nutzer auswählen können und die die Designs auf einer Website überschreiben. Das sind oft kontrastreiche Designs, die im hellen oder dunklen Modus angezeigt werden können. In CSS wird dies als „forced colors“ bezeichnet. In den meisten Fällen verhält sich Ihre Website in diesem Modus wie erwartet. Für Schaltflächen, Links, Eingaben und andere Inhalte werden die Farben des Designs verwendet.

Gelegentlich müssen Sie Ihre Stile anpassen, z. B. wenn Sie Elemente auf nicht standardmäßige Weise verwenden. Mit der Media-Anfrage @media (forced-colors: active) können Sie Stile anwenden, wenn ein Nutzer die Option „Farben erzwingen“ aktiviert hat.

In einigen Fällen sind die Formatierungen einer Website für das Verständnis des Inhalts selbst unerlässlich, z. B. bei einer Farbauswahl oder einem Diagramm mit einer Farblegende. Sie können forced-color-adjust: none; für ein Element festlegen, um den Modus für erzwungene Farben zu deaktivieren. Achten Sie darauf, dass Sie die Funktion nur für bestimmte Elemente deaktivieren, und prüfen Sie, ob die Inhalte im Modus für erzwungene Farben weiterhin zugänglich sind.

Hoher Kontrast

Einige Nutzer können ihr System auch so einstellen, dass ein erhöhter Kontrast angefordert wird. Sie können Ihre Stile in der Antwort mit der Media-Anfrage prefers-contrast: more anpassen.

Weniger Bewegung

Sie können auf die Einstellung eines Nutzers für weniger Bewegung mit der Media-Anfrage prefers-reduced-motion reagieren. Dies wird häufig verwendet, um alternative Animationen bereitzustellen, bei denen große Bewegungen vermieden werden, die bei Menschen mit Epilepsie, vestibulären Bewegungsstörungen oder Migräneanfälligkeit Auslöser sein können. Weitere Informationen

Skripting

Nutzer können Ihre Website auch mit deaktiviertem JavaScript aufrufen. Sie können Ihr CSS so anpassen, dass sie mit der Medienabfrage scripting trotzdem auf Ihre Inhalte zugreifen können.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Wissen testen

Wissen über Media-Funktionen testen