Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / tutorialscss / Mediaqueries-Anleitung.php

Media queries


Abstrakt

HTML4 und CSS2 unterstützen derzeit medienabhängige Stylesheets, die auf verschiedene Medientypen zugeschnitten sind . Beispielsweise verwendet ein Dokument möglicherweise serifenlose Schriftarten, wenn sie auf einem Bildschirm angezeigt werden, und serifenlose Schriftarten, wenn sie gedruckt werden. ' screen' und ' print' sind zwei Medientypen, die definiert wurden. Medienabfragen erweitern die Funktionalität von Medientypen, indem sie eine genauere Kennzeichnung von Stylesheets ermöglichen.

Eine Medienabfrage besteht aus einem Medientyp und null oder mehr Ausdrücken, die die Bedingungen bestimmter Medienfunktionen prüfen . Zu den Medienfunktionen, die in Medienabfragen verwendet werden können, gehören " width", " height" und " color". Durch die Verwendung von Medienabfragen können Präsentationen auf eine bestimmte Reihe von Ausgabegeräten zugeschnitten werden, ohne dass der Inhalt selbst geändert werden muss.

Status dieses Dokuments

In diesem Abschnitt wird der Status dieses Dokuments zum Zeitpunkt seiner Veröffentlichung beschrieben. Andere Dokumente können dieses Dokument ersetzen. Eine Liste der aktuellen W3C-Veröffentlichungen und die letzte Überarbeitung dieses technischen Berichts finden Sie im Index der technischen W3C-Berichte unter http://www.w3.org/TR/.

Eine W3C-Empfehlung ist ein ausgereiftes Dokument, das umfassend geprüft wurde und sich als umsetzbar erwiesen hat. W3C fordert alle dazu auf, diese Spezifikation umzusetzen. Die ( archivierte ) öffentliche Mailingliste www-style@w3.org (siehe Anleitung ) wird für die Diskussion dieser Spezifikation bevorzugt. Wenn Sie eine E-Mail senden, geben Sie bitte den Text "css3-mediaqueries" in den Betreff ein, vorzugsweise so: "[ css3-mediaqueries ] ... Zusammenfassung des Kommentars ... ".

Dieses Dokument wurde von W3C-Mitgliedern, Software-Entwicklern sowie von anderen W3C-Gruppen und interessierten Parteien geprüft und vom Direktor als W3C-Empfehlung gebilligt. Es ist ein stabiles Dokument und kann als Referenzmaterial verwendet oder aus einem anderen Dokument zitiert werden. Die Rolle von W3C bei der Ausarbeitung der Empfehlung besteht darin, die Aufmerksamkeit auf die Spezifikation zu lenken und ihre weit verbreitete Verbreitung zu fördern. Dies verbessert die Funktionalität und Interoperabilität des Webs.

Weitere Informationen finden Sie im Implementierungsbericht der Arbeitsgruppe und in der Media Queries Test Suite .

Siehe auch die Darstellung der Kommentare und eine Liste der Änderungen gegenüber dem vorherigen Empfehlungsvorschlag .

Die Veröffentlichung als W3C-Empfehlung bedeutet keine Billigung durch die W3C-Mitgliedschaft. Dies ist ein Dokumententwurf, der jederzeit aktualisiert, ersetzt oder durch andere Dokumente ersetzt werden kann. Es ist nicht angebracht, dieses Dokument als nicht in Arbeit befindlich zu zitieren.

Dieses Dokument wurde von der CSS-Arbeitsgruppe (Teil der Stilaktivität ) erstellt.

Dieses Dokument wurde von einer Gruppe erstellt, die im Rahmen der W3C-Patentrichtlinie vom 5. Februar 2004 tätig ist . W3C führt eine öffentliche Liste aller Patentoffenlegungen, die im Zusammenhang mit den Leistungen der Gruppe gemacht wurden. Diese Seite enthält auch Anweisungen zur Offenlegung eines Patents. Eine Person, die über tatsächliche Kenntnisse eines Patents verfügt, von dem die Person glaubt, dass es wesentliche Ansprüche enthält, muss die Informationen gemäß Abschnitt 6 der W3C-Patentrichtlinie offenlegen .

