Blog von Liesa Herbst

Beitrag von Liesa Herbst: Hier noch einmal mein Referatstext zum gemütlichen Nachlesen

zu unserem Referat (von Margot Dum und Liesa Herbst) vom 4.4.2011

Teil 1 findet ihr auf Margot's Blog (User-Interface/HC)

Von HTML zu CSS

Als Tim Berners-Lee im Jahr 1990 die Sprache HTML entwickelte, dachte er nicht an das Aussehen von Dokumenten. Seine Idee war es, ein Dokument so zu beschreiben, dass es auf möglichst vielen und unterschiedlichen Anzeigegeräten gemäß seiner Bedeutung wiedergegeben werden kann. In "reinem" HTML erstellte Webseiten erscheinen als sehr gut strukturiert, sehen allerdings wenig ansprechend aus.

"Stylesheets" sind eine unmittelbare Ergänzung zu HTML und stellen kurz gesagt eine Sprache zur Definition von Formateigenschaften (Bestimmung von Schriftgrad, Abständen, Hintergrundfarbe, Hintergrundbildern, Rahmen, etc.). Sie bestehen aus Formaten, die man für bestimmte HTML-Elemente definieren kann. Stylsheets unterstützen also die professionelle Gestaltung des Web-Auftritts und erlaubne völlig neue Möglichkeiten beim Webseiten-Layout. Einer der wichtigsten "features" von Stylesheets ist es, unterschiedliche CSS-Formate für unterschiedliche Ausgabemedien zu definieren. Diese Möglichkeit besteht ab CSS2. Dazu später noch mehr.

Genau wie HTML ist auch CSS, dass übrigens für "Cascadin Style Sheets" steht, vom World Wide Web-Konsortium (W3C) normiert worden und gilt als Standard. Und genau wie bei HTML gibt es bei CSS weiterentwickelte Neuauflagen. Version 1.0 von CSS wurde 1996 herausgegeben, 1999 nochmals überarbeitet. Status einer Empfehlung erhielt die Version 2.0 im Jahr 1998. CSS 2.1 ist lediglich eine geringfügig ergänzte und korrigierte Fassung der zweiten Version.

Der aktuelle Stand laut W3C ist immer noch CSS 2.1, jedoch wird hart an der Einführung von CSS 3 gearbeitet. Moderne Browser, wie Firefox, Opera oder Internet Explorer haben unter anderem bereits Teile von CSS3 in ihren neueren Versionen integriert. Die CSS-Implementierungen sind teilweise noch nicht so einheitlich und vollständig, sodass man nicht blind darauf vertrauen sollte, dass alles in jedem Browser genau gleich aussieht.

Ergänzt werden muss noch, dass es mehrere Sprachen zum Definieren von Stylesheets gibt. CSS wurde jedoch speziell als Ergänzung zu HTML geschaffen und gilt deshalb für HTML-basierte Webseiten als optimiert. Andere Beispiele wären: "Document Style Semantics and Specification Language" (DSSSL), für SGML konzipiert und "Extensible Stylesheet Language" (XSL), für XML entwickelt.

Welche Möglichkeiten gibt es, Stylesheets anzuwenden? Zunächst wollen wir mit den Media Types beginnen.

Media Types - die Möglichkeit, Stylesheets für bestimmte Ausgabemedien (screen, print, etc.), also mediumspezifisch anzuwenden, werden bereits flächendeckend genutzt. Möglich ist das seit CSS2, wie vorhin schon erwähnt. Media Types ermöglichen es also, die Ausgabe von Stylesheets einem bestimmten Medientyp zuzordnen.

Beispiele:

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

Man sagt dem Browser damit, dass er diese Datei nur verwenden soll, wenn das Dokument ausgedruckt werden soll.

<link rel="stylesheet" type="text/css" href="screenstyle.css" media="screen"/>

Für die Ausgabe am Bildschirm soll wiederum diese Datei verwendet werden.

Mit CSS2.1 wurden zehn Media Types definiert:

• all - gilt für alle Ausgabegerät
• aural - Sprachbrowser
• braille - Blindenschriftfähige Ausgabegeräte
• embossed - Blindenschriftfähige Drucker
• handheld - Mobiltelefone, Handcomputer
• print - Drucker
• projection - Beamer und Overhead-Projektoren
• screen - Bildschirme
• tty - Ausgabegeräte mit feststehenden Zeichentypen (Terminals, Fernschreiber)
• tv - TV-Geräte

