CSS/Media Queries/Medienmerkmale
Text-Info
- 20min
- leicht
- ● Einstieg in CSS
● Media Queries
Ein Medienmerkmal beschreibt eine bestimmte Eigenschaft des Mediums, auf das die Ausgabe erfolgen soll. Es kann sich um Abmessungen handeln (width oder height) oder eine bestimmte Eigenschaft des Mediums.
Jede Abfrage auf ein Medienmerkmal wird in runde Klammern gesetzt, und ergibt den Wert „wahr“, wenn die Merkmalsabfrage zutrifft, oder sonst „falsch“.
Inhaltsverzeichnis
Medienmerkmale
width
Das Merkmal width
(Breite) beschreibt bei fortlaufenden Medien die Breite des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite einer Seite.
- abgefragter Wert: Eine positive Längenangabe.
- betrifft: sichtbare und fühlbare Medien.
- Merkmalstyp: Wertebereich.
@media (width: 60em) { /* Breite entspricht genau 60em */ }
@media (min-width: 50em) { /* Breite beträgt mindestens 50em */ }
@media (width >= 70em) { /* Breite beträgt höchstens 70em */ }
height
Das Merkmal height
(Höhe) beschreibt bei fortlaufenden Medien die Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Höhe einer Seite.
- abgefragter Wert: Eine positive Längenangabe.
- betrifft: sichtbare und fühlbare Medien.
- Merkmalstyp: Wertebereich.
Die Anwendung erfolgt analog zum Merkmal width
.
aspect-ratio
Das Merkmal aspect-ratio
(Seitenverhältnis) beschreibt das Verhältnis des Medienmerkmals width
zum Merkmal height
.
- abgefragter Wert: Ein ratio-Wert (Verhältnis zweier Zahlen) oder eine positive Fließkommazahl.
- betrifft: Bitmap-Medientypen.
- Merkmalstyp: Wertebereich.
@media (aspect-ratio: 4/3) { /* Fall 1 */ }
@media (min-aspect-ratio: 4/3) { /* Fall 2 */ }
@media (aspect-ratio <= 1.33) { /* Fall 3 */ }
In diesem Beispiel wird der Verhältniswert 4/3 den Varianten des aspect-ratio
-Merkmals zugewiesen. Das Stylesheet wird verarbeitet, wenn das Seitenverhältnis des Anzeigebereichs (Viewport) genau 4 zu 3 entspricht (Fall 1). Das ist z.B. bei einem Anzeigebereich von 492 zu 369 Pixel der Fall.
Das Stylesheet in Fall 2 wird angewendet, wenn das Seitenverhältnis 4/3 oder höher (z.B. 5/3 oder 6/3) beträgt. Der Fall 3 zeigt die Variante mit einer Fließkommazahl statt eines Buchs, entsprechend wird das Stylesheet nur verarbeitet, wenn das Seitenverhältnis 1,33 oder geringer ist (z.B. 2/3 oder 1/3).
orientation
Das Merkmal orientation
(Orientierung) beschreibt das Seitenformat eines Ausgabemediums. Die Orientierung entspricht dem Wert portrait
(Hochformat), wenn der Wert des Merkmals height
größer ist als der Wert des Merkmals width
. Andernfalls entspricht die Orientierung dem Wert landscape
(Querformat).
- abgefragter Wert: Eines der Schlüsselwörter
portrait
oderlandscape
- betrifft: Bitmap-Medientypen.
- Merkmalstyp: Aufzählung
@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }
-
(orientation:landscape)
bedeutet nicht zwingend, dass der Bildschirm Querformat hat. Auf Touch-Geräten kann das Einblenden der Bildschirmtastatur dazu führen, dass der Viewport vom Hoch- ins Querformat wechselt. - Safari erkennt die Kurzschreibweise
(orientation)
ohne Angabe eines Werts nicht. Sie sollten dieses Merkmal daher nur in Verbindung mit einem der vorgegebenen Schlüsselwörter verwenden. Die Angabe ohne Schlüsselwort kann aber nur dann zum Ergebnis „falsch“ führen, wenn das Ausgabemedium nicht über Merkmale wie Breite und Höhe verfügt (z. B. eine Sprachausgabe).
color
Das Merkmal color
(Farbe) beschreibt die Anzahl der Bits, die ein Gerät pro Farbkomponente (z. B. Rot, Grün oder Blau) verwendet. Kann das Ausgabegerät keine Farben anzeigen, ist der Wert 0
(Null) zutreffend. Wird für verschiedene Farbkomponenten eine unterschiedliche Anzahl an Bits verwendet, so zählt die niedrigste verwendete Bit-Anzahl des Geräts.
- abgefragter Wert: Eine nicht negative Zahl.
- betrifft: sichtbare Medientypen.
- Merkmalstyp: Wertebereich
@media (color: 2) { /* Einfaches Farblayout */ }
@media (min-color: 3) { /* Komplexes Farblayout */ }
@media (color < 3) { /* Einfaches Farblayout */ }
color-index
Das Merkmal color-index
(Farbindex) beschreibt die Anzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums. Farbtabellen werden auf Geräten verwendet, die nicht im Stande sind, die Farbe jedes Bildpunktes einzeln zu steuern. Verwendet das Medium keine Farbtabelle, ist der Wert 0
(Null) zutreffend.
- abgefragter Wert: Eine positive Zahl.
- betrifft: sichtbare Medientypen.
- Merkmalstyp: Wertebereich.
@media (color-index) { /* Das Gerät verwendet eine Farbtabelle */ }
@media (min-color-index: 20) { /* Mindestens 20 Farben stehen zur Verfügung */ }
@media (color-index <= 256) { /* Höchstens 256 Farben stehen zur Verfügung */ }
min-
und max-
dieses Merkmals nicht.display-mode
Das Merkmal display-mode
testet den Anzeigemodus einer Anwendung. Sie können es verwenden, um eine konsistente Benutzererfahrung zwischen dem Starten einer Site über eine URL und dem Starten über ein Desktop-Symbol zu gewährleisten.
- abgefragter Wert: Ein Schlüsselwort:
-
fullscreen
Der gesamte verfügbare Anzeigebereich (vergleiche Fullscreen API) wird genutzt und es wird kein User Agent angezeigt. -
standalone
Die Anwendung sieht aus und fühlt sich an wie eine eigenständige Anwendung. Dies kann bedeuten, dass die Anwendung ein anderes Fenster hat, ein eigenes Symbol im Startmenü der Anwendung, usw. In diesem Modus schließt der User Agent Oberflächenelemente zur Steuerung der Navigation aus, kann aber andere Oberflächenelemente wie z. B. eine Statusleiste enthalten. -
minimal-ui
Die Anwendung sieht aus wie eine eigenständige Anwendung und fühlt sich auch so an, verfügt aber über einen minimalen Satz von UI-Elementen zur Steuerung der Navigation. Die Elemente variieren je nach Browser. -
browser
Die Anwendung wird in einer herkömmlichen Browser-Registerkarte oder einem neuen Fenster geöffnet, je nach Browser und Plattform.
-
- betrifft: sichtbare Medientypen.
@media all and (display-mode: fullscreen) {
body {
margin: 0;
border: thick solid black;
}
}
Diese Funktion entspricht dem Anzeigeelement des Web-App-Manifests. Beide gelten für den Top-Level-Browsing-Kontext und alle untergeordneten Browsing-Kontexte. Die Funktionsabfrage gilt unabhängig davon, ob ein Web-App-Manifest vorhanden ist.
monochrome
Das Merkmal monochrome
(schwarz-weiß) beschreibt die Anzahl der Bits, die zur Beschreibung eines schwarz-weiß-Farbtons verwendet werden. Handelt es sich nicht um ein Gerät, das nur Graustufen darstellen kann (sondern auch Farben), ist der Wert 0
(Null) zutreffend.
- abgefragter Wert: eine positive Zahl.
- betrifft: sichtbare Medientypen.
- Merkmalstyp: Wertebereich.
@media (monochrome: 1) { /* nur schwarz und weiß stehen zur Verfügung */ }
@media (min-monochrome: 4) { /* Mindestens 16 Graustufen stehen zur Verfügung */ }
@media (max-monochrome: 8) { /* Höchstens 256 Graustufen stehen zur Verfügung */ }
color-gamut
Das Merkmal color-gamut
(Farbbereich) beschreibt den Farbraum, den das Ausgabegerät darstellen kann. CSS kennt die Farbräume sRGB, DCI P3 und ITU Recommendation BT.2020. Diese Räume bilden eine aufsteigende Folge, d.h. p3
Geräte leisten auch srgb
und rec2020
Geräte leisten auch p3
. Geräte, deren Fähigkeiten für srgb nicht ausreichen, können Sie mit not (color-gamut)
abfragen.
- abgefragter Wert: einer der Farbraumnamen
srgb
,p3
oderrec2020
. - betrifft: sichtbare Medientypen.
- Merkmalstyp: Aufzählung.
@media (monochrome: 1) { /* nur schwarz und weiß stehen zur Verfügung */ }
@media (min-monochrome: 4) { /* Mindestens 16 Graustufen stehen zur Verfügung */ }
@media (max-monochrome: 8) { /* Höchstens 256 Graustufen stehen zur Verfügung */ }
pointer
Das Merkmal pointer
(Zeiger) misst die Genauigkeit der verwendeten Zeigegeräts. So kann die sonst oft schwierige Unterscheidung zwischen Touch-Geräten einerseits (Smartphones und Tablets, aber auch Konsolen wie der Wii) und Geräten mit Maus, Touchpad oder Eingabestiften getroffen werden.[1]
- Browserunterstützung
- caniuse.com
Folgende Einstellungen sind möglich:
fine
: für Geräte mit Maus, Touchpad oder Eingabestiftcoarse
: für Geräte mit Touch- oder Gestensteuerungnone
: kein Zeigegerät verfügbar (statt dessen beispielsweise Tastatur oder Sprachsteuerung)
@media (pointer: coarse) {
input {
padding 1em;
font-size: 2em;
}
}
Da die meisten Geräte mehrere Eingabemöglichkeiten haben, deren Gebrauch aber nicht vorhergesagt werden kann, kann man mit any-pointer
herausfinden, ob es die Eingabegeräte überhaupt gibt.
pointer
und any-pointer
nicht 100% auf bestimmte Geräte schließen. Allerdings können Sie in Kombination mit der Displaybreite sehr gut erkennen, ob jemand per Smartphone, Tablet oder Desktoprechner unterwegs ist. Dadurch können Sie Webseiten künftig noch genauer für bestimmte Geräte optimieren.resolution
Das Merkmal resolution
(Auflösung) beschreibt die Auflösung, also die Dichtigkeit der Bildpunkte auf einem Ausgabemedium. Besitzt das verwendete Ausgabemedium keine rechteckigen Bildpunkte (beispielsweise Drucker), so kann das Merkmal nur in Verbindung mit einem Präfix verwendet werden.
- Browserunterstützung
- caniuse.com
In diesem Fall prüfen Abfragen mit min-resolution
die geringstmögliche, Abfragen mit max-resolution
die höchstmögliche Dichtigkeit der Bildpunkte des Ausgabemediums ab.
- abgefragter Wert: Eine Auflösung.
- betrifft: Bitmap-Medientypen.
- Die Präfixe
min-
undmax-
sind erlaubt.
@media (resolution: 96dpi) { /* Die Auflösung beträgt 96 Bildpunkte pro Zoll */ }
@media (min-resolution: 200dpcm) { /* Die Auflösung beträgt mindestens 200 Punkte pro Zentimeter */ }
@media (max-resolution: 300dpi) { /* Die Auflösung beträgt höchstens 300 Punkte pro Zoll */ }
scan
Das Merkmal scan
(Abtasten) beschreibt den Bildaufbau von Ausgabegeräten des Typs tv
. Dieser kann progressiv erfolgen, das entspricht etwa dem Bildaufbau auf einem Computerbildschirm, dann trifft der Wert progressive
zu, oder mit Hilfe von Zeilenbildung (d. h. einzelne Bildzeilen werden nach und nach dargestellt), dann trifft der Wert interlace
zu.
- abgefragter Wert: Eines der Schlüsselwörter
progressive
oderinterlace
- betrifft: Medientyp
tv
@media (scan: progressive) { /* Bildschirmlayout */ }
grid
Das Merkmal grid
(Raster) beschreibt die Rastereigenschaft von Ausgabemedien. Bei Ausgabegeräten, die Inhalte in einem Raster darstellen, trifft der Wert Eins (1
) zu, andernfalls der Wert Null (0
).
- abgefragter Wert: Eine Zahl (Null oder Eins).
- betrifft: sichtbare und fühlbare Medientypen
@media (grid: 0) { /* Zahlreiche Schriftformatierungen */ }
Missbilligte Medienmerkmale
device-width
Missbilligt - verwenden Sie width
Das Merkmal device-width
(Geräte-Breite) beschreibt die Breite des Ausgabegerätes, z. B. Breite eines Bildschirms in Pixel.
- abgefragter Wert: Eine positive Längenangabe.
- betrifft: sichtbare und fühlbare Medien.
- Merkmalstyp: Wertebereich.
@media (device-width: 800px) { /* Breite entspricht genau 800 Pixel */ }
@media (min-device-width: 800px) { /* Breite beträgt mindestens 800px */ }
@media (max-device-width: 1024px) { /* Breite beträgt höchstens 1024px */ }
min-width
, bzw. max-width
in Verbindung mit relativen Größen. Mehr Informationen erhalten Sie unter CSS/Tutorials/Boxmodell/Größenangaben.device-height
Missbilligt - verwenden Sie height
Das Merkmal device-height
(Geräte-Höhe) beschreibt die Höhe des Ausgabebereichs, z. B. Höhe eines Bildschirms in Pixel.
- abgefragter Wert: Eine positive Längenangabe.
- betrifft: sichtbare und fühlbare Medien.
- Merkmalstyp: Wertebereich.
Die Anwendung erfolgt analog zum Merkmal device-width
.
device-aspect-ratio
Missbilligt - verwenden Sie aspect-ratio
Das Merkmal device-aspect-ratio
(Geräte-Seitenverhältnis) beschreibt das Verhältnis des Merkmals device-width
zum Merkmal device-height
.
- abgefragter Wert: Ein ratio-Wert (Verhältnis zweier Zahlen) oder eine positive Fließkommazahl.
- betrifft: Bitmap-Medientypen.
- Merkmalstyp: Wertebereich.
Die Anwendung erfolgt analog zum Merkmal aspect-ratio
.
device-pixel-ratio
Missbilligt - diese Eigenschaft gab es nur mit Herstellerpräfixen, standardisiert wurde resolution
mit der Einheit dppx
Das Merkmal device-pixel-ratio
(Geräte-Pixel-Verhältnis) beschreibt die Anzahl der tatsächlichen Pixel des Ausgabegeräts pro CSS-Pixel.[2]. Der Name dieses Merkmals steht in Bezug zu der devicePixelRatio-Eigenschaft des window-Objekts, wurde aber nicht beibehalten[3].
- Browserunterstützung
- caniuse.com
light-level
Das Merkmal light-level
(Lichtstärke) war bis Juli 2020 in der Level 5 Spezifikation der Media Queries enthalten und wurde dann mit dem Hinweis gestrichen, dass es redundant zu prefers-contrast und prefers-color-scheme sei.
Quellen
- ↑ W3C: pointer
- ↑ W3C: How to unprefix -webkit-device-pixel-ratio
- ↑ quirksmode.org: More about devicePixelRatio