HTML5-Handbuch - die neuen Features von HTML5

CSS-Formate definieren. Alle Formate innerhalb des Blocks werden jedoch nur angewendet, wenn die HTML-Inhalte auf einem Ausgabegerät angezeigt werden, das der Medienabfrage entspricht. Das zweite obige
@media
-Beispiel zeigt eine gezieltere Medienabfrage. Der Block enthält nur Formate für Ausgabegeräte, deren Maximalbreite kleiner als 300 Pixel ist.
Medienabfragen seit CSS 2.0
    Seit CSS 2.0 sind als Medienabfragen folgende generische Typen von Ausgabegeräten möglich:
•   
all
für alle Gerätetypen
•   
braille
für Braille-Zeilen-basierte Ausgabegeräte für blinde Benutzer
•   
embossed
für Braille-basierte Drucker
•   
handheld
für Mobilfunkgeräte bzw. Smartphones mit kleinen Displays und limitierter Bandbreite
•   
print
für Drucker
•   
projection
für Overhead-Projektoren bzw. Leinwandpräsentationen
•   
screen
für alle bildschirmorientierten Ausgabegeräte
•   
speech
für Sprachsynthesizer
•   
tty
für ältere nicht-grafische Computerterminals ohne Möglichkeiten der Schriftformatierung
•   
tv
für Fernsehgeräte und andere bildschirmorientierte Wiedergabegeräte mit begrenzten Software-Ressourcen.
    Mit
@media projection
können Sie also beispielsweise einen Stylesheet-Abschnitt schreiben, dessen Formatdefinitionen speziell für die öffentliche Präsentation auf einer Leinwand optimiert sind. Und mit
@media handheld
können Sie Ihr Webseitenlayout für Mobiltelefone fit machen. Auch Stylesheet-Abschnitte mit
@media print
sind in der Praxis bereits bewährt, da die meisten Browser die so definierten Formate berücksichtigen, wenn Anwender Webseiten ausdrucken.
    Kombinationen verschiedener Medientypen, wie
@media handheld, tv
, sind ebenfalls möglich. Wobei hier eine Oder-Beziehung hergestellt wird. Im obigen Beispiel werden Stile für Handhelds oder TV-Geräte angewendet.
Erweiterte Medienabfragen seit CSS 3.0
    Mit CSS3 wird die Abfragelogik so stark erweitert, dass Media Queries der künftige Schlüssel für geräteübergreifendes Webdesign werden. Das liegt an der Einführung von logischen Operatoren wie
AND
und an der Einführung von Medieneigenschaften wie
device-max-width
oder
orientation
. Hier noch einige Beispiele für die Möglichkeiten:
•   
@media screen and (min-width: 1000px)
enthält Stylesheet-Angaben für bildschirmorientierte Ausgabegeräte, bei denen mindestens 1000 Pixel Breite im Anzeigefenster zur Verfügung stehen.
•   
@media (orientation: portrait)
enthält Stylesheet-Angaben für Hochkant-Ausgabe (egal ob es sich um die Papierausrichtung beim Drucker handelt oder darum, wie ein Anwender ein modernes, die Orientierung anpassendes Smartphone in der Hand hält) –
@media (orientation: landscape)
ist das Gegenteil und bezieht sich auf die Querformat-Ausgabe.
•   
@media not screen and (color)
enthält Stylesheet-Angaben für Ausgabegeräte, die nicht bildschirmbasiert sind, aber Farbe darstellen können (z. B. Farbdrucker).
•   
@media screen (device-aspect-ratio: 16/9)
enthält Stylesheet-Angaben für Bildschirme mit dem HD/Full-HD-Seitenformat 16:9.
•   
@media not handheld and screen and (max-weight: 3kg)
enthält Stylesheet-Angaben für Notebooks und Netbooks.
    Insgesamt stellt CSS3 folgende Medieneigenschaften zum Einbauen in Medienabfragen zur Verfügung:
•   
min-width
bzw.
max-width
zur Abfrage der tatsächlich verfügbaren Darstellungsbreite (z. B. Browserfenstergröße),
•   
min-height
bzw.
max-height
für das Gleiche in Bezug auf die Darstellungshöhe,
•   
device-min-width
bzw.
device-max-width
zur Abfrage der physisch möglichen Darstellungsbreite (z. B. die Breite eines Displays),
•   
device-min-height
bzw.
device-max-height
für das Gleiche in Bezug auf die Darstellungshöhe,
•   
orientation
für die Abfrage, ob hochkant oder querkant,
•   
aspect-ratio
für die Abfrage des tatsächlichen Seitenverhältnisses (z. B. des aktuellen Browserfensters),
•   
device-aspect-ratio
für die Abfrage des physisch möglichen Seitenverhältnisses (z. B. des Bildschirms)
•   
color
zur Abfrage, ob das Gerät farbige Ausgaben erlaubt,
•   
color-index
zur Abfrage, ob das Gerät eine Tabelle mit indizierten Farben verwendet, wobei mit einer Abfrage wie
(min-color-index: 256)
auch die Mindestanzahl der Farben der Farbtabelle abgefragt werden kann,
•   
monochrome
zur Abfrage, ob das Gerät nur einfarbige Ausgaben erlaubt,
•   
resolution
zur