CSS/Media Queries: Unterschied zwischen den Versionen
(→Einordnung in Geräteklassen) |
Apsel (Diskussion | Beiträge) K (→Einordnung in Geräteklassen) |
||
| Zeile 166: | Zeile 166: | ||
{{Empfehlung| | {{Empfehlung| | ||
| − | Um Inhalte für Nutzer der unterschiedlichen Geräteklassen von der Smartwatch bis zum Breitbild-Monitor möglichst gut lesbar darzustellen, sollten Sie [[Breakpoint|Breakpoints] so einsetzen, dass alle Inhalte - insbesondere Fließtexte - ohne horizontales Scrollen erreichbar sind. Auf großen Bildschirmen sollte der Platz sinnvoll genutzt werden. Die Einheit <code>em</code> hat sich hierfür als sinnvoll bei der Formulierung von Kriterien erwiesen. Auch sollte der Designprozess von kleinen Bildschirmen hin zu größeren gestaltet werden (s. a. [[mobile first|Webstandards/responsive Webdesign]])}} | + | Um Inhalte für Nutzer der unterschiedlichen Geräteklassen von der Smartwatch bis zum Breitbild-Monitor möglichst gut lesbar darzustellen, sollten Sie [[Breakpoint|Breakpoints]] so einsetzen, dass alle Inhalte - insbesondere Fließtexte - ohne horizontales Scrollen erreichbar sind. Auf großen Bildschirmen sollte der Platz sinnvoll genutzt werden. Die Einheit <code>em</code> hat sich hierfür als sinnvoll bei der Formulierung von Kriterien erwiesen. Auch sollte der Designprozess von kleinen Bildschirmen hin zu größeren gestaltet werden (s. a. [[mobile first|Webstandards/responsive Webdesign]])}} |
Version vom 1. Juni 2016, 09:17 Uhr
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.
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
Anwendung
Die Angabe eines Medientyps erfolgt als einfaches Schlüsselwort, z.B. screen.
all.Einbindung
<link rel="stylesheet" href="bildschirm-stylesheet.css" media="screen">
<link rel="stylesheet" href="druck-stylesheet.css" media="print">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="druck-stylesheet.css" media="print">
link-Elements für Drucker und gleichartige Geräte eingebunden (Medientyp print). Das Stylesheet stylesheet.css gilt für alle Ausgabemedien. Daher müssen bei dieser Art der Einbindung in das „Druck-Stylesheet“ alle Änderungen gegenüber dem allgemeinen Stylesheet eingetragen werden. Vor allem, wenn sich die Druckausgabe erheblich von der Bildschirmdarstellung unterscheidet, können das sehr viele Regeln sein. Diese Methode ist daher besser geeignet, wenn sich Bildschirmdarstellung und Druckausgabe sehr ähneln.
overflow) die Sie auf dem Bildschirm erfolgreich getestet haben, können beim Druck zu Problemen führen.
/* CSS-Regeln für alle Ausgabegeräte */
@media print {
/* zusätzliche oder abweichende CSS-Regeln für Drucker */
}
Siehe auch: Formular zum ausfüllen und dann ausdrucken
Notation
Die einzelnen Medientypen werden in einem nachfolgenden Abschnitt aufgezeigt.
Ein Medienmerkmal wird abgefragt, indem innerhalb von runden Klammern ein Schlüsselwort notiert wird. Diesem Schlüsselwort folgt optional ein Doppelpunkt und ein Wert (z. B. eine Längenangabe in Pixeln oder em 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.
<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)">
<style type="text/css" media="(color)">
/* Farbangaben. */
</style>
style-Element angegebenen Farbangaben werden verarbeitet, wenn das Ausgabemedium Farben darstellen kann.@import 'layout.css' (min-width: 50em);
em bezieht sich dabei auf die Standardschriftgröße des Browsers.Die einzelnen Medienmerkmale sowie ihre Browserunterstützung werden in einem nachfolgenden Abschnitt aufgezeigt.
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.
@media print, embossed { /* Formate für Printmedien. */ }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.
@media (min-width: 30em) and (max-width: 60em) { /* Kompaktes Layout */ }
@media print and (color), screen and (color), screen and (three-dee) { /* Farbangaben */ }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.
@media only all and (min-width: 50em) { /* Layout */ }
@media not all and (monochrome) { /* Farben */ }only.
Durch die Verneinung der Abfrage „Medientypen mit Graustufendarstellung“ werden die Farbangaben von allen Medien verwendet, die mit Farbangaben umgehen können.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.
@media (width) { /* Das Ausgabemedium besitzt das Merkmal „Breite“ */ }
@media (color) { /* Das Ausgabemedium besitzt das Merkmal „Farbfähigkeit“ */ }siehe auch
Übersicht der Medientypen
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 | Richtbeschreibung | Standard und Unterstützung |
|---|---|---|
| all | Alle Ausgabemedien. Dies ist der 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 September 2014) nicht verwendet, soll aber den Medientyp „aural“ ersetzen. |
Einordnung in Geräteklassen
@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.
em hat sich hierfür als sinnvoll bei der Formulierung von Kriterien erwiesen. Auch sollte der Designprozess von kleinen Bildschirmen hin zu größeren gestaltet werden (s. a. Webstandards/responsive Webdesign)
| Medientyp | Richtbeschreibung | Standard und Unterstützung |
|---|---|---|
| aural | Ausgabemedien, die sich synthetischer Sprachausgabe bedienen. | |
| braille | Geräte, auf denen die Braille-Schrift (umgangssprachlich „Blindenschrift“) tastbar wiedergegeben werden kann. | |
| embossed | Drucker, die Braille-Schrift tastbar auf Papier einprägen. | |
| handheld | Geräte, die üblicherweise in der Hand gehalten werden, einen kleinen Bildschirm besitzen und über wenig Bandbreite verfügen. | |
| projection | Geräte, die Inhalte projizieren | |
| tty | Geräte, deren Darstellung über ein Raster definiert wird (z.B. durch nicht-proportionale Schriftarten). | |
| tv | gedacht für Geräte, die Informationen eingeschränkt visuell und akustisch wiedergeben können. |
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.
| 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 |
| 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!
Ü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“.
width
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
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
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/Anwendung und Praxis/Tipps und Tricks für media queries.device-height
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
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.
Details: caniuse.com
device-pixel-ratio entspricht keinem Standard. Deshalb kann die Browserunterstützung auch wieder eingestellt werden.Verwenden Sie stattdessen
resolution.- https://developer.mozilla.org/de/docs/Web/Guide/CSS/Media_Queries#-moz-device-pixel-ratio
- http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
- http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
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).
- abgefragter Wert: Eines der Schlüsselwörter
portraitoderlandscape - betrifft: Bitmap-Medientypen.
@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }(orientation) nicht. Sie sollten dieses Merkmal daher nur in Verbindung mit einem der vorgegebenen Schlüsselwörter verwenden.ToDo (weitere ToDos)
aspect-ratio
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 */ }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
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
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
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
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
Das Merkmal light-level (Lichtstärke) beschreibt die Lichtverhältnisse der Umgebung, die durch den Helligkeitssensor der Kamera erfasst werden.[1][2]
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
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]
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
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
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
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
Quellen
- ↑ W3C: light-level
- ↑ MDN: light-level
- ↑ W3C: pointer
link-Elements für Bildschirme eingebunden, das „Druck-Stylesheet“ für Drucker und gleichartige Geräte. (Medientypprint).