CSS/Media Queries

Aus SELFHTML-Wiki
< CSS(Weitergeleitet von Media queries)
Wechseln zu: Navigation, Suche

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.

  • HTML 4.0
  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.

Übersicht der Medientypen in CSS
Medientyp Beschreibung Browserunterstützung
all alle Ausgabemedien (Standardwert)
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
print 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.
  • Achtung


Beachten Sie: Eine Unterscheidung der einzelnen Geräteklassen mit Medientypen wie @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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eine positive Längenangabe.
  • betrifft: sichtbare und fühlbare Medien.
  • Die Präfixe min- und max- sind erlaubt.
Beispiel
@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 */ }
Beachten Sie: Bei Merkmalen, die sich auf den Anzeigebereich beziehen ist es fast immer sinnvoll, eines der möglichen Präfixe zu verwenden, da die tatsächliche Anzeigebreite beim Benutzer nicht vorhersehbar ist.

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eine positive Längenangabe.
  • betrifft: sichtbare und fühlbare Medien.
  • Die Präfixe min- und max- 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eine positive Längenangabe.
  • betrifft: sichtbare und fühlbare Medien.
  • Die Präfixe min- und max- sind erlaubt.
Beispiel
@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 */ }
Beachten Sie: Auch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.
Empfehlung: Verwenden Sie lieber das Medienmerkmal min-width, bzw. max-width in Verbindung mit relativen Größen. Mehr Informationen erhalten Sie unter CSS/Anwendung und Praxis/Tipps und Tricks für 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eine positive Längenangabe.
  • betrifft: sichtbare und fühlbare Medien.
  • Die Präfixe min- und max- 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]

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Beachten Sie: 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).

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eines der Schlüsselwörter portrait oder landscape
  • betrifft: Bitmap-Medientypen.
Beispiel
@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }


Beachten Sie: Internet Explorer, Safari und Chrome erkennen die Kurzschreibweise (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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Ein Verhältniswert.
  • betrifft: Bitmap-Medientypen.
  • Die Präfixe min- und max- sind erlaubt.
Beispiel
@media (aspect-ratio: 4/3) { /* Fall 1 */ }
@media (min-aspect-ratio: 4/3) { /* Fall 2 */ }
@media (max-aspect-ratio: 4/3) { /* 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. 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).

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Ein Verhältniswert.
  • betrifft: Bitmap-Medientypen.
  • Die Präfixe min- und max- 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eine nicht negative Zahl.
  • betrifft: sichtbare Medientypen.
  • Die Präfixe min- und max- sind erlaubt.
Beispiel
@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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eine positive Zahl.
  • betrifft: sichtbare Medientypen.
  • Die Präfixe min- und max- sind erlaubt.
Beispiel
@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 */ }
Beachten Sie: Einzig der Opera Browser gibt an, eine Farbtabelle zu verwenden.
Beachten Sie: Safari und Chrome verstehen die Präfixe 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: eine positive Zahl.
  • betrifft: sichtbare Medientypen.
  • Die Präfixe min- und max- sind erlaubt.
Beispiel
@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]

  • CSS 3.0
  • Leer
  • Leer
  • Edge
  • Leer
  • Leer

Details: caniuse.com

Folgende Einstellungen sind möglich

  • dim: gedämpftes Licht
  • normal
  • washed: sehr hell, in Licht gebadet
Beachten Sie: Die Spezifikation verwendet absichtlich keine festen Lux-Werte, da
  • 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
Beispiel
@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]

  • CSS 3.0
  • Chrome
  • Leer
  • Edge
  • Opera
  • Leer

Details: caniuse.com

Folgende Einstellungen sind möglich:

  • fine: für Geräte mit Maus, Touchpad oder Eingabestift
  • coarse: für Geräte mit Touch- oder Gestensteuerung
  • none: nur Tastatureingabe möglich
Beispiel
@media (pointer: coarse) {
  input {
    padding 1em;
    font-size: 2em;
  }
}
Bei Touchgeräten werden die Schriftgröße und der Innenabstand des Eingabefelds entsprechend vergrößert.

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.

Beachten Sie: Sie können mit 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Leer

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- und max- sind erlaubt.
Beispiel
@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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • abgefragter Wert: Eines der Schlüsselwörter progressive oder interlace
  • betrifft: Medientyp tv
Beispiel
@media (scan: progressive) { /* Bildschirmlayout */ }
Beachten Sie: Der Internet Explorer erkennt bisher (Stand Juli 2011) die Kurzschreibweise (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).

  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
  • abgefragter Wert: Eine Zahl (Null oder Eins).
  • betrifft: sichtbare und fühlbare Medientypen
Beispiel
@media (grid: 0) { /* Zahlreiche Schriftformatierungen */ }

Siehe auch[Bearbeiten]

Quellen[Bearbeiten]

  1. W3C: How to unprefix -webkit-device-pixel-ratio
  2. quirksmode.org: More about devicePixelRatio
  3. W3C: light-level
  4. MDN: light-level
  5. W3C: pointer