So verwenden Sie CSS-Medienabfragen: Eine vollständige Anleitung für Anfänger

Inhaltsverzeichnis:

• Die Syntax von CSS-Medienabfragen #
• Medientypen in CSS-Medienabfragen definieren #
• Modifikatoren für Medienabfragen (logische Operatoren) #
• Gemeinsame Medienfunktionen für CSS-Medienabfragen #
• Weniger gebräuchliche Medienfunktionen für CSS-Medienabfragen #
• Medienfunktionen aus CSS-Medienabfragen Stufe 5 #
• Nicht standardmäßige Medienfunktionen #
• Best Practices für CSS-Medienabfragen #

So verwenden Sie CSS-Medienabfragen: die Syntax

Bevor ich zu den verschiedenen Medienfunktionen selbst komme, wollen wir die grundlegende Syntax für eine CSS-Medienabfrage behandeln. Eine Medienabfrage sieht so aus:

 @media screen and ( min-width: 900px ) { article { padding : 1rem 3rem ; } }
 Codesprache: CSS ( css )

Um Ihnen beim Aufschlüsseln der einzelnen Teile zu helfen, finden Sie hier ein praktisches Bild, das alle Teile einer typischen CSS-Medienabfrage identifiziert:

Und hier ist eine Zusammenfassung zusammen mit weiteren Details zu dem, was auf dem Bild zu sehen ist:

• @media – Die CSS-at-Regel, die angibt, dass Sie eine Medienabfrage schreiben
• screen – Einer der verfügbaren Medientypen, um zu identifizieren, auf welche Geräte die Medienabfrage abzielen soll. Dies ist optional, wenn Sie die Not- und only -Operatoren not verwenden.
• and – Ein Modifikator für Medienabfragen, auch logischer Operator genannt, der Ihnen hilft, bestimmte Geräte und Medienfunktionen bedingt anzusprechen.
• (min-width: 900px) , die verfügbar sind, um auf bestimmte Gerätegrößen, Gerätetypen, Gerätefunktionen usw. abzuzielen.
• article { ... } – Die Selektoren und CSS-Regeln, verschachtelt in öffnenden und schließenden geschweiften Klammern, die angeben, welche CSS-Regeln Sie auf Ihre Medienabfragen anwenden möchten.

Sie können beliebig viel CSS in die öffnenden und schließenden geschweiften Klammern der Medienabfrage einfügen, solange das CSS korrekt formatiert ist, damit es nicht beschädigt wird (dh keine fehlenden geschweiften Klammern für Selektoren usw.).

So verwenden Sie CSS-Medienabfragen: Definieren von Medientypen

Wie im vorherigen Abschnitt gezeigt, können Sie optional festlegen, auf welche Medientypen Sie mit Ihrer Medienabfrage abzielen möchten. Die Medientypen beschreiben die Gerätekategorie, auf die die Stile angewendet werden sollen. Medientypen werden mit einem von drei Schlüsselwörtern definiert:

• all – Gibt an, dass Sie alle Geräte ohne Ausnahmen ansprechen möchten.
• print – Zielt auf Geräte ab, die Ausgaben an eine Druckanzeige wie das Fenster „Druckvorschau“ in einem Webbrowser senden.
• screen – Dies ist das Gegenteil von print , das auf alle Geräte abzielt, die nicht unter die print Kategorie fallen.

Oben sind die einzigen Medientypen aufgeführt, die Sie verwenden sollten, falls vorhanden. In der Spezifikation für CSS-Medienabfragen der Stufe 4 sind zahlreiche zuvor unterstützte Medientypen nun veraltet. Die Spezifikation rät davon ab, diese zu verwenden, und Browser werden angewiesen, sie zu ignorieren, während sie sie immer noch als „gültigen“ Code ansehen (um sicherzustellen, dass der Code in Zukunft nicht beschädigt wird). Zu diesen Medientypen gehören: tty , tv , projection , handheld , braille , embossed , aural und speech .

Und beachten Sie, dass die Spezifikation auch erklärt:

Mit anderen Worten, es wird erwartet, dass wir eines Tages alle unsere Medienabfragen ohne Medientypen schreiben werden.

Das könnte Sie auch interessieren:

• WordPress REST API: Was es ist und wie man damit loslegt
• Das ultimative CSS-Grid-Tutorial für Anfänger (mit interaktiven Beispielen)
• Der Geschwindigkeitstest für mobile Websites ist nicht gut verlaufen? Hier sind 10 Möglichkeiten, die Geschwindigkeit mobiler Seiten zu verbessern ️

