CSS/Media Queries

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Eine Stärke von CSS liegt darin, dass die Darstellung eines Dokuments für verschiedene Ausgabemedien festgelegt werden kann. Die Zuordnung eines Stylesheets zu einem Medium erfolgt mit Hilfe von Medienabfragen (Media Queries).

Als Medienabfrage wird eine Liste von Kriterien bezeichnet, die ein Ausgabemedium erfüllen muss, damit ein Stylesheet zur Verarbeitung eingebunden wird. Medienabfragen bestehen aus einem Medientyp (z.B. Bildschirm oder Drucker), einem Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem. Mithilfe der Kombinationsmöglichkeit können Stylesheets auf eine Vielzahl von Ausgabemedien zugeschnitten werden.

Medienabfragen können an allen Stellen verwendet werden, wo Stylesheets eingebunden werden bzw. dort, wo eine Medienangabe abgefragt wird. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird das damit verknüpfte Stylesheet eingebunden.

Beachten Sie: Häufig werden Sie Media Queries dafür verwenden wollen, um auf verschiedene Breiten der Ausgabebildschirme reagieren zu können. Damit die Webseite sowohl in einem schmalen Browserfenster des Desktop-PCs als auch auf dem Smartphone oder Laptop wunschgemäß dargestellt wird, müssen Sie mithilfe eines meta-Elements dafür sorgen, dass sich die Seite an den Viewport anpasst. Notieren Sie dazu folgende Zeile im head der Seite:
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
Für weitere Erklärungen siehe HTML/Kopfdaten/meta#Viewport_einstellen.

Inhaltsverzeichnis

[Bearbeiten] Anwendung

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

Die Angabe eines Medientyps erfolgt als einfaches Schlüsselwort, z.B. screen.

Beachten Sie: Wird keine Medienabfrage angegeben oder besteht die angegebene Abfrage nur aus Leerzeichen, so gilt der Standardwert all.

[Bearbeiten] Einbindung

Beispiel: Medienabfrage im HTML-Dokument
<link rel="stylesheet" href="bildschirm-stylesheet.css" media="screen">
<link rel="stylesheet" href="druck-stylesheet.css" media="print">
In diesem Beispiel wird das „Bildschirm-Stylesheet“ mithilfe des link-Elements für Bildschirme eingebunden, das „Druck-Stylesheet“ für Drucker und gleichartige Geräte. (Medientyp print).
Beachten Sie: Diese Variante hat den Nachteil, dass in beiden Stylesheets oft dieselben CSS-Regeln definiert werden müssen, da das „Bildschirm-Stylesheet“ nicht für Druck-Ausgaben gilt und umgekehrt. Zudem müssen zwei Ressourcen vom Server übertragen werden.


Beispiel: Medienabfrage im HTML-Dokument
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="druck-stylesheet.css" media="print">
In diesem Beispiel wird das Druck-Stylesheet mit Hilfe des link-Elements für Drucker und gleichartige Geräte eingebunden (Medientyp print). Das Stylesheet stylesheet.css gilt für alle Ausgabemedien. So brauchen in diesem Fall in das „Druck-Stylesheet“ nur die Änderungen gegenüber dem allgemeinen Stylesheet eingetragen werden.
Beachten Sie: Auch in diesem Fall müssen zwei Ressourcen übertragen werden.


Beispiel: Medienabfrage in der CSS-Ressource
/* CSS-Regeln für alle Ausgabegeräte */
@media print {
  /* zusätzliche oder abweichende CSS-Regeln für Drucker */
}
In diesem Beispiel sind die CSS-Regeln für unterschiedliche Ausgabemedien in einer Ressource zusammengefasst.
Empfehlung: Aus Gründen der Performance sollten Sie diese Variante der Einbindung wählen.
Beachten Sie: Media Queries können nicht in style-Attributen notiert werden.

Siehe auch: Formular zum ausfüllen und dann ausdrucken

[Bearbeiten] Notation

