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.

Notation

Beispiel vollständige Notation

(orientation: landscape)

Beispiel kurze Notation

(color) 

Das Ausgabegerät soll Farbe darstellen können

Zusätzlich gibt es bei manchen Merkmalen Präfixe

min-
max-

Beispiel:

min-width

Gruppierung und Kombination

Dies entspricht einer "oder" bzw. "und" Abfrage. Mithilfe von Kommas werden Bedingungen getrennt, von denen mindestens eine zutreffen soll. Mit and werden Bedingungen getrennt die alle zutreffen sollen.

@media print, embossed { /* Formate für Printmedien. */ }

@media (min-width: 30em) and (max-width: 60em) { /* Kompaktes Layout */ }
@media print and (color), screen and (color), screen and (three-dee) { /* Farbangaben */ }

Wenn das Merkmal nicht bekannt ist (three-dee) gibt es nicht ;-) wird es ignoriert.

Mit only kann man Definitionen in Media Queries verstecken, die keine Media Queries verstehen.

@media only all and (min-width: 50em) { /* Layout */ }

Ohne das Schlüsselwort only würden die Angaben in den geschweiften Klammern von allen Browsern ausgeführt die keine Media Queries verstehen.

Mit not wird die Abfrage verneint:

@media not all and (monochrome) { /* Farben */ }  

Bedeutet: NICHT „ Alle Medientypen mit Graustufendarstellung“ -> also alle die mit Farbe umgehen können

Beispiele

HTML

<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)">

<style type="text/css" media="(color)"><!-- Farbangaben. --></style>

@import 'layout.css' (min-width: 50em); <!-- em bezieht sich auf die Standartschriftgröße des Browsers -->

CSS