Modifikatoren für Medienabfragen (logische Operatoren)

Jede Medienabfrage hat auch Zugriff auf zwei spezifische Modifikatoren oder logische Operatoren, mit denen Sie Ihren Medienabfragen bedingte Logik hinzufügen können.

Ein Modifikator ist ein einzelnes Schlüsselwort, das die Bedeutung der ihm folgenden Medienfunktion beeinflusst. Die verfügbaren Modifikatoren sind:

Der not -Modifikator

Wenn dieser Modifikator vor einer Medienfunktion steht, schließt er die Zielgeräte von der Medienabfrage aus (ähnlich wie der :not() Selektor von CSS funktioniert).

Hier ist ein Beispiel:

 @media not print { article { padding : 1rem 3rem ; } }
 Codesprache: CSS ( css )

Die obige Medienabfrage würde auf alle Geräte abzielen, die keine Druckgeräte sind, daher wäre das Obige gleichbedeutend mit der Verwendung von screen ohne Modifikator.

Der only Modifikator

Dieser Modifikator dient speziell dazu, älteren Browsern dabei zu helfen, eine Medienabfrage korrekt zu analysieren. Wie die Spezifikation erklärt: „Das Schlüsselwort only hat keine Auswirkung auf das Ergebnis der Medienabfrage, führt jedoch dazu, dass die Medienabfrage von Legacy-Benutzeragenten analysiert wird, indem sie „nur“ den unbekannten Medientyp angibt und daher ignoriert wird.“

Schauen Sie sich ein Beispiel an:

 @media only screen { article { padding : 1rem 3rem ; } }
 Codesprache: CSS ( css )

Der Modifikator and

Wird verwendet, um mehrere Medienfunktionen in einer einzigen Medienabfrage zu kombinieren.

Ein Beispiel ist wie folgt:

 @media screen and ( min-width: 800px ) { article { padding : 1rem 3rem ; } }
 Codesprache: CSS ( css )

Das Obige zielt auf alle Nicht-Druckgeräte ab, die eine Breite von mindestens 800 Pixel haben.

Der Modifikator ,

Mit dem Komma können Sie eine Liste von Medienabfragen einfügen, die ähnlich wie ein logischer or -Operator funktioniert.

Hier ist ein Beispiel:

 @media screen and ( min-width: 800px ), print and ( min-width: 1000px ) { article { padding : 1rem 3rem ; } }
 Codesprache: CSS ( css )

Die Stile in der obigen Medienabfrage zielen auf eine der beiden durch Kommas getrennten Medienabfragen ab. Dies ähnelt der Funktionsweise des Kommas bei der Verwendung von CSS-Selektoren.

Gemeinsame Medienfunktionen für CSS-Medienabfragen

Jetzt kommen wir zum Kern dieses Leitfadens zur Verwendung von CSS-Medienabfragen – den verschiedenen Medienfunktionen, die Sie integrieren können. Diese Zielgeräte haben bestimmte Eigenschaften, wie durch die ausgewählten Medienfunktionen angegeben.

Medienfunktionen verbessern die Verwendung von Medientypen, sodass Sie unter bestimmten Umständen einen differenzierteren Ansatz zum Anwenden Ihrer Stile verwenden können. In diesem Abschnitt und den folgenden Abschnitten beschreibe ich, worauf jeder abzielt, zusammen mit einigem Beispielcode, um jeden der möglichen Werte oder Typen von Werten zu zeigen.

Dieser Abschnitt befasst sich mit den am häufigsten verwendeten und am besten unterstützten Medienfunktionen:

width : Breite des Ansichtsfensters einschließlich der Breite der Bildlaufleiste. Ermöglicht auch die Verwendung der min- und max- Präfixe.

 @media ( width: 800px ) { ... } @media ( min-width: 360px ) { ... } @media ( max-width: 1400px ) { ... }
 Codesprache: CSS ( css )

height : Die Höhe des Ansichtsfensters. Akzeptiert min- und max- Präfixe.

 @media ( height: 500px ) { ... } @media ( min-height: 400px ) { ... } @media ( max-height: 400px ) { ... }
 Codesprache: CSS ( css )

orientation : Ausrichtung des Ansichtsfensters.

 @media ( orientation: portrait) { ... } @media ( orientation: landscape) { ... }
 Codesprache: CSS ( css )

display-mode : Der Anzeigemodus der Anwendung, wie im Web-App-Manifest angegeben.

 @media ( display-mode: fullscreen) { ... } @media ( display-mode: standalone) { ... } @media ( display-mode: minimal-ui) { ... } @media ( display-mode: browser) { ... }
 Codesprache: CSS ( css )