Dieses Dokument ist identisch mit der vorherigen, vorgeschlagenen Empfehlungsversion: Mit Ausnahme des Stylesheets wurden redaktionelle Änderungen an der Titelseite wie Titel und Datum sowie die Entfernung des Abschnitts mit den älteren Änderungen vorgenommen.

Inhaltsverzeichnis

1. Hintergrund

(Dieser Abschnitt ist nicht normativ.)

HTML4 [HTML401] und CSS2 [CSS21] unterstützen derzeit medienabhängige Stylesheets, die auf verschiedene Medientypen zugeschnitten sind. Beispielsweise kann ein Dokument verschiedene Stylesheets für Bildschirm und Druck verwenden. In HTML4 kann dies wie folgt geschrieben werden:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

Innerhalb eines CSS-Stylesheets können Sie festlegen, dass Abschnitte für bestimmte Medientypen gelten:

@media screen {
  * { font-family: sans-serif }
}

Die Medientypen ' print' und ' screen' sind in HTML4 definiert. Die vollständige Liste der Medientypen in HTML4 lautet: ' aural', ' braille', ' handheld', ' print', ' projection', ' screen', ' tty', ' tv'. CSS2 definiert dieselbe Liste, setzt ' aural' außer Kraft und fügt ' embossed' und ' speech' hinzu. Außerdem wird mit ' all' angegeben, dass das Stylesheet für alle Medientypen gilt.

Medienspezifische Stylesheets werden von mehreren Benutzeragenten unterstützt. Das am häufigsten verwendete Merkmal ist die Unterscheidung zwischen ' screen' und ' print'.

Es wurde nach Möglichkeiten gefragt, die Art der Ausgabegeräte, auf die sich ein Stylesheet bezieht, genauer zu beschreiben. Glücklicherweise hat HTML4 diese Anforderungen vorausgesehen und eine vorwärtskompatible Syntax für Medientypen definiert. Hier ist ein Zitat aus HTML4, Abschnitt 6.13 :

Zukünftige Versionen von HTML führen möglicherweise neue Werte ein und ermöglichen möglicherweise parametrisierte Werte. Um die Einführung dieser Erweiterungen zu erleichtern, müssen konforme Benutzeragenten in der Lage sein, das zu analysierenMedien Attributwert wie folgt:

  1. Der Wert ist eine durch Kommas getrennte Liste von Einträgen. Zum Beispiel,
    media="screen, 3d-glasses, print and resolution > 90dpi"

    ist abgebildet auf:

    "screen"
    "3d-glasses"
    "print and resolution > 90dpi"
  2. Jeder Eintrag wird unmittelbar vor dem ersten Zeichen abgeschnitten, das kein US-ASCII-Buchstabe [a-zA-Z] ist (Unicode-Dezimalzahl 65-90, 97-122), Ziffer [0-9] (Unicode-Hexadezimalzahl 30-39). oder Bindestrich (45). Im Beispiel ergibt dies:
    "screen"
    "3d-glasses"
    "print"

Medienabfragen, wie in dieser Spezifikation beschrieben, bauen auf dem in HTML4 beschriebenen Mechanismus auf. Die Syntax von Medienabfragen entspricht der in HTML4 reservierten Medientypsyntax. Das media Attribut von HTML4 ist auch in XHTML und generischem XML vorhanden. Dieselbe Syntax kann auch in den CSS-Regeln ' @media' und ' @import' verwendet werden.

Die Analyseregeln für Medienabfragen sind jedoch nicht mit denen von HTML4 kompatibel, sodass sie mit denen der in CSS verwendeten Medienabfragen konsistent sind.

HTML5 [HTML5] (noch in Bearbeitung) verweist direkt auf die Media Queries-Spezifikation und aktualisiert somit die Regeln für HTML.

2. Medienabfragen

Eine Medienabfrage besteht aus einem Medientyp und null oder mehr Ausdrücken , die die Bedingungen bestimmter Medienfunktionen prüfen .

Bei Aussagen zu Medienabfragen in diesem Abschnitt wird davon ausgegangen, dass der Syntaxabschnitt befolgt wird. Medienabfragen, die nicht der Syntax entsprechen, werden im Abschnitt Fehlerbehandlung erläutert . Dh die Syntax hat Vorrang vor den Anforderungen in diesem Abschnitt.