Von Media Types (CSS2) zu Media Queries (CSS3)

Media Types bieten also die Möglichkeit Stylesheets für bestimmte Ausgabemedien anzuwenden. Mit CSS 3 wird diese Möglichkeit dank der Media Queries erweitert. Es ist möglich, die Einbindung von Stylesheets nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium bzw. Ausgabegerät bestimmte Merkmale aufweist oder nicht. Anstatt einen Stylesheet beispielsweise nur für "screen" (also Bildschirme) zu definieren, kann man nun Stylesheets für bestimmte Bildschirm- oder Fensterbreiten anwenden, um die Darstellung der Website zusätzlich zu optimieren.

Media Queries

Media Queries sind demnach logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen.

Ein Beispiel dazu:

media="only screen and (color)" (heißt also nur für Farbbildschirme)

Hier sieht man deutlich: Media Queries sind Media Types MIT mindestens einem weiteren Ausdruck. Anstatt also nach einem bestimmten Medium zu schauen, kann man mit Media Queries die Eigenschaften und Fähigkeiten von Ausgabemedien abfragen. Damit kann der CSS-Code ganz gezielt für bestimmte Situation geschrieben werden. Es kann abgefragt werden, ob ein Anwender ein kleines Gerät wie ein Smart Phone bedient und dann ein passendes Layout liefern. Aber es kann noch viel mehr abgefragt werden.

Die Eigenschaften der Media Queries sind:

• min-/max-width: Breite des Browserfensters
• min-/max-height: Höhe des Browserfensters
• min-/max-device-width: Bildschirmbreite
• min-/max-device-height: Bildschirmhöhe
• orientation: Ausrichtung (portrait/landscape)

•  

  min-/max-aspect-ratio: Seitenverhältnis des Browserfensters (beispielsweise 16/9 oder 1280/720)
• min-/max-device-aspect-ratio: Seitenverhältnis desBildschirmes
• min-/max-color: Bits pro Farbkomponente auf dem Ausgabebildschirm (beispielsweise @media all and (min-color: 1)
• min-/max-color-index: Anzahl der Einträge in der Farbtabelle des Gerätes
• min-/max-monochrome: Anzahl der Bits pro Pixel des monochromatischen Bildschirmes
• min-/max-resolution: Auflösung des Bildschirmes
• scan: Abtastart des Ausgabebildschirmes, progressive / interlaced (beispielsweise @media tv and (scan: progressive)
• grid: Unterscheidet, ob der Ausgabebilschirm "grid" oder "bitmap" benutzt. Terminals oder Telefonbildschirme mit nur einer Schriftart sind beispielsweise grid-basierend.

Wie man in der Auflistung sieht, können einige Eigenschaften mit den Präfixen "min-" und "max-" ergänzt werden. Dadurch ist es beispielsweise möglich, mit dem Eintrag die minimal zugelassene Breite zu setzen und kann damit Webseiten für unterschiedlich große Bildschirme/Browserfenster optimieren. Webautoren können auf dies reagieren und ein Spaltenlayout auflösen, wenn die Breite für die mehrspaltige Darstellung nicht mehr ausreicht.

Die Homepage von John Hicks ist ein anschauliches Beispiel für ein "fluid layout", basierend auf Media Queries. Durch die Veränderung der Größe des Browserfernsters löst sich gleichzeitig das Spaltenlayout auf und ermöglicht somit eine user-freundliche Darstellung je nach Ausgabegerät. Ein weiteres Beispiel aus der Präsentation: hier

Oder man kann ein spezielles Stylesheet für die Darstellung beispielsweise auf dem iphone oder iPad (allgemein auf Smartphones oder Tablets) bereit stellen, abhängig davon, wei es in der Hand gehalten wird. Darum kümmert sich die Eigenschaft "orientation".

Noch einmal durch das Beispiel verdeutlicht und zusammenfassend: Media Queries sind logische Ausdrücke, welche die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen:

Sie ermöglichen eine maßgeschneiderte Präsentation von Inhalten, je nach Ausgabegerät (OHNE den Inhalt selbst zu verändern!)

Das Gute an Media Queries ist, dass fast alle relevanten aktuellen Browser(versionen) diese CSS-Angaben korrekt ausführen. Da aber insbesondere ältere Versionen der hier relevanten Browser, Media Queries nicht verstehen können, gibt es für diese mittels JavaScript eine Art Unterstützung, sodass auch heir das gewünschte Ergebnis erreicht werden kann.

Zur Präsentation geht's hier.