aspect-ratio : Basierend auf dem angegebenen Seitenverhältnis, angegeben durch zwei positive ganze Zahlen, die durch einen Schrägstrich getrennt sind.

 @media ( aspect-ratio: 16 / 9 ) { ... }
 Codesprache: CSS ( css )

color : Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder Null, wenn das Gerät keine Farbe verwendet. Ermöglicht auch die Verwendung von min- und max- Präfixen. Kein Wert gibt an, dass Sie auf ein beliebiges Farbgerät abzielen.

 @media (color) { ... } @media ( color: 8 ) { ... } @media ( min-color: 8 ) { ... } @media ( max-color: 16 ) { ... }
 Codesprache: CSS ( css )

grid : Erkennen, ob das Gerät entweder einen rasterbasierten Bildschirm (z. B. ein textbasiertes Terminal) oder einen bitmapbasierten Bildschirm (wie die meisten modernen Computer, Tablets und Smartphones) verwendet. Ein Wert von 1 bedeutet rasterbasiert, ein Wert von 0 bedeutet bitmapbasiert.

 @media ( grid: 0 ) { ... } @media ( grid: 1 ) { ... }
 Codesprache: CSS ( css )

monochrome : Bits pro Pixel im Monochrom-Frame-Puffer des Geräts.

 @media ( monochrome: 0 ) { ... } @media (monochrome) { ... }
 Codesprache: CSS ( css )

resolution : Die Pixeldichte des Ausgabegeräts. Kann auch die min- und max- Präfixe verwenden.

 @media ( resolution: 72dpi ) { ... } @media ( min-resolution: 300dpi ) { ... } @media ( max-resolution: 150dpi ) { ... }
 Codesprache: CSS ( css )

Weniger gebräuchliche Medienfunktionen für CSS-Medienabfragen

Die folgenden Medienfunktionen werden nicht so häufig verwendet, aber Sie können sie unter bestimmten Umständen nützlich finden. Einige von ihnen haben möglicherweise auch keine Browserunterstützung, also suchen Sie unbedingt nach Support auf caniuse.com oder MDN, bevor Sie eines davon verwenden.

any-hover : Ob Hover-Funktionalität vorhanden ist oder nicht.

 @media ( any-hover: none) { ... } @media ( any-hover: hover) { ... }
 Codesprache: CSS ( css )

any-pointer : Ob ein Zeigegerät vorhanden ist und wie genau es ist.

 @media ( any-pointer: none) { ... } @media ( any-pointer: course) { ... } @media ( any-pointer: fine) { ... }
 Codesprache: CSS ( css )

color-gamut : Ungefährer Farbbereich, der vom Gerät unterstützt wird.

 @media ( color-gamut: srgb) { ... } @media ( color-gamut: p3) { ... } @media ( color-gamut: rec2020) { ... }
 Codesprache: CSS ( css )

color-index : Anzahl der Einträge in der Farbnachschlagetabelle des Ausgabegeräts. Ermöglicht auch die Verwendung von min- und max- Präfixen. Kein Wert gibt an, dass Sie auf einen beliebigen Farbindex abzielen.

 @media (color-index) { ... } @media ( min-color-index: 15000 ) { ... } @media ( max-color-index: 30000 ) { ... }
 Codesprache: CSS ( css )

hover : Wenn der Benutzer über Elemente schweben kann.

 @media ( hover: none) { ... } @media ( hover: hover) { ... }
 Codesprache: CSS ( css )

overflow-block : Wie das Gerät mit Inhalten umgeht, die entlang der Blockachse überlaufen.

 @media ( overflow-block: none) { ... } @media ( overflow-block: scroll) { ... } @media ( overflow-block: optional-paged) { ... } @media ( overflow-block: paged) { ... }
 Codesprache: CSS ( css )

overflow-inline : Wie das Gerät mit Inhalten umgeht, die den Darstellungsbereich entlang der Inline-Achse überlaufen.

 @media ( overflow-inline: none) { ... } @media ( overflow-inline: scroll) { ... }
 Codesprache: CSS ( css )

pointer : Wenn auf dem Gerät ein Zeiger vorhanden ist.

 @media ( pointer: none) { ... } @media ( pointer: coarse) { ... } @media ( pointer: fine) { ... }
 Codesprache: CSS ( css )

scan : Wenn das Gerät interlaced (wie einige Plasmafernseher) oder progressiv (wie die meisten Computermonitore) ist.

 @media ( scan: interlace) { ... } @media ( scan: progressive) { ... }
 Codesprache: CSS ( css )