Hier ist ein einfaches Beispiel in HTML geschrieben:

<link rel="stylesheet" media="screen and (color)" href="example.css" />

Dieses Beispiel drückt aus, dass ein bestimmtes Stylesheet ( example.css) für Geräte eines bestimmten Medientyps (' screen') mit bestimmten Funktionen gilt (es muss ein Farbbildschirm sein).

Hier die gleiche Medienabfrage, die in einer @ import-Regel in CSS geschrieben wurde:

@import url(color.css) screen and (color);

Eine Medienabfrage ist ein logischer Ausdruck, der entweder wahr oder falsch ist. Eine Medienabfrage ist wahr, wenn der Medientyp der Medienabfrage mit dem Medientyp des Geräts übereinstimmt, auf dem der Benutzeragent ausgeführt wird (wie in der Zeile "Betrifft" definiert), und alle Ausdrücke in der Medienabfrage wahr sind.

Für Medienabfragen, die für alle Medientypen gelten, wird eine Kurzsyntax angeboten. Das Schlüsselwort ' all' kann weggelassen werden (zusammen mit dem abschließenden ' and'). Dh wenn der Medientyp nicht explizit angegeben ist, ist er ' all'.

Dh diese sind identisch:

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

Wie sind diese:

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

In einer Medienabfrageliste können mehrere Medienabfragen zusammengefasst werden. Eine durch Kommas getrennte Liste von Medienabfragen. Wenn eine oder mehrere Medienabfragen in der durch Kommas getrennten Liste wahr sind, ist die gesamte Liste wahr und ansonsten falsch. In der Medienabfragesyntax steht das Komma für ein logisches ODER, das andSchlüsselwort ' ' für ein logisches UND.

Hier ist ein Beispiel für mehrere Medienabfragen in einer durch Kommas getrennten Liste unter Verwendung der @ media-Regel in CSS:

@media screen and (color), projection and (color) { … }

Wenn die Medienabfrageliste leer ist (dh die Deklaration ist die leere Zeichenfolge oder besteht nur aus Leerzeichen), wird sie als wahr ausgewertet.

Dh diese sind gleichwertig:

@media all { … }
@media { … }

Das logische NICHT kann durch das notSchlüsselwort ' ' ausgedrückt werden . Das Vorhandensein des Schlüsselworts ' not' am Anfang der Medienabfrage negiert das Ergebnis. Wenn also die Medienabfrage ohne das notSchlüsselwort ' ' wahr war , wird sie falsch und umgekehrt. Benutzerprogramme, die nur Medientypen unterstützen (wie in HTML4 beschrieben), erkennen das notSchlüsselwort ' ' nicht und das zugehörige Stylesheet wird daher nicht angewendet.

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

Das Schlüsselwort ' only' kann auch verwendet werden, um Stylesheets vor älteren Benutzeragenten auszublenden. Benutzerprogramme müssen Medienabfragen verarbeiten, die mit " only" beginnen , als ob das onlySchlüsselwort " " nicht vorhanden wäre.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Die Medienabfragesyntax kann mit HTML, XHTML, XML [XMLSTYLE] und den @ import- und @ media-Regeln von CSS verwendet werden.

Hier ist das gleiche Beispiel in HTML, XHTML, XML, @import und @media geschrieben:

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">
<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>
@import url(example.css) screen and (color), projection and (color);
@media screen and (color), projection and (color) { … }

Die Spezifikation [XMLSTYLE] wurde noch nicht aktualisiert, um Medienabfragen im media Pseudoattribut zu verwenden.

Wenn eine Medienfunktion nicht auf das Gerät angewendet wird, auf dem der UA ausgeführt wird, sind Ausdrücke, die die Medienfunktion betreffen, falsch.

Die Medienfunktion ' device-aspect-ratio' gilt nur für visuelle Geräte. Ausdrücke mit ' device-aspect-ratio' sind auf einem Hörgerät daher immer falsch:

<link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" />

Ausdrücke sind immer falsch, wenn die Maßeinheit nicht für das Gerät gilt.

