CSS/Media Queries/Medienabfragen einbinden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt die Einbindung von Medienabfragen (media queries), insbesondere deren Notation und die verschiedenen Möglichkeiten von Gruppierung und Kombination.

Einbindung[Bearbeiten]

Medienabfragen können entweder mit einem link-Element auf zwei verschiedene Stylesheets verweisen oder innerhalb der CSS-Ressource unterschiedliche Bedingungen festlegen.

Einbindung mehrerer Stylesheets im head[Bearbeiten]

Die Angabe eines Medientyps erfolgt als einfaches Schlüsselwort, z.B. screen.

Beachten Sie: Wird keine Medienabfrage angegeben oder besteht die angegebene Abfrage nur aus Leerzeichen, so gilt der Standardwert all.
Beispiel: Medienabfrage im HTML-Dokument
<head>
    <link rel="stylesheet" href="bildschirm-stylesheet.css" media="screen">
    <link rel="stylesheet" href="druck-stylesheet.css" media="print">
</head>
In diesem Beispiel wird das „Bildschirm-Stylesheet“ mithilfe des link-Elements für Bildschirme eingebunden, das „Druck-Stylesheet“ für Drucker und gleichartige Geräte. (Medientyp print).
Beachten Sie: Auf diese Weise binden Sie zwei unabhängige Formatvorlagen ein. Sollen auch in der Druckdarstellung viele Formate aus der Bildschirmdarstellung verwendet werden, müssen diese in beiden Dateien eingetragen und dauerhaft gepflegt, sowie doppelt übertragen werden. Zwei unabhängige Dateien sind daher sinnvoll, wenn die Druckdarstellung erheblich von der Bildschirmdarstellung abweicht.


Beispiel: Medienabfrage im HTML-Dokument
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="druck-stylesheet.css" media="print">
</head>
In diesem Beispiel wird das Druck-Stylesheet mit Hilfe des 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.
Beachten Sie: Auch in diesem Fall müssen zwei Ressourcen übertragen werden.
Beachten Sie: Formatierungen (insbesondere Positionierungs-Angaben und Regelungen des Überlaufs mittels overflow) die Sie auf dem Bildschirm erfolgreich getestet haben, können beim Druck zu Problemen führen.

Medienabfrage in der CSS-Ressource[Bearbeiten]

Beispiel: Medienabfrage in der CSS-Ressource
/* CSS-Regeln für alle Ausgabegeräte */
@media print {
  /* zusätzliche oder abweichende CSS-Regeln für Drucker */
}
In diesem Beispiel sind die CSS-Regeln für unterschiedliche Ausgabemedien in einer Ressource zusammengefasst.
Empfehlung: Aus Gründen der Performance sollten Sie diese Variante der Einbindung wählen.
Beachten Sie: Media Queries können nicht in style-Attributen notiert werden.

Siehe auch

ein skalierbarer Viewport[Bearbeiten]

Beachten Sie: Häufig werden Sie Media Queries dafür verwenden wollen, um auf verschiedene Breiten der Ausgabebildschirme reagieren zu können. Damit die Webseite sowohl in einem schmalen Browserfenster des Desktop-PCs als auch auf dem Smartphone oder Laptop wunschgemäß dargestellt wird, müssen Sie mithilfe eines 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.

Notation[Bearbeiten]

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

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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.

Beispiel
In diesen Beispielen werden Stylesheets anhand verschiedener Kriterien (und außerdem auf verschiedene Arten) eingebunden.
<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)">
Das Stylesheet kompakt.css wird eingebunden, wenn die Inhalte auf Seiten im Hochformat ausgegeben werden.
<style media="(color)">
/* Farbangaben. */
</style>
Die im style-Element angegebenen Farbangaben werden verarbeitet, wenn das Ausgabemedium Farben darstellen kann.
@import 'layout.css' (min-width: 50em);
Das Stylesheet layout.css kommt über die CSS-Regel @import zurAnwendung, wenn der Anzeigebereich des Ausgabemediums mindestens 50em beträgt. Die Einheit em bezieht sich dabei auf die Standardschriftgröße des Browsers.

Gruppierung und Kombination[Bearbeiten]

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.

Beispiel
@media print, embossed { 
  /* Formate für Printmedien. */ 
}
In diesem Beispiel wird ein Stylesheet festgelegt, das sowohl für den Medientyp 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.

Beispiel
@media (min-width: 30em) and (max-width: 60em) { 
  /* Kompaktes Layout */ 
}

@media print and (color), screen and (color), screen and (three-dee) { 
  /* Farbangaben */ 
}
Das Schlüsselwort 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, beispielsweise durch Kommata isolierte Abfragen, werden von dem Schlüsselwort nicht beeinflusst.

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

@media not all and (monochrome) { 
/* Farben */ 
}
Dieses Beispiel zeigt, wie das Stylesheet Layout Bildschirmen mit einem mindestens 50em breiten Anzeigebereich zugewiesen wird. Ein Browser, der Medienabfragen versteht, ignoriert das Schlüsselwort 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[Bearbeiten]

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.

Beispiel
@media (width) { /* Das Ausgabemedium besitzt das Merkmal „Breite“ */ }
@media (color) { /* Das Ausgabemedium besitzt das Merkmal „Farbfähigkeit“ */ }
Empfehlung: Um Inhalte für Nutzer der unterschiedlichen Geräteklassen von der Smartwatch bis zum Breitbild-Monitor möglichst gut lesbar darzustellen, sollten Sie 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 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.
(Siehe auch: Webstandards/responsive Webdesign)

Siehe auch[Bearbeiten]