senäh

17senäh und so…

CSS3 Logo Thumbnail

HTML/CSS/JS
30. Sep 2011
Kommentare: 0

Media Types als Grundlage

Kategorien: HTML/CSS/JS | 30. Sep 2011 | Kommentare: 0

Serie: Media Queries en détail erklärt

Vor ein paar Tagen hatte ich ja schon einmal kurz über Media Queries berichtet. Ich hatte euch zwar gezeigt was man so ungefähr mit Media Queries machen kann, aber nicht wirklich erklärt wie. Das möchte ich nun ausführlich nachholen. Warum? Weil Responsive Design mit Media Queries in der letzten Zeit unter Designern ein ebenso großes Buzzword ist wie HTML5 für Programmierer. Deswegen sollte man wissen, was dahinter steckt.

Was sind Media Types?

Letztes Mal erwähnte ich bereits, dass Media Queries eine Art Fortführung von Media Types sind. Da ich erst vor einer Weile von Flash in die Webentwicklung gewechselt bin, habe ich mich auch nie großartig mit Media Types (oder CSS generell) beschäftigt. Deswegen werde ich zuerst ein paar Worte über Media Types und anderen Grundlagen von CSS verlieren, bevor ich mich den Media Queries widme.

Media Types sind dazu gedacht ein und denselben Inhalt auf verschiedenen Ausgabegeräten anders darzustellen. Dabei bezeichnet ein Media Type ein Ausgabegerät bzw. eine Gruppe von Ausgabegeräten. Sie wurden mit HTML4 eingeführt und mit CSS2 nochmals angepasst. So kann man bei einem Text die Schriftart von einer serifenlosen Schrift zu einer Serifenschrift wechseln, wenn eine Internetseite ausgedruckt werden soll.

Der gleiche Inhalt, aber zwei verschiedene Darstellungen

Der gleiche Inhalt, aber zwei verschiedene Darstellungen

Die optische Anpassung einer Webseite für den Druck wurde der Haupteinsatzort von Media Types, dabei wurden von der W3C noch viele andere Ausgabegeräte in Media Types klassifiziert. Diese waren aber nie sonderlich relevant, weil sie sich teilweise auf seltene Spezialgeräte beziehen. Trotzdem sollte man von allen mal gehört haben:

  • all: Betrifft alle Ausgabegeräte (Defaultwert).
  • aural: Computergesteuerte synthetische Sprachausgabe. (Deprecated seit CSS2.)
  • braille: Ausgabe über eine Braillezeile.
  • embossed: Ausgabe über einen Brailledrucker. (Seit CSS2.)
  • handheld: Ausgabe über tragbare kleine Computer. Dies ist natürlich ein sehr schwammiger Begriff. Er war ursprünglich mal für PDA’s und ähnliche Geräte gedacht, kann aber nicht allgemeingültig verwendet werden. Das iPhone ist bspw. ganz eindeutig ein tragbarer kleiner Computer, kann aber nicht über  den Media Type handheld angesprochen werden. Wie ihr eine Webseite trotzdem speziell für Geräte mit kleinen Bildschirmen anpassen könnt, zeige ich euch später mit Media Queries.
  • print: Ausgabe über den Drucker.
  • projection: Ausgabe über Beamer und Projektoren.
  • screen: Ausgabe über Bildschirme/Monitore.
  • speech: Computergesteuerte synthetische Sprachausgabe. speech ersetzt in gewisser Weise aural. Wahrscheinlich wurde speech eingeführt, weil es ausdrücklicher auf das Ausgabegerät hinweist – aural bezeichnet eigentlich nicht nur die Sprachausgabe, sondern die akustische Ausgabe generell. (Seit CSS2.)
  • tty: Ausgabe über nicht-grafische Medien mit fixer Zeichenbreite. (Ah ja… dazu zählen anscheinend Fernschreiber.)
  • tv: Ausgabe über Fernseher. Fernseher unterscheiden sich bspw. durch eine niedrigere Auflösung von Bildschirmen und Monitoren. Zumindest war das früher so! Mittlerweile ist der Media Type tv ähnlich wie handheld veraltet. Stattdessen bieten Media Queries die Möglichkeit die Auflösung eines Bildschirms/Monitors/Fernsehers/whatever abzufragen und dementsprechend die Darstellung zu ändern. Aber dazu später mehr.

Ehrlich gesagt wusste ich lange nicht, was CSS bspw. mit aural/speech zu tun hat, aber anscheinend gibt es eine CSS 2.1 Empfehlung in der Tags durch Eigenschaften wie Lautstärke und Pause ausgezeichnet werden können, damit die darin enthaltenen Texte anders vorgelesen werden. Empfehlung bedeutet in diesem Fall, dass es kein absolut fester Bestandteil von CSS ist. Man lernt nie aus! (Aber warum man CSS2 ohne Leerzeichen und CSS 2.1 mit Leerzeichen schreibt, habe ich immer noch nicht gelernt… Naja…)

