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.

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

@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'.

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

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

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

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

<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) { … }

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.

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

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

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.

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

• Unbekannte Medientypen. Unbekannte Medientypen werden als falsch bewertet. Tatsächlich werden sie identisch mit bekannten Medientypen behandelt, die nicht mit dem Medientyp des Geräts übereinstimmen.

  Die Medienabfrage " unknown" wird als " " falsch ausgewertet, sofern unknownes sich nicht tatsächlich um einen unterstützten Medientyp handelt. Ebenso wird " not unknown" als wahr ausgewertet.

  Unbekannte Medientypen unterscheiden sich von Medientypen, die nicht der IDENT-Produktion entsprechen. Diese fallen unter die Klausel für fehlerhafte Medienabfragen.

• Unbekannte Medienfunktionen. Benutzerprogramme sollen eine Medienabfrage als " not all" darstellen, wenn eine der angegebenen Medienfunktionen nicht bekannt ist.

  <link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" />

  In diesem Beispiel wird die erste Medienabfrage als " not all" dargestellt und mit " " false ausgewertet, und die zweite Medienabfrage wird so ausgewertet, als ob die erste nicht angegeben worden wäre.

  @media (min-orientation:portrait) { … }

  Wird als " not all" dargestellt, da die orientationFunktion " " das min-Präfix " " nicht akzeptiert .

• Unbekannte Medienfeature-Werte. Wie bei unbekannten Medienfunktionen müssen Benutzerprogramme eine Medienabfrage als " not all" darstellen, wenn einer der angegebenen Medienfunktionswerte nicht bekannt ist.

  Die Medienabfrage (color:20example)gibt einen unbekannten Wert für die colorMedienfunktion an und wird daher als " not all" dargestellt.

  Diese Medienabfrage wird als " not all" dargestellt, da negative Längen für die widthMedienfunktion nicht zulässig sind :

  @media (min-width: -100px) { … }

• Fehlerhafte Medienabfrage. Benutzerprogramme müssen unerwartete Token verarbeiten, die beim Analysieren einer Medienabfrage aufgetreten sind, indem sie bis zum Ende der Medienabfrage gelesen werden. Dabei müssen die Regeln für die Übereinstimmung von Paaren von (), [], {}, "" und '' beachtet und ordnungsgemäß verarbeitet werden entkommt. Medienabfragen mit unerwarteten Token werden als " not all" dargestellt. [CSS21]

  @media (example, all,), speech { /* only applicable to speech devices */ }
  @media &test, screen           { /* only applicable to screen devices */ }

  Das Folgende ist eine fehlerhafte Medienabfrage, da kein Leerzeichen zwischen ' and' und dem Ausdruck zulässig ist. (Dies ist für die Syntax der funktionalen Notation reserviert.)

  @media all and(color) { … }

  Es wird erwartet, dass Medienabfragen auch den Fehlerbehandlungsregeln der Hostsprache entsprechen.

  @media test;,all { body { background:lime } }

  … Wird nicht angewendet, da das Semikolon die @mediaRegel in CSS beendet.

4. Medienfunktionen

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

• Eigenschaften werden in Deklarationen verwendet , um Informationen zum Präsentieren eines Dokuments bereitzustellen. Medienfunktionen werden in Ausdrücken verwendet , um die Anforderungen des Ausgabegeräts zu beschreiben.
• Die meisten Medienfunktionen akzeptieren optionale Präfixe " min-" oder " max-", um "größer oder gleich" und "kleiner oder gleich" auszudrücken. Diese Syntax wird verwendet, um "<" und ">" Zeichen zu vermeiden, die zu Konflikten mit HTML und XML führen können. Die Medienfunktionen, die Präfixe akzeptieren, werden am häufigsten mit Präfixen verwendet, können jedoch auch alleine verwendet werden.
• Eigenschaften erfordern immer einen Wert, um eine Deklaration zu bilden. Medienfunktionen können dagegen auch ohne Wert verwendet werden. Für eine Medien - Funktion Funktion , wird zu true ausgewertet , wenn auf true wird für einen Wert x ungleich Null oder Null durch eine Einheitskennung gefolgt (dh andere als , , , etc.). Medienfunktionen, denen ein Min / Max-Wert vorangestellt ist, können nicht ohne Wert verwendet werden. Wenn eine Medienfunktion mit dem Präfix min / max ohne Wert verwendet wird, ist die Medienabfrage fehlerhaft. (feature)(feature:x)00px0em
• Eigenschaften akzeptieren möglicherweise komplexere Werte, z. B. Berechnungen mit mehreren anderen Werten. Medienfunktionen akzeptieren nur einzelne Werte: ein Schlüsselwort, eine Nummer oder eine Nummer mit einer Einheiten-ID. (Die einzigen Ausnahmen sind die Medienfunktionen " aspect-ratio" und " device-aspect-ratio".)

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

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.

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

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

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

4.2. Höhe

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

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) { … }

4.4. Gerätehöhe

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)" />

4.5. Orientierung

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

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

4.7. Geräte-Seitenverhältnis

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

@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

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.

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

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

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

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

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.

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

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

4.10. einfarbig

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.

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

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

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

4.11. Auflösung

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

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

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

4.12. Scan

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

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

4.13. Gitter

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.

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