CSS/Media Queries
Mit Medienabfragen (Media Queries) können Sie die Darstellung eines Dokuments für verschiedene Ausgabemedien festlegen. Dabei wird nicht ermittelt, um welchen Browser es sich handelt, sondern welcher Medientyp (z.B. Bildschirm oder Drucker), oder Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem der Browser vorfindet. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden.
Inhaltsverzeichnis
Medientypen[Bearbeiten]
Die Angabe eines Medientyps ist die einfachste Form einer Medienabfrage und gleichzeitig Grundlage für spezialisierte Abfragen. Ein Medientyp ist ein Schlüsselwort, dem verschiedene gleichartige Ausgabegeräte zugeordnet werden können. Allerdings gibt es keine feste Definition, welche Geräte einem Medientyp zuzuordnen sind. Die Beschreibung der einzelnen Medientypen wird ausdrücklich als Richtbeschreibung bezeichnet.
Ein Browser darf bei der Verarbeitung von Stylesheets nur einen einzigen Medientyp berücksichtigen. Ein Dokument kann also nicht von zwei Stylesheets, die unterschiedlichen Medientypen zugeordnet wurden, gleichzeitig beeinflusst werden.
| Medientyp | Beschreibung | Browserunterstützung |
|---|---|---|
| all | alle Ausgabemedien (Standardwert) | |
| für Drucker, die Inhalte sichtbar auf Papier drucken. | ||
| screen | (Computer-)Bildschirme | |
| speech | für Sprachsynthesizer gedacht. Die Angabe ist für ein zukünftiges CSS-Modul reserviert und wird bisher (Stand Oktober 2017) nicht verwendet, soll aber den Medientyp „aural“ ersetzen. |
@handheld, @tv und @projection scheiterte sowohl an mangelnder Browserunterstützung im letzten Fall, sowie der Tatsache, dass Smartphones @handheld ignorierten, um zu verhindern, dass nur eine abgespeckte mobile Version anstelle der Standardseite mit allen Informationen geladen wurde. In Media Queries level 4 wurden diese Medientypen als missbilligt eingestuft.Medienmerkmale[Bearbeiten]
Ein Medienmerkmal beschreibt eine Anforderung an den angegeben Medientyp. Die Abfrage eines Merkmals wird nachfolgend auch Ausdruck genannt. Ein Ausdruck entspricht dem Wert „wahr“, wenn das Kriterium von einem Ausgabemedium erfüllt wird, andernfalls dem Wert „falsch“.
width[Bearbeiten]
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.
- Die Präfixe
min-undmax-sind erlaubt.
@media (width: 60em) { /* Breite entspricht genau 60em */ }
@media (min-width: 50em) { /* Breite beträgt mindestens 50em */ }
@media (max-width: 70em) { /* Breite beträgt höchstens 70em */ }
height[Bearbeiten]
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.
- Die Präfixe
min-undmax-sind erlaubt.
Die Anwendung erfolgt analog zum Merkmal width.
device-width[Bearbeiten]
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.
- Die Präfixe
min-undmax-sind erlaubt.
@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/Einstieg/Media Queries.device-height[Bearbeiten]
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.
- Die Präfixe
min-undmax-sind erlaubt.
Die Anwendung erfolgt analog zum Merkmal device-width.
device-pixel-ratio[Bearbeiten]
Das Merkmal device-pixel-ratio (Geräte-Pixel-Verhältnis) beschreibt die Anzahl der tatsächlichen Pixel des Ausgabegeräts pro Pixel auf der Webseite.[1]
[2]
Details: caniuse.com
device-pixel-ratio entspricht keinem Standard. Deshalb kann die Browserunterstützung auch wieder eingestellt werden.Verwenden Sie stattdessen
resolution.orientation[Bearbeiten]
Das Merkmal orientation (Orientierung) beschreibt das Seitenformat eines Ausgabemediums. Die Orientierung entspricht dem Wert landscape (Querformat), wenn der Wert des Merkmals width größer ist als der Wert des Merkmals height. Andernfalls entspricht die Orientierung dem Wert portrait (Hochformat).
- abgefragter Wert: Eines der Schlüsselwörter
portraitoderlandscape - betrifft: Bitmap-Medientypen.
@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }
(orientation) ohne Angabe eines Werts nicht. Sie sollten dieses Merkmal daher nur in Verbindung mit einem der vorgegebenen Schlüsselwörter verwenden.aspect-ratio[Bearbeiten]
Das Merkmal aspect-ratio (Seitenverhältnis) beschreibt das Verhältnis des Merkmals width zum Merkmal height.
- abgefragter Wert: Ein Verhältniswert.
- betrifft: Bitmap-Medientypen.
- Die Präfixe
min-undmax-sind erlaubt.
@media (aspect-ratio: 4/3) { /* Fall 1 */ }
@media (min-aspect-ratio: 4/3) { /* Fall 2 */ }
@media (max-aspect-ratio: 4/3) { /* Fall 3 */ }
device-aspect-ratio[Bearbeiten]
Das Merkmal device-aspect-ratio (Geräte-Seitenverhältnis) beschreibt das Verhältnis des Merkmals device-width zum Merkmal device-height.
- abgefragter Wert: Ein Verhältniswert.
- betrifft: Bitmap-Medientypen.
- Die Präfixe
min-undmax-sind erlaubt.
Die Anwendung erfolgt analog zum Merkmal aspect-ratio.
color[Bearbeiten]
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.
- Die Präfixe
min-undmax-sind erlaubt.
@media (color: 2) { /* Einfaches Farblayout */ }
@media (min-color: 3) { /* Komplexes Farblayout */ }
@media (max-color: 2) { /* Einfaches Farblayout */ }
color-index[Bearbeiten]
Das Merkmal color-index (Farbindex) beschreibt die Anzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums. Verfügt das Medium nicht über eine Farbtabelle, ist der Wert 0 (Null) zutreffend. Üblicherweise besitzen nur Medien eine Farbtabelle, deren Farbfähigkeit eingeschränkt ist.
- abgefragter Wert: Eine positive Zahl.
- betrifft: sichtbare Medientypen.
- Die Präfixe
min-undmax-sind erlaubt.
@media (color-index: 16) { /* genau 16 Farben stehen zur Verfügung */ }
@media (min-color-index: 20) { /* Mindestens 20 Farben stehen zur Verfügung */ }
@media (max-color-index: 256) { /* Höchstens 256 Farben stehen zur Verfügung */ }
min- und max- dieses Merkmals nicht.monochrome[Bearbeiten]
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.
- Die Präfixe
min-undmax-sind erlaubt.
@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 */ }
light-level[Bearbeiten]
Das Merkmal light-level (Lichtstärke) beschreibt die Lichtverhältnisse der Umgebung, die durch den Helligkeitssensor der Kamera erfasst werden.[3][4]
Details: caniuse.com
Folgende Einstellungen sind möglich
dim: gedämpftes Lichtnormalwashed: sehr hell, in Licht gebadet
- viele Geräte eine eigene Kontrastanpassung vornehmen
- die Technologien zu unterschiedlich sind (e-ink bleibt im Hellen leserlich, während Flüssigkristall-Displays keinen Kontrast mehr bieten.)
- Die Helligkeitssensoren häufig nicht geeicht sind
@media (light-level: normal) {
p {
background: url("texture.jpg");
color: #333 }
}
@media (light-level: dim) {
p {
background: #222;
color: #ccc }
}
@media (light-level: washed) {
p {
background: white;
color: black;
font-size: 2em; }
}
pointer[Bearbeiten]
Das Merkmal pointer (Zeiger) unterscheidet die Genauigkeit der Angabe. 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.[5]
Details: 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: nur Tastatureingabe möglich
@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[Bearbeiten]
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.
Details: 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[Bearbeiten]
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
progressiveoderinterlace - betrifft: Medientyp
tv
@media (scan: progressive) { /* Bildschirmlayout */ }
(scan) nicht. Es ist stattdessen erforderlich, die ausführliche Schreibweise zu notieren.
grid[Bearbeiten]
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 */ }
Siehe auch[Bearbeiten]
- CSS/Media Queries/Medienabfragen einbinden
- CSS/Tutorials/Einstieg/Media Queries
- CSS/Tutorials/Print-CSS
- JavaScript: window.matchMedia
Quellen[Bearbeiten]
- ↑ W3C: How to unprefix -webkit-device-pixel-ratio
- ↑ quirksmode.org: More about devicePixelRatio
- ↑ W3C: light-level
- ↑ MDN: light-level
- ↑ W3C: pointer
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. Im Fall 3 wird das Stylesheet entsprechend nur verarbeitet, wenn das Seitenverhältnis 4/3 oder geringer ist (z.B. 2/3 oder 1/3).