Die einzelnen Medientypen werden in einem nachfolgenden Abschnitt aufgezeigt.

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

Ein Medienmerkmal wird notiert, indem innerhalb von runden Klammern ein Schlüsselwort notiert wird. Diesem Schlüsselwort folgt optional ein Doppelpunkt sowie eine Längenangabe oder ein weiteres Schlüsselwort.

Mithilfe der vollständigen Notation (z.B. (orientation: landscape)) wird ein zu erfüllendes Kriterium detailliert festgelegt. Die Kurzschreibweise (z.B. (color)) kann verwendet werden, um zu prüfen, ob das angegebene Merkmal von einem Ausgabemedium unterstützt wird. Wird ein Merkmal abgefragt, das der Browser nicht kennt, so wird die Abfrage ignoriert.

Einige Medienmerkmale können mit den Präfixen min- oder max- versehen werden, wodurch ihre Bedeutung um „größer oder gleich“ bzw. „kleiner oder gleich“ erweitert werden kann.

Beispiel
In diesen Beispielen werden Stylesheets anhand verschiedener Kriterien (und außerdem auf verschiedene Arten) eingebunden.
<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)">
Das Stylesheet kompakt.css wird eingebunden, wenn die Inhalte auf Seiten im Hochformat ausgegeben werden.
<style type="text/css" media="(color)">
/* Farbangaben. */
</style>
Die im style-Element angegebenen Farbangaben werden verarbeitet, wenn das Ausgabemedium Farben darstellen kann.
@import 'layout.css' (min-width: 50em);
Das Stylesheet layout.css kommt zur Anwendung, wenn der Anzeigebereich des Ausgabemediums mindestens 50em beträgt. Die Einheit em bezieht sich dabei auf die Standardschriftgröße des Browsers.

Die einzelnen Medienmerkmale sowie ihre Browserunterstützung werden in einem nachfolgenden Abschnitt aufgezeigt.

[Bearbeiten] Gruppierung und Kombination

Mithilfe von Kommata können Medienabfragen gruppiert werden. Gruppierte Abfragen sind voneinander völlig unabhängig. Sobald mindestens eine der Abfragen zutrifft, werden die Deklarationen angewendet.

Beispiel
@media print, embossed { /* Formate für Printmedien. */ }
In diesem Beispiel wird ein Stylesheet festgelegt, das sowohl für den Medientyp print als auch den Medientyp embossed verwendet werden kann.

Mehrere Medienmerkmale können mit dem Schlüsselwort and (und) verbunden werden. Ein Stylesheet wird nur dann verarbeitet, wenn alle mit and verbundenen Kriterien erfüllt werden. Auch die Verbindung mit einem einzelnen Medientyp ist möglich, muss aber am Anfang der Abfrage notiert werden. Wird eine Typangabe mit einem Merkmal verbunden, das auf dem Medientyp nicht vorkommen kann, z.B. Maßangaben bei Sprachausgabe, so wird die Medienabfrage ignoriert. Andere, mit Komma isolierte Abfragen, sind davon nicht betroffen.

Beispiel
@media (min-width: 30em) and (max-width: 60em) { /* Kompaktes Layout */ }
@media print and (color), screen and (color), screen and (three-dee) { /* Farbangaben */ }
Das Schlüsselwort and verbindet verschiedene Kriterien. Das kompakte Layout wird eingebunden, wenn der Ausgabebereich mindestens 30em und höchstens 60em breit ist. Kann die Darstellung auf Bildschirmen oder Druckern in Farbe erfolgen, werden die Farbangaben verarbeitet. Beachten Sie, dass die dritte Abfrage im zweiten Beispiel ignoriert wird, da es kein Merkmal mit dem Namen three-dee gibt. Die anderen Abfragen sind davon jedoch nicht beeinträchtigt.

Ist ein Medientyp am Anfang einer Medienabfrage notiert, so kann dieser Angabe das Schlüsselwort only oder das Schlüsselwort not vorangestellt werden.