Die pxEinheit ' ' gilt nicht für ' speech' Geräte, daher ist die folgende Medienabfrage immer falsch:

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

Beachten Sie, dass die Medienabfragen in diesem Beispiel wahr wären, wenn das Schlüsselwort ' not' am Anfang der Medienabfrage hinzugefügt worden wäre.

Um zirkuläre Abhängigkeiten zu vermeiden, ist es niemals erforderlich, das Stylesheet anzuwenden, um Ausdrücke auszuwerten. Zum Beispiel kann das Seitenverhältnis eines gedruckten Dokuments durch ein Stylesheet beeinflusst werden, aber Ausdrücke mit ' device-aspect-ratio' basieren auf dem Standard-Seitenverhältnis des Benutzerprogramms.

Von Benutzeragenten wird erwartet, dass sie die Seite als Reaktion auf Änderungen in der Benutzerumgebung neu auswerten und neu gestalten, z. B. wenn das Gerät vom Querformat- in den Hochformatmodus verschoben wird. Dies ist jedoch nicht erforderlich.

3. Syntax

Die Medienabfragesyntax wird in Bezug auf die CSS2-Grammatik beschrieben . Daher werden Regeln, die hier nicht definiert sind, in CSS2 definiert. Die media_query_listunten definierte Produktion ersetzt die media_listProduktion von CSS2. [CSS21]

media_query_list
 : S * [media_query [',' S * media_query] *]?
 ;
media_query
 : [NUR | NICHT]? S * media_type S * [AND S * expression] *
 | Ausdruck [AND S * Ausdruck] *
 ;
Medientyp
 : IDENT
 ;
Ausdruck
 : '(' S * media_feature S * [':' S * expr]? ')' S *
 ;
Medienfunktion
 : IDENT
 ;

COMMENT-Token, wie sie in CSS2 definiert sind, kommen in der Grammatik nicht vor (um sie lesbar zu halten), aber eine beliebige Anzahl dieser Token kann irgendwo zwischen anderen Token erscheinen. [CSS21]

Die folgenden neuen Definitionen werden eingeführt:

L l | \\ 0 {0,4} (4c | 6c) (\ r \ n | [\ t \ r \ n \ f])? | \\ l
Y y | \\ 0 {0,4} (59 | 79) (\ r \ n | [\ t \ r \ n \ f])? | \\ y

Die folgenden neuen Token werden eingeführt:

{O} {N} {L} {Y} {NUR zurück;}
{N} {O} {T} {return NOT;}
{A} {N} {D} {return AND;}
{num} {D} {P} {I} {return RESOLUTION;}
{num} {D} {P} {C} {M} {return RESOLUTION;}

RESOLUTIONsoll der CSS2- term Produktion hinzugefügt werden .

CSS-Stylesheets unterscheiden in der Regel nicht zwischen Groß- und Kleinschreibung. Dies gilt auch für Medienabfragen.

Zusätzlich zur Übereinstimmung mit der Syntax muss jede Medienabfrage Medientypen und Medienfunktionen gemäß ihrer jeweiligen Spezifikation verwenden, um als übereinstimmend angesehen zu werden.

Im folgenden Beispiel stimmt nur die erste Medienabfrage überein, da der Medientyp "Beispiel" nicht vorhanden ist.

@media all { body { background:lime } }
@media example { body { background:red } }

3.1. Fehlerbehandlung

Für Medienabfragen, die nicht konform sind, müssen Benutzeragenten die in diesem Abschnitt beschriebenen Regeln befolgen.

4. Medienfunktionen

Medienfunktionen ähneln syntaktisch CSS-Eigenschaften: Sie haben Namen und akzeptieren bestimmte Werte. Es gibt jedoch einige wichtige Unterschiede zwischen Eigenschaften und Medienmerkmalen:

Beispielsweise kann die colorMedienfunktion Ausdrücke ohne Wert (' (color)') oder mit Wert (' (min-color: 1)') bilden.

Diese Spezifikation definiert Medienfunktionen, die mit visuellen und taktilen Geräten verwendet werden können. In ähnlicher Weise können Medienfunktionen für akustische Medientypen definiert werden.

4.1. Breite

Wert: <Länge>
Gilt für: visuelle und taktile Medientypen
Akzeptiert Min / Max-Präfixe: Ja

