Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.
CSS/Media Queries/Medienabfragen einbinden
Text-Info
- 15min
- leicht
- CSS
Dieses Kapitel behandelt die Einbindung von Medienabfragen (media queries), insbesondere deren Notation und die verschiedenen Möglichkeiten von Gruppierung und Kombination.
Inhaltsverzeichnis
Einbindung
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
Die Angabe eines Medientyps erfolgt als einfaches Schlüsselwort, z. B. screen.
all.<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).
<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.
overflow) die Sie auf dem Bildschirm erfolgreich getestet haben, können beim Druck zu Problemen führen.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.
Siehe auch
ein skalierbarer Viewport
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
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.)
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.
<link rel="stylesheet" href="kompakt.css" media="(orientation: portrait)">
<style media="(color)">
/* Farbangaben. */
</style>
style-Element angegebenen Farbangaben werden verarbeitet, wenn das Ausgabemedium Farben darstellen kann.@import 'layout.css' (min-width: 50em);
50em beträgt. Die Einheit em bezieht sich dabei auf die Standardschriftgröße des Browsers.Gruppierung und Kombination
UND Kombination
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.
@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.
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!
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:
@media not print and (min-width: 60em) {
/* Schmales Papier, oder keine Druckausgabe */
}
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!
/* 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 */
}
not daher nur verstanden, wenn dahinter ein Medientyp folgt.Medienabfragen für Alt-Browser, die keine Feature-Abfragen kennen
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:
@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
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.
@media screen and (min-width: 80em), print and (orientation: landscape) { ... } {
/* Breite Darstellung. */
}
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
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.
@media (width) { /* Das Ausgabemedium besitzt das Merkmal „Breite“ */ }
@media (color) { /* Das Ausgabemedium besitzt das Merkmal „Farbfähigkeit“ */ }
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: Responsiv(es Webdesign))
Merkmalstypen
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
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
Abfrage mit min- und max- Präfix
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
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 >=.[1]
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 >=