update : Das heißt, Aktualisierungshäufigkeit. Wie oft das Ausgabegerät die Darstellung von Inhalten ändern kann.

 @media ( update: none) { ... } @media ( update: slow) { ... } @media ( update: fast) { ... }
 Codesprache: CSS ( css )

Medienfunktionen von CSS Media Queries Level 5

Die folgenden Medienfunktionen sind neu in der Spezifikation für Medienabfragen der Ebene 5. Nur wenige davon unterstützen im Moment den Browser, aber es ist gut zu wissen, was sich am Horizont abzeichnet, wenn Sie lernen, wie man CSS-Medienabfragen verwendet.

dynamic-range : Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom Gerät unterstützt wird.

 @media ( dynamic-range: standard) { ... } @media ( dynamic-range: high) { ... }
 Codesprache: CSS ( css )

forced-colors : Erkennen, ob das Gerät eine vom Benutzer ausgewählte eingeschränkte Farbpalette aktiviert hat, wie dies der Fall wäre, wenn der Windows-Modus für hohen Kontrast aktiviert ist.

 @media ( forced-color: none) { ... } @media ( forced-color: active) { ... }
 Codesprache: CSS ( css )

horizontal-viewport-segments : Die Anzahl der logischen horizontalen Segmente des Ansichtsfensters.

 @media ( horizontal-viewport-segments: 3 ) { ... }
 Codesprache: CSS ( css )

environment-blending : Fragen Sie die Eigenschaften der Anzeige des Benutzers ab.

 @media ( environment-blending: opaque) { ... } @media ( environment-blending: additive) { ... } @media ( environment-blending: subtractive) { ... }
 Codesprache: CSS ( css )

inverted-colors : Wenn der Browser oder das Betriebssystem Farben invertiert.

 @media ( inverted-colors: none) { ... } @media ( inverted-colors: inverted) { ... }
 Codesprache: CSS ( css )

nav-controls : Gibt an, ob der Browser erkennbare Navigationssteuerelemente bereitstellt.

 @media ( nav-controls: none) { ... } @media ( nav-controls: back) { ... }
 Codesprache: CSS ( css )

prefers-contrast : Wenn der Benutzer eine Erhöhung oder Verringerung des Kontrasts zwischen benachbarten Farben bevorzugt.

 @media ( prefers-contrast: no-preference) { ... } @media ( prefers-contrast: more) { ... } @media ( prefers-contrast: less) { ... }
 Codesprache: CSS ( css )

prefers-color-scheme : Wenn der Benutzer ein helles oder dunkles Farbschema bevorzugt.

 @media ( prefers-color-scheme: light) { ... } @media ( prefers-color-scheme: dark) { ... }
 Codesprache: CSS ( css )

prefers-reduced-data : Wenn der Benutzer alternative Inhalte bevorzugt, die weniger Daten verwenden.

 @media ( prefers-reduced-data: no-preference) { ... } @media ( prefers-reduced-data: reduce) { ... }
 Codesprache: CSS ( css )

prefers-reduced-motion : Wenn der Benutzer weniger Bewegung auf der Seite bevorzugt.

 @media ( prefers-reduced-motion: no-preference) { ... } @media ( prefers-reduced-motion: reduce) { ... }
 Codesprache: CSS ( css )

prefers-reduced-transparency : Wenn der Benutzer das System angefordert hat, minimieren Sie die Menge an transparenten oder durchscheinenden Ebeneneffekten.

 @media ( prefers-reduced-transparency: no-preference) { ... } @media ( prefers-reduced-transparency: reduce) { ... }
 Codesprache: CSS ( css )

scripting : Wenn scripting (fast immer JavaScript) verfügbar ist.

 @media ( scripting: none) { ... } @media ( scripting: initial- only ) { ... } @media ( scripting: enabled) { ... }
 Codesprache: CSS ( css )

vertical-viewport-segments : Die Anzahl der logischen horizontalen Segmente des Ansichtsfensters.

 @media ( vertical-viewport-segments: 3 ) { ... }
 Codesprache: CSS ( css )

video-color-gamut : Der ungefähre Farbbereich, der vom Browser und Gerät unterstützt wird.

 @media ( video-color-gamut: srgb) { ... } @media ( video-color-gamut: p3) { ... } @media ( video-color-gamut: rec2020) { ... }
 Codesprache: CSS ( css )

video-dynamic-range : Der ungefähre Farbbereich, der vom Browser und Gerät unterstützt wird.

 @media ( video-dynamic-range: standard) { ... } @media ( video-codynamic-range: high) { ... }
 Codesprache: CSS ( css )