Die widthMedienfunktion beschreibt die Breite des Zielanzeigebereichs des Ausgabegeräts. Bei Endlosmedien ist dies die Breite des Ansichtsfensters (wie in CSS2, Abschnitt 9.1.1 [CSS21] beschrieben ) einschließlich der Größe einer gerenderten Bildlaufleiste (falls vorhanden). Bei Seitenmedien ist dies die Breite des Seitenrahmens (wie in CSS2, Abschnitt 13.2 [CSS21] beschrieben ).

Eine angegebene <Länge> kann nicht negativ sein.

Diese Medienabfrage drückt beispielsweise aus, dass das Stylesheet für Druckausgaben mit einer Breite von mehr als 25 cm verwendet werden kann:

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

Diese Medienabfrage drückt aus, dass das Stylesheet auf Geräten mit Ansichtsfenstern (dem Teil des Bildschirms / Papiers, auf dem das Dokument gerendert wird) mit Breiten zwischen 400 und 700 Pixel verwendet werden kann:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Diese Medienabfrage drückt aus, dass das Stylesheet auf Bildschirm- und Handheld-Geräten verwendet werden kann, wenn die Breite des Ansichtsfensters größer als 20 ist.

@media handheld and (min-width: 20em), 
  screen and (min-width: 20em) { … }

Der emWert ' ' ist relativ zum Anfangswert von 'font-size'.

4.2. Höhe

Wert: <Länge>
Gilt für: visuelle und taktile Medientypen
Akzeptiert Min / Max-Präfixe: Ja

Die heightMedienfunktion beschreibt die Höhe des Zielanzeigebereichs des Ausgabegeräts. Bei Endlosmedien ist dies die Höhe des Ansichtsfensters einschließlich der Größe einer gerenderten Bildlaufleiste (falls vorhanden). Bei Seitenmedien ist dies die Höhe des Seitenrahmens.

Eine angegebene <Länge> kann nicht negativ sein.

4.3. Gerätebreite

Wert: <Länge>
Gilt für: visuelle und taktile Medientypen
Akzeptiert Min / Max-Präfixe: Ja

Die device-widthMedienfunktion ' ' beschreibt die Breite der Renderoberfläche des Ausgabegeräts. Bei Endlosmedien ist dies die Breite des Bildschirms. Bei Seitenmedien ist dies die Breite des Seitenblatts.

Eine angegebene <Länge> kann nicht negativ sein.

@media screen and (device-width: 800px) { … }

Im obigen Beispiel gilt das Stylesheet nur für Bildschirme, auf denen derzeit genau 800 horizontale Pixel angezeigt werden. Die pxEinheit ' ' ist von der logischen Art, wie im Abschnitt Einheiten beschrieben .

4.4. Gerätehöhe

Wert: <Länge>
Gilt für: visuelle und taktile Medientypen
Akzeptiert Min / Max-Präfixe: Ja

Die device-heightMedienfunktion beschreibt die Höhe der Renderoberfläche des Ausgabegeräts. Bei Endlosmedien ist dies die Höhe des Bildschirms. Bei Seitenmedien ist dies die Höhe des Seitenblatts.

Eine angegebene <Länge> kann nicht negativ sein.

<link rel="stylesheet" media="screen and (device-height: 600px)" />

Im obigen Beispiel gilt das Stylesheet nur für Bildschirme mit genau 600 vertikalen Pixeln. Beachten Sie, dass die Definition der pxEinheit ' ' dieselbe ist wie in anderen Teilen von CSS.

4.5. Orientierung

Wert: Porträt | Landschaft
Gilt für: Bitmap - Medientypen
akzeptiert min / max - Präfixe: nein

Die orientationMedienfunktion ist, portraitwenn der Wert der heightMedienfunktion größer oder gleich dem Wert der widthMedienfunktion ist. Ansonsten orientationist ' landscape' '.

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

4.6. Seitenverhältnis

Wert: <ratio>
Betrifft: Bitmap-Medientypen
Akzeptiert Min / Max-Präfixe: yes

Das aspect-ratioMedienmerkmal ist definiert als das Verhältnis des Werts des widthMedienmerkmals zum Wert des heightMedienmerkmals.