Alle Media Types auf einem Blick

Alle Media Types auf einem Blick

So, genug abgelenkt! Schauen wir uns die Verwendung von Media Types an. Das macht Sinn, da sie sich nicht sehr von der Verwendung von Media Queries unterscheidet. Ihr lernt in diesem Artikel also gleich zwei Sachen auf einmal 😉

Wie verwendet man Media Types?

Ganz dem Wortsinn von CSS entsprechend beschreibt man die Darstellung eines Inhalts vom Allgemeinen zum Spezifischen – man kaskadiert. D.h. man wird in der Beschreibung der Eigenschaften immer spezifischer und überschreibt dabei teilweise vorher festgelegte Eigenschaften. Genau so verwendet man auch Media Types. Ihr fangt also mit der Beschreibung der Darstellung für euer Hauptmedium an (für Webseiten wäre das screen, aber ihr solltet sicherheitshalber mit all anfangen, weil sich damit eure Beschreibungen auch auf screen übertragen) und widmet euch dann absteigend allen weiteren Ausgabegeräten – natürlich hauptsächlich print. Denkt dran: gebt ihr keinen Media Type an, wird automatisch all verwendet. Ihr gestaltet also ganz normal eure Webseite für den Bildschirm und ändert danach lediglich die Eigenschaften, die sich im Druck ändern sollen (z.B. die Schriftgröße). Alle anderen Einstellungen (z.B. die Schriftfarbe) bleiben gleichen und müssen nicht extra angepasst werden.

Ihr habt prinzipiell drei Möglichkeiten Media Type spezifische Angaben zu erstellen:

inline

Ihr erstellt eine große CSS-Datei und legt in dieser am Ende mit dem @media Befehl spezielle Eigenschaften für ausgewählte Media Types fest. Damit habt ihr nur einen einzigen Request, aber eine große und teilweise unübersichtliche CSS-Datei. Im folgenden Beispiel lege ich zuerst fest, dass die Schriftfarbe für alle Ausgabegeräte weiß sein soll und spezifiziere danach, dass bei einem Ausdruck die Schriftfarbe zu schwarz geändert werden soll.

body { color:#FFFFFF; }
@media print {
    body { color:#000000; }
}

linked

Um den Code übersichtlicher zu gestalten, könnt ihr ihn auf mehrere CSS-Dateien aufsplitten. So könnt ihr für jeden Media Type eine eigene CSS-Datei anlegen. Beim Einbinden mit dem <link>-Tag gebt ihr dann an für welchen Media Type die CSS-Datei gelten soll. Dies könnte so aussehen, wenn ihr eine allgemeine CSS-Datei für alle Ausgabegeräte habt und eine spezielle für den Druck:

<link rel="stylesheet" type="text/css" media="all" href="all.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

Auf diese Weise euer Code zwar übersichtlicher, aber ihr führt bei gleicher Codemenge mehrere Requests aus. Dadurch verlangsamt sich der Seitenaufbau.

imported

Ähnlich wie die linked Variante funktioniert die Variante mit dem @import Befehl. Einziger Unterschied: Die Verwendung des <link>-Tags ist HTML-Syntax, wohingegen @import CSS-Syntax ist. Der @import Befehl kann also in einer CSS-Datei hinterlegt werden (immer als erstes in der Datei) oder in einem <style>-Tag:

<style type="text/css">
    @import "all.css" all;
    @import "print.css" print;
</style>

Die Media Types gebt ihr einfach nach der URL an. Beachtet, dass all (wie auch in allen anderen Beispielen) optional ist. Anstatt „all.css“ könnt ihr übrigens auch url(all.css) schreiben. Ich bleibe für den Rest des Artikels aber bei der ersten Variante.

Soviel zu den Media Types

Das einzige, was es dazu noch zu sagen gibt, ist, dass es noch die Möglichkeit gibt mehrere Media Types gleichzeitig anzusprechen, in dem man sie durch ein Komma trennt.

@import "style.css" screen;
@import "style.css" print;

… ist also das Gleiche wie…

@import "style.css" screen, print;

Das funktioniert nicht nur mit @import, sondern auch mit @media und <link>.

Die Grundlagen habt ihr jetzt gelernt. Im zweiten Teil dieser Serie werde ich euch Media Queries erklären und euch ihre Möglichkeiten und ihre Syntax zeigen. Wahrscheinlich werde ich dann in einem dritten Teil ein paar praktische Beispiele erstellen.

Stay tuned! 😉

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.