Media Queries

Links

http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Überblick

Mit Media Queries kann man die Darstellung einer HTML Seite für verschiedene Ausgabemedien optimieren.

Beispiel HTML:

<link rel="stylesheet" href="bildschirm-stylesheet.css" media="screen">
<link rel="stylesheet" href="druck-stylesheet.css" media="print">

Ohne Angabe des media Attributes gilt der Standardwert "all".

Auch innerhalb der CSS Datei läßt sich dies verwenden: Beispiel CSS:

/* CSS-Regeln für alle Ausgabegeräte */
@media print {
  /* zusätzliche CSS-Regeln für Drucker */
}

Medienmerkmale

(Schlüsselwort):optional Längenangabe oder neues Schlüsselwort

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.