Nicht standardmäßige Medienfunktionen

Schließlich sind hier einige nicht standardmäßige Medienfunktionen, deren Verwendung nicht empfohlen wird, die Sie jedoch in einigen Fällen für die Ausrichtung auf bestimmte Gerätetypen (z. B. iOS-Tablets und -Telefone) nützlich finden könnten:

-webkit-device-pixel-ratio : Alternative zum resolution , definiert mit einem Zahlenwert.

 @media ( -webkit-device-pixel-ratio: 2 ) { ... }
 Codesprache: CSS ( css )

webkit-animation : Wenn das Gerät vom Hersteller vorangestellte Animationen unterstützt.

 @media ( -webkit-animation: true) { ... } @media ( -webkit-animation: false) { ... }
 Codesprache: CSS ( css )

webkit-transform-2d : Wenn das Gerät CSS-2D-Transformationen mit Herstellerpräfix unterstützt.

 @media (-webkit-transform- 2 d: true) { ... } @media (-webkit-transform- 2 d: false) { ... }
 Codesprache: CSS ( css )

webkit-transform-3d : Wenn das Gerät herstellerpräfixierte CSS-3D-Transformationen unterstützt.

 @media (-webkit-transform- 3 d: true) { ... } @media (-webkit-transform- 3 d: false) { ... }
 Codesprache: CSS ( css )

webkit-transition : Eine veraltete Funktion, die erkennt, ob das Gerät anbieterpräfixierte Übergänge unterstützt.

 @media ( -webkit-transition: true) { ... } @media ( -webkit-transition: false) { ... }
 Codesprache: CSS ( css )

Wie Sie sehen können, ist die Palette der Medienfunktionen, die in CSS-Medienabfragen verwendet werden, seit Beginn der responsiven Webdesign-Bewegung erheblich gewachsen. Sie können so ziemlich alles erkennen, was Sie wollen, und CSS für die Fähigkeiten jedes Gerätetyps schreiben.

Best Practices für CSS-Medienabfragen

Ich habe in diesem Leitfaden viel Rohcode zur Verwendung von CSS-Medienabfragen behandelt, aber der Code allein macht Sie nicht zu einem Experten für Medienabfragen. Hier sind einige allgemeine Tipps und Vorschläge, um das Beste aus CSS-Medienabfragen herauszuholen:

• Schreiben Sie keine Medienabfragen für bestimmte Gerätegrößen wie iPad, iPhone usw. Schreiben Sie Medienabfragen danach, wie Ihre Layouts an verschiedenen Punkten „unterbrechen“ (daher der Begriff „Haltepunkte“). Dies bedeutet, dass Sie dem Inhalt erlauben, die Haltepunkte zu definieren.
• Wählen Sie nach Möglichkeit bei Ihren Medienabfragen einen Mobile-First-Ansatz, bei dem Ihr CSS für Nicht-Medienabfragen auf das kleinste Gerät angewendet wird, und fügen Sie dann nach Bedarf Medienabfragen für größere Darstellungsbereiche hinzu.
• Nutzen Sie CSS-Layoutfunktionen wie Flexbox und CSS-Raster, um auf natürliche Weise Layouts zu erstellen, die nach Möglichkeit ohne Medienabfragen reagieren.
• Ignorieren Sie nicht die Möglichkeit, vertikale Medienabfragen zu verwenden, die die Höhe des Darstellungsbereichs prüfen. Dies könnte Ihnen helfen, einige Layout-Fallstricke auf kleineren Geräten zu vermeiden.
• Bleiben Sie nicht allein an Breite und Höhe hängen. Verwenden Sie einige der anderen gut unterstützten Medienfunktionen, die bei der Barrierefreiheit und der allgemeinen UX Ihrer Layouts auf verschiedenen Geräten helfen können.

CSS-Medienabfragen im Jahr 2022 und darüber hinaus

All die neuen Medienfunktionen, die in den letzten Jahren eingeführt wurden, haben die Möglichkeiten zum Schreiben von CSS-Medienabfragen spannend und mächtig gemacht!

Sie sollten auf jeden Fall die am besten unterstützten Medienfunktionen nutzen. Sie können auch damit beginnen, viele der neuen Medienfunktionen zu nutzen und davon ausgehen, dass Medientypen eines Tages der Vergangenheit angehören werden.

Wenn Sie Fragen zur Verwendung von CSS-Medienabfragen im Jahr 2022 haben, teilen Sie uns dies im Kommentarbereich unten mit.

Layout und Präsentation von Karol K.