senäh

17senäh und so…

CSS3 Logo Thumbnail

HTML/CSS/JS
04. Okt 2011
Kommentare: 0

Funktionsumfang und Syntax von Media Queries

Kategorien: HTML/CSS/JS | 04. Okt 2011 | Kommentare: 0

Serie: Media Queries en détail erklärt

Nach den lästigen Grundlagen kommen wir endlich zum Kern dieser Serie: den Media Queries. Ich werde euch jetzt eine Übersicht über den Funktionsumfang und kleine Codebeispiele für Media Queries geben. Anschließend werde ich euch den ein oder anderen Anwendungsfall zeigen. Los geht’s!

Generell setzen sich Media Queries aus zwei Teilen zusammen: Media Types und Expressions. Was Media Types sind, hatte ich ja im Grundlagen-Teil erklärt und auch die Schreibweise bleibt hier dieselbe. Ihr hängt lediglich eine oder mehrere Expression hinten ran und schon habt ihr einen Media Query. Das heißt, selbst wie ihr Media Queries einbindet bleibt identisch mit den Einbinungsmöglichkeiten von Media Types. Euch stehen weiterhin  @import, @media und der <link>-Tag zur Verfügung. Im Prinzip müssen wir uns nur noch die Expressions anschauen.

Expressions setzen sich allerdings auch aus zwei Teilen zusammen: Media Features und Operatoren. Beginnen wir zunächst mit einer Auflistung aller möglichen Media Features.

Media Features

Media Features beschreiben die Eigenschaften eines Ausgabegerätes und können verschiedene Werte annehmen. Euch stehen folgende Media Features zur Verfügung:

  • width: Beschreibt die Breite des sogenannten Viewports, also des sichtbaren Ausschnitts einer Webseite (z.b. die Breite des Browserfensters, egal wie breit euer Monitor eigentlich ist).
  • height: Beschreibt die Höhe des Viewports.
  • device-width: Beischreibt die Breite des Ausgabegerätes (z.B. die Breite des Monitors, egal wie breit euer Browserfenster aufgezogen ist).
  • device-height: Beschreibt die Höhe des Ausgabegerätes.
  • orientation: Gibt an, ob euer Ausgabegerät im portrait-Modus ist (height ist größer oder genauso groß wie width) bzw. im landscape-Modus (height ist kleiner als width).
  • aspect-ratio: Beschreibt das Verhältnis zwischen width und height.
  • device-aspect-ratio: Beschreibt das Verhältnis zwischen device-width und device-height (z.B. 16:9 falls ihr auf einem handelsüblichen HD-Fernseher eine Webseite betrachtet).
  • color: Beschreibt die Anzahl der Bits für einen Farbkanal. Falls die Farbkanäle eine unterschiedliche Anzahl an Bits zur Farbdarstellung haben, wird die kleinste Bitanzahl als Wert zurückgegeben. (Bei schwarz/weiß Bildschirmen sollte 0 zurückgegeben werden.)
  • color-index: Beschreibt die Anzahl der Indizes der hardwareseitigen Farb-Lookup-Tabelle.
  • monochrome: Beschreibt die Anzahl der Bits pro Pixel in einem monochromen Framebuffer.
  • resolution: Beschreibt die Pixel-/Punktdichte des Ausgabegerätes.
  • scan: Beschreibt das Bildaufbau bei Fernsehern. Dieser hat entweder den Wert progressive (Vollbildverfahren) oder interlace (Halbbild-/Zeilensprungverfahren).
  • grid: Gibt an, ob das Ausgabegerät eine fixe Zeichenbreite hat (z.B. bei alten Handys oder Fernschreibern)

Zusätzlich könnt ihr einige der Media Features mit dem min- bzw. max-Prefix versehen, um zu überprüfen, ob ein bestimmter Wert erreicht wurde. Media Features die diese Prefixe verwenden können sind width, height, device-width, device-height, aspect-ratio, device-aspect-ratio, color, color-index, monochrome und resolution. Außerdem können nicht alle Media Types auf alle Media Features überprüft werden. So kann man lediglich tv auf scan untersuchen. Eine genauere Auflistung darüber, welche Media Types welche Media Features unterstützen und viele weiterführende Informationen findet ihr bei W3C und MDN. Dort könnt ihr außerdem nachlesen welche Einheiten bei den verschiedenen Media Features verwendet werden können (px bei width, dpi bei resolution, etc.).

Unterschied zwischen Viewport und Device

Unterschied zwischen Viewport und Device