4.7. Geräte-Seitenverhältnis

Wert: <ratio>
Betrifft: Bitmap-Medientypen
Akzeptiert Min / Max-Präfixe: yes

Das device-aspect-ratioMedienmerkmal ist definiert als das Verhältnis des Werts des device-widthMedienmerkmals zum Wert des device-heightMedienmerkmals.

Wenn ein Bildschirmgerät mit quadratischen Pixeln beispielsweise 1280 horizontale Pixel und 720 vertikale Pixel aufweist (im Allgemeinen als "16: 9" bezeichnet), stimmen die folgenden Medienabfragen alle mit dem Gerät überein:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

4.8. Farbe

Wert: <Ganzzahl>
Gilt für: visuelle Medientypen
Min / Max-Präfixe akzeptieren: Ja

Die colorMedienfunktion beschreibt die Anzahl der Bits pro Farbkomponente des Ausgabegeräts. Wenn das Gerät kein Farbgerät ist, ist der Wert Null.

Eine angegebene <Ganzzahl> kann nicht negativ sein.

Diese beiden Medienabfragen drücken beispielsweise aus, dass ein Stylesheet für alle Farbgeräte gilt:

@media all and (color) { … }
@media all and (min-color: 1) { … }

Diese Medienabfrage drückt aus, dass ein Stylesheet für Farbgeräte mit 2 oder mehr Bits pro Farbkomponente gilt:

@media all and (min-color: 2) { … }

Wenn unterschiedliche Farbkomponenten durch unterschiedliche Anzahl von Bits dargestellt werden, wird die kleinste Anzahl verwendet.

Wenn beispielsweise ein 8-Bit-Farbsystem die rote Komponente mit 3 Bit, die grüne Komponente mit 3 Bit und die blaue Komponente mit 2 Bit darstellt, hat die colorMedienfunktion den Wert 2.

In einem Gerät mit indizierten Farben wird die Mindestanzahl von Bits pro Farbkomponente in der Nachschlagetabelle verwendet.

Die beschriebene Funktionalität kann Farbfähigkeiten nur oberflächlich beschreiben. Wenn weitere Funktionen erforderlich sind, bietet RFC2531 [RFC2531] spezifischere Medienfunktionen, die zu einem späteren Zeitpunkt möglicherweise unterstützt werden.

4.9. Farbindex

Wert: <Ganzzahl>
Betrifft: visuelle Medientypen
Akzeptiert Min / Max-Präfixe: Ja

Die color-indexMedienfunktion ' ' beschreibt die Anzahl der Einträge in der Farbnachschlagetabelle des Ausgabegeräts. Wenn das Gerät keine Farbnachschlagetabelle verwendet, ist der Wert Null.

Eine angegebene <Ganzzahl> kann nicht negativ sein.

Es gibt beispielsweise zwei Möglichkeiten, um auszudrücken, dass ein Stylesheet für alle Farbindexgeräte gilt:

@media all and (color-index) { … }
@media all and (min-color-index: 1) { … }

Diese Medienabfrage drückt aus, dass ein Stylesheet für ein Farbindexgerät mit 256 oder mehr Einträgen gilt:

<?xml-stylesheet media="all and (min-color-index: 256)" 
  href="http://www.example.com/…" ?>

4.10. einfarbig

Wert: <Ganzzahl>
Betrifft: visuelle Medientypen
Akzeptiert Min / Max-Präfixe: Ja

Die monochromeMedienfunktion beschreibt die Anzahl der Bits pro Pixel in einem monochromen Einzelbildpuffer. Wenn das Gerät kein Monochrom-Gerät ist, ist der Wert des Ausgabegeräts 0.

Eine angegebene <Ganzzahl> kann nicht negativ sein.

Es gibt zwei Möglichkeiten, um auszudrücken, dass ein Stylesheet für alle monochromen Geräte gilt:

@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }

Drücken Sie aus, dass ein Stylesheet für monochrome Geräte mit mehr als 2 Bit pro Pixel gilt:

@media all and (min-monochrome: 2) { … }

Drücken Sie aus, dass es ein Stylesheet für Farbseiten und ein anderes für Monochrom gibt:

