CSS/Media Queries/Medienabfragen einbinden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
15min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
CSS


Dieses Kapitel 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.
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.


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]

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/Elemente/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]

UND Kombination[Bearbeiten]

Eine einzelne Medienabfrage kann aus einer Typ-Abfrage und einer Anzahl von Feature-Abfragen bestehen. Alle Teile sind optional, und sie werden durch das Schlüsselwort and miteinander verknüpft. Jeder einzelne Teil muss erfüllt sein, damit die Medienabfrage als erfüllt gilt.

Beispiel
@media (min-width: 30em) and (max-width: 60em) { 
  /* Kompaktes Layout */ 
}
@media print and (min-width: 60em) { 
  /* Print-Layout auf genügend breitem Papier */ 
}

Die erste Medienabfrage enthält keine Typabfrage, nur zwei Feature-Abfragen. Durch die Kombination von min-width und max-width kann der Breitenbereich von 30em bis 60em erfasst werden.

Die zweite Abfrage gilt nur für den Medientyp print (Druck oder Druckvorschau) und hinreichend breites Papier.

Beachten Sie: Sie können Feature-Abfragen erstellen, die für den verwendeten Medientyp nicht definiert sind, oder die es noch nicht gibt. Beispielsweise das Bildschirm-Feature scan für den Typ print. Oder das unbekannte Feature threeD Solche Feature-Abfragen gelten als grundsätzlich nicht erfüllt und würden dazu führen, dass die vollständige Medienabfrage nicht erfüllt wird.

Verneinungen in einer Query - Vorsicht Falle![Bearbeiten]

Es ist auch möglich, Medienabfragen so zu formulieren, dass die Abfragen nicht zutreffen sollen, um die gewünschten CSS Regeln zu aktivieren. Es gibt zwei Arten der Verneinung, was leider verwirren kann.

Zum einen kann man eine komplette Abfrage verneinen, indem man der Abfrage das Schlüsselwort not voranstellt:

Verneinung der ganzen Abfrage
@media not print and (min-width: 60em) { 
  /* Schmales Papier, oder keine Druckausgabe */ 
}
Beachten Sie: Dieses vorangestellte not negiert die komplette Abfrage. Ist der Typ nicht print, oder ist die Breite zu schmal, ist print and (min-width: 60em) nicht erfüllt und darum ist die Umkehrung erfüllt.

Zum anderen kann man eine einzelne Feature-Abfrage verneinen. Hier ist Vorsicht geboten, wenn die Verneinung zu Beginn der Medienabfrage steht. Folgt auf das not ein Medientyp, wird die ganze Abfrage verneint. Sonst nur das einzelne Feature!

Verneinung von Medienabfragen und Medientypen
/* Negiert nur die erste Feature-Abfrage! */
@media not (min-width: 60em) and (min-height: 40em) {    
   /* Regeln gelten wenn min-width unter 60 UND min-height über 40 */
}

/* Negiert die ganze Medienabfrage! */
@media not screen and (min-width: 60em) and (min-height: 40em) {    
   /* Regeln gelten für Drucker ODER min-width unter 60 ODER min-height unter 40 */
}
Beachten Sie: Die Negierung von Feature-Abfragen funktioniert derzeit nur im Firefox-Browser. Von Chromium-Browsern wird ein not daher nur verstanden, wenn dahinter ein Medientyp folgt.

Medienabfragen für Alt-Browser, die keine Feature-Abfragen kennen[Bearbeiten]

Bevor Feature-Abfragen eingeführt wurden, sah die Spezifikation für Medienabfragen vor, dass die Browser nur das erste Wort der Medienabfrage beachteten und den Rest ignorierten. Würde man einem solchen Browser eine Medienabfrage wie print and (min-width: 80em) geben, so würde dieser Browser die Breitenabfrage ignorieren, aber die abhängigen CSS Regeln beim Drucken anwenden.

Wenn man das vermeiden muss, verwendet man das Schlüsselwort only:

Beispiel
@media only print and (min-width: 80em) {
  /* Druck auf breites Papier */ 
}

Browser, die die alte Spezifikation beachten, sehen only und interpretieren das als Medientyp. Den Rest der Zeile ignorieren sie. Neuere Browser ignorieren das only und verarbeiten die Feature-Abfrage korrekt.

Gruppieren mehrerer Medienabfragen zu einer Liste[Bearbeiten]