In den späteren Beispiel werde ich übrigens nur noch über Media Features sprechen, die ich für den normalen Webdesigner für relevant halte. So wüsste ich keinen ernsthaften Anwendungsfall, wann jemand eine moderne Webseite für ein monochromes Ausgabegerät mit fixer Zeichenbreite designen sollte 😉

Operatoren

Operatoren werden in Verbindung mit Media Features angegeben, um eine Bedingung – also die Expression – zu formulieren, die entweder true oder false sein kann. Ist sie true, wird die jeweilige CSS-Datei/-Beschreibung angewandt, ansonsten ignoriert.

Der einfachste Operator ist and mit dem man einen Media Type mit einem Media Feature verbindet. Um eine CSS-Datei in eine HTML-Datei einzubinden, wenn das Ausgabegerät einen Farbbildschirm hat, formuliert man folgenden Media Query in Form eines <link>-Tags:

<link rel="stylesheet" type="text/css" media="screen and (color)" href="color.css">

Beachtet, dass das Media Feature in Klammern steht. Den gleichen Media Query könnt ihr auch als @import-Befehl formulieren:

@import "color.css" screen and (color);

Oder inline:

@media screen and (color) {...}

Wollt ihr ein Media Feature auf alle Media Types hin überprüfen, schreibt ihr:

@media all and (color) {...}

Bei diesem Sonderfall (und nur diesen!) könnt ihr „all and“ weglassen und nur folgendes schreiben:

@media (color) {...}

Um ein Media Feature auf einen bestimmten Wert zu untersuchen, gibt ihr diesen Wert nach dem Media Feature und einem Doppelpunkt an. So wird eine CSS-Datei nur eingebunden, wenn die jeweilige HTML-Datei an einem Fernseher mit Vollbildverfahren betrachtet wird:

<link rel="stylesheet" type="text/css" media="tv and (scan: progressive)" href="tv.css">

Wolltet ihr aber beispielsweise den Media Type speech auf das Media Feature scan überprüfen wollen, würde der Media Query immer false erzeugen.

Um das Media Feature nicht auf einen speziellen Wert, sondern eine Menge an Werten zu untersuchen verwendet ihr den min- oder max-Prefix. So bindet ihr eine CSS-Datei ein, wenn diese nur bei Ausgabegeräten mit einer Bildschirmbreite von mindestens 400 px angewandt werden soll.

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 400px)" href="bigscreen.css">

Mit einem weiteren Operator namens not könnt ihr den Media Query verneinen. So wird eine CSS-Datei eingebunden, wenn sie nur für Geräte gelten soll, deren Bildschirmbreite maximal 399 px groß sein soll.

<link rel="stylesheet" type="text/css" media="not screen and (min-device-width: 400px)" href="smallscreen.css">

Der not Operator hat dabei eine sehr geringe Priorität. Ihr verneint nicht Ausgabegeräte mit den Media Type screen, sondern Ausgabegeräte der Bildschirmbreite mindestens 400 px beträgt.
Beachtet außerdem, dass min für kleiner gleich und max für größer gleich steht. Die folgenden Media Query bedeuten somit nicht das gleiche:

<link rel="stylesheet" type="text/css" media="not screen and (min-device-width: 400px)" href="smallscreen.css">
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="smallscreen.css">

Der erste Media Query erzeugt nicht true, wenn das Gerät eine Bildschirmbreite von 400 px beträgt, der zweite Media Query aber schon!

Kommas dienen als or Operator. So könnt ihr mehrere Media Queries kombinieren, die true zurück geben, so bald einer von ihnen true ist.
Der folgende Media Query erzeugt true bei Farbbildschirmen, auch wenn danach noch eine Braillezeile auf ein Vollbildverfahren überprüft wird:

<link rel="stylesheet" type="text/css" media="screen and (color), braille and (scan: progressive" href="screen.css">

Und zu guter letzt gibt es noch den only Operator. Dieser versteckt den Media Query für alte Browser, die Media Queries nicht unterstützen. Lässt man den only Operator weg, so würden alte Browser nämlich trotzdem den angegebenen Media Type auswerten und lediglich das Media Feature ignorieren. Mit only wird aber auch der Media Type nicht mehr ausgewertet und die CSS-Datei wird nicht eingebunden:

<link rel="stylesheet" type="text/css" media="only screen and (color)" href="screen.css">

Soweit zur Theorie. Beim nächsten Mal wird es praktisch.

Rinjehauen!

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.