only (nur) erfüllt dabei nur den Zweck, die Medienabfrage vor Browsern zu verstecken, die Medienmerkmale und die damit verbundenen Kombinationsmöglichkeiten nicht unterstützen. Ansonsten wird die Abfrage verarbeitet, als wäre das Schlüsselwort nicht vorhanden.

Wird einer Medienabfrage der Operator not (nicht) vorangestellt, so wird die Abfrage verneint (das bedeutet, dass not gegenüber and nachrangig ist). Andere, beispielweise durch Kommata isolierte Abfragen, werden von dem Schlüsselwort nicht beeinflusst.

Beispiel
@media only all and (min-width: 50em) { /* Layout */ }
@media not all and (monochrome) { /* Farben */ }
Dieses Beispiel zeigt, wie das Stylesheet Layout Bildschirmen mit einem mindestens 50em breiten Anzeigebereich zugewiesen wird. Ein Browser, der Medienabfragen versteht, ignoriert das Schlüsselwort only. Durch die Verneinung der Abfrage „Medientypen mit Graustufendarstellung“ werden die Farbangaben von allen Medien verwendet, die mit Farbangaben umgehen können.

[Bearbeiten] Wertangaben in Merkmalabfragen

Innerhalb eines Ausdrucks können Schlüsselwörter und Längenangaben vorkommen. Die Bedeutung der Schlüsselwörter wird in den einzelnen Merkmalen erklärt. Eine Besonderheit betrifft relative Längenangaben wie z.B. em oder ex. Bei der Verarbeitung dieser Werte wird vom Standardwert des Browsers ausgegangen, der vom Benutzer definiert wurde.

Jedes Merkmal kann auch ohne Wertangabe verwendet werden. In diesem Fall wird abgefragt, ob das Merkmal auf dem verwendeten Medium vorhanden ist.

Beispiel
@media (width) { /* Das Ausgabemedium besitzt das Merkmal „Breite“ */ }
@media (color) { /* Das Ausgabemedium besitzt das Merkmal „Farbfähigkeit“ */ }

[Bearbeiten] siehe auch

[Bearbeiten] Übersicht der Medientypen

  • HTML 4.0
  • CSS 2.0

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 Richtbeschreibung Standard und Unterstützung
all Alle Ausgabemedien. Dies ist der Standardwert.
print für Drucker, die Inhalte sichtbar auf Papier drucken.
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
screen (Computer-)Bildschirme
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
speech für Sprachsynthesizer gedacht.
Die Angabe ist für ein zukünftiges CSS-Modul reserviert und wird bisher (Stand September 2014) nicht verwendet,
soll aber den Medientyp „aural“ ersetzen.
  • CSS 2.1
  • Opera


[Bearbeiten] Einordnung in Geräteklassen

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 anstelle der Standardseite mit allen Informationen nur eine abgespeckte mobile Version geladen wurde. In Media Queries level 4 wurden diese Medientypen als missbilligt eingestuft.
Empfehlung: Für den Medientyp @screen ist es besser, Breakpoints anhand der Eigenschaften wie Bildschirmauflösung, Seitenverhältnis, bzw. der Orientation, wie es gerade gehalten wird, zu erstellen. Eine andere Möglichkeit wäre das Auslesen der User-Agent-Kennung, um mobile Geräte zu identifizieren.


Übersicht der als deprecated deklarierten Medientypen in CSS
Medientyp Richtbeschreibung Standard und Unterstützung
aural Ausgabemedien, die sich synthetischer Sprachausgabe bedienen.
  • Achtung
braille Geräte, auf denen die Braille-Schrift (umgangssprachlich „Blindenschrift“) tastbar wiedergegeben werden kann.
  • Achtung
embossed Drucker, die Braille-Schrift tastbar auf Papier einprägen.
  • Achtung
handheld Geräte, die üblicherweise in der Hand gehalten werden, einen kleinen Bildschirm besitzen und über wenig Bandbreite verfügen.
  • Achtung