<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

4.11. Auflösung

Wert: <Auflösung>
Betrifft: Bitmap-Medientypen
Akzeptiert Min / Max-Präfixe: Ja

Die resolutionMedienfunktion beschreibt die Auflösung des Ausgabegeräts, dh die Dichte der Pixel. Bei der Abfrage von Geräten mit nicht quadratischen Pixeln muss bei min-resolutionAbfragen die Dimension mit der geringsten Dichte mit dem angegebenen Wert max-resolutionverglichen werden. Bei Abfragen müssen stattdessen die Dimensionen mit der höchsten Dichte verglichen werden. Eine resolutionAbfrage ' ' (ohne ein "min-" oder "max-" Präfix) stimmt nie mit einem Gerät mit nicht quadratischen Pixeln überein.

Für Drucker entspricht dies der Rasterauflösung (der Auflösung für das Drucken von Punkten beliebiger Farbe).

Diese Medienabfrage drückt beispielsweise aus, dass ein Stylesheet auf Geräten mit einer Auflösung von mehr als 300 Punkten pro Zoll verwendet werden kann:

@media print and (min-resolution: 300dpi) { … }

Diese Medienabfrage drückt aus, dass ein Stylesheet auf Geräten mit einer Auflösung von mehr als 118 Punkten pro Zentimeter verwendet werden kann:

@media print and (min-resolution: 118dpcm) { … }

4.12. Scan

Wert: progressiv | interlace
Betrifft: Medientypen "tv"
Akzeptiert Min / Max-Präfixe: nein

Die scanMedienfunktion beschreibt den Scanvorgang von "TV" -Ausgabegeräten.

Diese Medienabfrage drückt beispielsweise aus, dass ein Stylesheet auf Fernsehgeräten mit progressivem Scannen verwendet werden kann:

@media tv and (scan: progressive) { … }

4.13. Gitter

Wert: <Ganzzahl>
Gilt für: visuelle und taktile Medientypen
Akzeptiert Min / Max-Präfixe: Nein

Die gridMedienfunktion wird verwendet, um abzufragen, ob das Ausgabegerät ein Raster oder eine Bitmap ist. Wenn das Ausgabegerät netzbasiert ist (z. B. ein "tty" -Terminal oder ein Telefondisplay mit nur einer festen Schriftart), ist der Wert 1. Andernfalls ist der Wert 0.

Nur 0 und 1 sind gültige Werte. (Dazu gehört -0.) Alles andere erstellt also eine fehlerhafte Medienabfrage.

Hier sind zwei Beispiele:

@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

5. Werte

Diese Spezifikation führt auch zwei neue Werte ein.

Der <ratio> -Wert ist eine positive (nicht null oder negative) <integer>, gefolgt von einem optionalen Leerzeichen, gefolgt von einem Solidus (' /'), gefolgt von einem optionalen Leerzeichen, gefolgt von einer positiven <integer>.

Der Wert <resolution> ist eine positive <number>, unmittelbar gefolgt von einer Einheitenkennung (' dpi' oder ' dpcm').

Leerzeichen, <Ganzzahl>, <Zahl> und andere in dieser Spezifikation verwendete Werte sind dieselben wie in anderen Teilen von CSS, die normalerweise in CSS 2.1 definiert sind. [CSS21]

6. Einheiten

Die in Medienabfragen verwendeten Einheiten sind dieselben wie in anderen Teilen von CSS. Beispielsweise repräsentiert die Pixeleinheit CSS-Pixel und keine physischen Pixel.

Relative Einheiten in Medienabfragen basieren auf dem Anfangswert. Dies bedeutet, dass Einheiten niemals auf Deklarationsergebnissen basieren. In HTML ist die emEinheit beispielsweise relativ zum Anfangswert von ' font-size'.

6.1. Auflösung

Die Einheiten ' dpi' und ' dpcm' beschreiben die Auflösung eines Ausgabegeräts, dh die Dichte der Gerätepixel. Kennungen für Auflösungseinheiten sind:

dpi
Punkte pro CSS ' inch'
dpcm
Punkte pro CSS centimeter

In dieser Spezifikation werden diese Einheiten nur in der resolutionMedienfunktion verwendet.