Eine ODER-Verknüpfung innerhalb einer Medienabfrage ist nicht vorgesehen. Statt dessen können Sie mehrere Medienabfragen formulieren und durch Komma trennen. Analog zu einer Liste von CSS Selektoren genügt es, dass eine der Abfragen in dieser Liste erfüllt ist, damit die CSS-Regeln angewendet werden, die von dieser Liste abhängig sind. Der Anwendungsbereich für Abfragelisten ist begrenzt, eine ODER-Kombination war relevanter, als es noch mehr als zwei Medientypen gab.

Beispiel
@media screen and (min-width: 80em), print and (orientation: landscape) { ... } { 
  /* Breite Darstellung. */ 
}
Festlegung von CSS Regeln für eine Mindestbreite von 80em auf dem Bildschirm, oder einen Druck im Querformat .

Bei der UND-Verknüpfung wurde erwähnt, dass durch Abfragen eines Features, das für einen Medientyp nicht vorhanden ist, die gesamte Medienabfrage als "nicht erfüllt" gilt. Befindet sich eine solche Feature-Abfrage in einer Medienabfrage, die Teil einer Liste ist, so wird dadurch nur diese einzelne Abfrage auf "nicht erfüllt" gesetzt. Andere Abfragen der Liste können immer noch erfüllt werden.

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: HTML/Tutorials/responsive Webdesign)

Merkmalstypen[Bearbeiten]

Hierbei ist zwischen zwei Merkmaltypen zu unterscheiden: Merkmale mit einem Wertebereich, der sich in Zahlen ausdrücken lässt und für deren Werte ein Kleiner- oder Größer-Vergleich sinnvoll ist. Im Gegensatz dazu stehen Merkmale mit einer Werteaufzählung (diskrete Merkmale), oder Schalter (boolesche Merkmale) bei denen das Merkmal nur auf Gleichheit mit einem der möglichen Werte geprüft werden kann.

Abfragen von diskreten Merkmalen[Bearbeiten]

Diskrete Merkmale lassen sich mit (name: wert) auf einen bestimmten Wert prüfen. Wenn einer der möglichen Werte none oder 0 ist, ist auch eine Abfrage in der Form (name) möglich, um zu prüfen, ob das Merkmal einen Wert ungleich none bzw. 0 hat. Aber auch für andere diskrete Merkmale ist diese Schreibweise zulässig, die Abfrage besagt dann nur, ob das Merkmal für den aktuellen Medientyp überhaupt gegeben ist. Beispielsweise ist (scan) falsch, wenn das Medium nicht vom Typ "screen" ist.

Abfragen von Wertebereichsmerkmalen[Bearbeiten]

Abfrage mit min- und max- Präfix[Bearbeiten]

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

Details: caniuse.com

Wertebereichsmerkmale lassen sich auf unterschiedliche Art prüfen. Entweder, wie diskrete Merkmale, mit (name: wert) auf Gleichheit mit einem bestimmten Wert, oder man testet durch Voranstellen von "min-" oder "max-" vor dem Merkmalsnamen auf einen Mindest- oder Höchstwert. (width: 500px) ist nur erfüllt, wenn das Medium exakt 500px breit ist, (min-width: 500px) ist dagegen erfüllt, wenn das Medium mindestens 500px breit ist.

Abfrage mit Operatoren[Bearbeiten]

  • CSS 4.0
  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Mit der Stufe 4 der Media Queries Spezifikation ist zu dieser CSS-orientierten Schreibweise auch eine für Programmierer ansprechendere Schreibweise hinzugekommen. Man vergleicht Merkmal und Wert mittels der vertrauten Operatoren =, <, <=, > und >=.

Einen "ungleich" Operator gibt es nicht. Statt (min-width: 500px) können Sie also auch (width >= 500px) oder (500px <= width) schreiben. Außerdem gibt es eine Bereichsabfrage. Um zu prüfen, ob ein Merkmal in einem Bereich liegt, schreiben Sie (minimum <= merkmal <= maximum) oder auch (maximum >= merkmal >= mininum). Wenn das Merkmal einen oder beide der Randwerte zwar annähern, aber nicht erreichen darf, schreiben Sie auf der entsprechenden Seite der Abfrage < oder > statt <= oder >=

Beachten Sie: Prüfen Sie vor dem Einsatz der Level 4 Abfragen die Browser-Kompatibilität. Auch Firefox verfügt erst über eine teilweise Umsetzung.


Siehe auch[Bearbeiten]