projection Geräte, die Inhalte projizieren
  • Achtung
  • Opera 5.12
tty Geräte, deren Darstellung über ein Raster definiert wird (z.B. durch nicht-proportionale Schriftarten).
  • Achtung
tv gedacht für Geräte, die Informationen eingeschränkt visuell und akustisch wiedergeben können.
  • Achtung

[Bearbeiten] Einordnung in Mediengruppen

Eigenschaften in CSS werden nicht nur für ein einzelnes Medium definiert, sondern für mehrere Ausgabemedien. Farbangaben können beispielsweise auf einer Vielzahl von Ausgabemedien verarbeitet werden.

Aus Vereinfachungsgründen fasst CSS daher Medientypen zu Mediengruppen zusammen. Bei der Definition einer Eigenschaft muss so nur auf eine Mediengruppe eingegangen werden, anstatt alle Medientypen einzeln aufzulisten.

Medientypen werden in folgende Gruppen eingeteilt:

  • fortlaufende oder paginierte (auf Seiten aufgeteilte) Darstellung,
  • sichtbar, hörbar (Töne, Signale), gesprochen oder fühlbar,
  • Raster- oder Bitmap-Darstellung (teils bezogen auf die Darstellung von Schriftzeichen),
  • interaktiv oder statisch,
  • alle Medientypen.
Beziehung zwischen Medientypen und Mediengruppen
Medientyp Mediengruppen
Aufteilung Wahrnehmung Darstellung Interaktion
aural fortlaufend gesprochen beides
braille fortlaufend fühlbar Raster beides
embossed paginiert fühlbar Raster statisch
handheld beides sichtbar, hörbar, gesprochen Bitmap beides
print paginiert sichtbar Bitmap statisch
projection paginiert sichtbar Bitmap interaktiv
screen fortlaufend sichtbar, hörbar Bitmap beides
speech fortlaufend gesprochen beides
tty fortlaufend sichtbar Raster beides
tv beides sichtbar, hörbar Bitmap beides

Achtung!

Da die Beschreibung der Medientypen nur informativ ist, handelt es sich auch bei der Einteilung in Mediengruppen mehr um einen Wegweiser als um feste Vorgaben.

[Bearbeiten] Übersicht der Medienmerkmale

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“.

[Bearbeiten] width

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.

[Bearbeiten] 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.

  • 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.

[Bearbeiten] device-width

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.

[Bearbeiten] device-height

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.

[Bearbeiten] device-pixel-ratio

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.

  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
  • 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.

[Bearbeiten] orientation

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 bisher (Stand Juli 2011) die Kurzschreibweise (orientation) nicht. Sie sollten dieses Merkmal daher nur in Verbindung mit einem der vorgegebenen Schlüsselwörter verwenden.

ToDo    (weitere ToDos)

aktuellen Stand ermitteln --Matthias Scharwies (Diskussion) 19:35, 29. Dez. 2015 (CET)

[Bearbeiten] aspect-ratio

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).

[Bearbeiten] device-aspect-ratio

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.

[Bearbeiten] 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.

  • 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 */ }

[Bearbeiten] color-index

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.

[Bearbeiten] 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.

  • 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 */ }

[Bearbeiten] light-level

Das Merkmal light-level (Lichtstärke) beschreibt die Lichtverhältnisse der Umgebung, die durch den Helligkeitssensor der Kamera erfasst werden.[1][2]

  • CSS 3.0
  • Leer
  • Leer
  • Leer
  • 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; }
}

[Bearbeiten] pointer

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.[3]

  • CSS 3.0
  • Leer
  • 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 Innenenabstand 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.

[Bearbeiten] 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.

  • 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 */ }

[Bearbeiten] 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.

  • 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.


[Bearbeiten] 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).

  • 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 */ }

[Bearbeiten] Siehe auch

[Bearbeiten] Quellen

  1. W3C: light-level
  2. MDN: @media: light-level]
  3. http://dev.w3.org/csswg/mediaqueries-4/#pointer



Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML