Local oder Session?

Zunächst zum Unterschied zwischen localStorage und sessionStorage: Die Daten werden in der local-Variante quasi dauerhaft auf der Clientseite gespeichert, d.h. sie verbleiben auch, wenn der Browser geschlossen wird. Sie können nur durch die Webseite selbst oder natürlich durch den Nutzer gelöscht werden. Vergessen darf man dabei aber nicht, dass die clientseitige Speicherung vom System und vom Browser abhängig ist. Verwendet der Benutzer einen anderen Browser oder einen anderen Rechner, kann er nicht auf die Daten zugreifen, sofern sie nicht auch serverseitig abgelegt wurden. Kurzlebiger ist hingegen die session-Variante, da sie lediglich an die aktuelle Browsersession gebunden ist. Demnach werden die Daten gelöscht, sobald der Browser (ggf. auch nur Fenster/Tab, je nachdem ob der Browser diese als eigenständige Session sieht) geschlossen wird.

Verwendung

Die Benutzung beider Varianten ist identisch, da sie jeweils das Storage-Interface verwenden:

Attribute und Funktionen

Das length-Attribut und die Funktionen im Überblick:

• Attribut length: Enthält die Anzahl der gespeicherten Elemente.
• Funktion key(n): Gibt den Namen des n-ten Keys zurück. So können zusammen mit length auch Datensätze unbekannter Größe durchlaufen werden.
• Funktion getItem(key): Liefert den Wert zum Schlüssel key.
• Funktion setItem(key, value): Legt den Wert value unter dem Schlüssel key ab.
• Funktion removeItem(key): Löscht den Wert zum Schlüssel key.
• Funktion clear(): Löscht alle gespeicherten Daten.

Beispiel

Eine kleine Web Storage Demo habe ich natürlich auch vorbereitet. Hier der Quelltext des JavaScript-Teils:

Objekte speichern

Leider können auch hier, wie bei Cookies, nur Strings gespeichert werden. Hier kann man sich aber mit JSON helfen:

1. Objekt value in key speichern:

2. Objekt aus key laden:

Weitere Artikel zum Thema:

• CSS3: color (Farben) mit Farbtabellen (0)
• Web-Entwicklung 1: Die Grundgedanken (0)
• Mal kurz rundgeschaut… #19 (1)
• HTML5 und CSS3 (0)
• Web-Entwicklung 3: Tabellen (HTML) (0)

Definition

Die transform-Eigenschaft ist eigentlich recht simpel:

<transform> =
none|<transform-function>[ <transform-function>]*

Der Standardwert ist schlicht none, es wird also keine Transformation durchgeführt. Alternativ kann eine einzelne oder eine Folge von beliebig vielen Transformationsfunktionen angegeben werden, die entsprechend ihrer Reihenfolge durchgeführt werden.

Zusätzlich existiert eine zweite Eigenschaft namens transform-origin. Sie definiert, wo der Ursprung des zu transformierenden Objektes liegt. Dies ist beispielsweise bei Rotationen interessant, da es einen Unterschied macht, ob ich ein Objekt um sich selbst (Ursprung = der eigene Mittelpunkt) drehe, oder es auf die Umlaufbahn um ein anderes Objekt schicke (Ursprung = Mittelpunkt der Umlaufbahn). Unverständlich? Dann hilft ein Blick auf das Beispiel zur Rotation und das anschließende Beispiel zum versetzten Ursprung.

Standardmäßig ist der Ursprung immer der Mittelpunkt des zu transformierenden Objektes. transform-origin ist wie folgt definiert:

<transform-origin>=
[[<percentage>|<length>|left|center|right] [<percentage>|<length>|top|center|bottom]?] |
[[left|center|right] || [top|center|bottom]]

Der Ursprung kann also aus einer Prozent/Länge/Keyword-Kombination definiert werden, z.B. 50% 50% für den Mittelpunkt, 0 0 für die linke, obere Ecke oder right bottom für die untere, rechte Ecke. Wird nur ein Wert angegeben, wird der zweite Wert als center angenommen. Der erste Wert steht jeweils für die horizontale und der zweite Wert für die vertikale Richtung, wobei bei Verwendung von zwei Keywords die Reihenfolge auch geändert werden kann, da sich die Ausrichtung dann aus den Keywords ergibt.

Funktionen und Parameter

Wie zuvor erwähnt, erhält die transform-Eigenschaft nicht einfach nur ein paar Parameter, sondern verschiedene Funktionen, die der Reihe nach abgearbeitet werden. In diesem Abschnitt werde ich die matrix-Funktion genauer erläutern und auf die weiteren kurz eingehen. Die anschließende Sektion Beispiele zeigt die einzelnen Funktionen dann im Einsatz.

matrix(<number>,<number>,<number>,<number>,<number>,<number>)

matrix ist sozusagen die Mutter aller Transformationsfunktionen. Mit ihr lassen sich alle folgenden Funktionen und deren Kombinationen in einer einzelnen Funktion abbilden. Das ist nicht so intuitiv und lesbar, wie es die Verwendung der anderen Funktionen wäre, kann aber gerade bei komplexen Funktionsfolgen deutlich kürzer und bei dynamischen Variationen (z.B. via JavaScript) praktischer sein. Wem die Matrixschreibweise zu kompliziert ist, der kann auch direkt zu den anderen Funktionen springen. Ich bemühe mich, alles einigermaßen verständlich zu erklären, auch wenn dabei möglicherweise die mathematische Genauigkeit ein wenig verloren geht. Anschließend gibt es aber noch ein paar Links zur Vertiefung im Detail

Alle Transformationen können mit einer 3×3-Matrix dargestellt werden, wie in der rechten Abbildung zu sehen ist. Da die letzte Zeile konstant ist, müssen wir der Matrixfunktion nur 6 Parameter übergeben: matrix(a,b,c,d,e,f). Eine solche Matrix definiert den Unterschied von einem neuen Koordinatensystem zum ursprünglichen Koordinatensystem. Unser Objekt wird also in ein neues Koordinatensystem übertragen. Die einfachste Abbildung ist diejenige, die nichts verändert: matrix(1,0,0,1,0,0). e und f ermöglichen es uns, unser Objekt zu verschieben (Translation). Setzen wir z.B. jeweils 10px ein, dann verschieben wir das Objekt 10 Pixel nach rechts und 10 Pixel nach unten, ändern es aber sonst nicht: matrix(1,0,0,1,10px,10px). Für die anderen Transformationen sieht es so aus:

• Scaling via Matrix: matrix(x,0,0,y,0,0)
  Mit x definieren wir die Skalierung in der x-Achse (Breite) und mit y in der y-Achse (Höhe). Setzen wir x z.B. auf 2, dann verdoppeln wir die Breite, setzen wir y auf 0.5, dann halbieren wir die Höhe.
• Rotation via Matrix: matrix(cos(x), sin(x), -sin(x), cos(x), 0, 0)
  Hier entspricht x dem Winkel der Rotation. Wollen wir unser Objekt um den Winkel x=90° drehen, dann wäre der Funktionsaufruf matrix(0,1,-1,0,0,0).
• Skew X via Matrix: matrix(1, 0, tan(x), 1, 0, 0)
  Skew Y via Matrix: matrix(1, tan(x), 0, 1, 0, 0)
  Auch beim Scheren brauchen wir einen Winkel. Dieser beschreibt, wie sich die zu verändernde Achse im Verhältnis zur anderen Achse bewegen soll. Daher auch der Begriff “scheren”: wir klappen die Achsen des Koordinatensystems wie eine Schere zusammen bzw. auseinander. Wollen wir um 45° längs der x-Achse scheren, dann wäre der Aufruf matrix(1, 0, 1, 1, 0, 0), d.h. wir drehen die x-Achse um 45° auf die y-Achse zu.

Wollen wir mehrere Transformationen hintereinander mit einer Matrix ausführen, dann müssen wir die Matrizen miteinander multiplizieren. Die Ergebnismatrix ist dann sozusagen unser all-inclusive-Paket, wie man beim Beispiel zur Kombination von Funktionen sehen kann. Um diesen Schritt etwas zu vereinfachen, habe ich einen CSS3 transform Matrizenrechner zusammengebaut. Damit könnt ihr Transformationsmatrizen miteinander multiplizieren, einzelne Funktionen auf eure Matrix anwenden, ein Beispiel ansehen (sofern es in das Sichtfeld passt ) und auch die Rechenschritte beim Multiplizieren der Matrizen nachvollziehen.

Hier noch ein paar weiterführende Links, bevor wir uns den einfacheren Alias-Funktionen zuwenden:

• Definition der Transformationsmatrix beim W3C
• Wikipedia: Lineare Transformationen
• Wikipedia: Matrizenmultiplikation

translate(<translation-value>[,<translation-value>])

Translate verschiebt das Objekt entsprechend des angegebenen Längenwertes (z.B. 10px). Der erste Wert bezieht sich auf die x-Achse (horizontal), der zweite Wert auf die y-Achse (vertikal). Wird der zweite Wert nicht angegeben, wird 0 angenommen. Alternativ kann mit translateX(<translation-value>) bzw. translateY(<translation-value>) direkt ein Wert für Verschiebung auf der x- bzw. y-Achse angegeben werden. (Somit sind translate(<translation-value>) und translateX(<translation-value>) synonym.) [Beispiel]

scale(<number>[,<number>])

Skaliert das Objekt um den numerischen Wert, also z.B. 2 für die doppelte und 0.5 für die halbe Größe. Der erste Wert bezieht sich auf die x-Achse (horizontal), der zweite auf die y-Achse (vertikal). Wird nur der erste Parameter angegeben, wird der Wert für beide Achsen verwendet. Alternativ kann mit scaleX(<number>) oder scaleY(<number>) eine Achse auch direkt verändert werden. [Beispiel]

rotate(<angle>)

Dreht das Objekt gemäß dem angegebenen Winkel um den Ursprung. Winkel werden als Zahl + deg geschrieben, also wäre der Parameter 90deg für eine Rotation um 90°. [Beispiel]

skew(<angle>[,<angle>])

Schert das Objekt. Auch hier sind Winkelangaben (Zahl + deg, also z.B. 90deg für 90°) notwendig. Der erste Wert steht für die Scherung zur x-Achse, der zweite Wert für die Scherung zur y-Achse. Wird nur der erste Wert angegeben, wird für die y-Achse 0° (= keine Änderung) angenommen. Alternativ gibt es skewX(<angle>) bzw. skewY(<angle>), um gezielt eine Achse anzusprechen. [Beispiel]

Solange sich die Eigenschaft noch in Entwicklung befindet, verwenden Webkit- und Mozilla-Browser ein Präfix. Möchte man sie bereits verwenden, muss sie daher mehrfach mit gleichen Parametern definiert werden: transform[-origin] (Opera), -moz-transform[-origin] (Mozilla) und -webkit-transform[-origin] (Webkit).

Beispiele

Die folgenden Beispiele werden an einem 50% transparenten, gelben DIV-Element mit rotem Rahmen gezeigt. Im Zentrum des DIV-Elements steht zudem der einfache Text CSS3. Zum besseren Verständnis befindet sich im Hintergrund ein Koordinatensystem, dass zusätzlich durch einen schwarzen Rahmen die Ursprungsform des DIV-Elements zeigt. So sieht das ganze ohne Transformationen aus (der schwarze Ursprungsrahmen ist hier natürlich nicht zu sehen):

Für eigene Experimente eignet sich der CSS3 transform Matrizenrechner.

1. Translation

Bei der Translation handelt es sich um die einfachste Form der Transformation. Das Objekt wird einfach innerhalb des Koordinatensystems verschoben. Eine Translation kann folgendermaßen definiert werden:

2. Rotation

Bei einer Rotation wird das Objekt einem Winkel entsprechend um den Ursprung gedreht. Per Default liegt der Ursprung in der Mitte des Objektes:

3. Ursprung

Am Beispiel der Rotation kann die Eigenschaft transform-origin schön demonstriert werden. Eigentlich gilt der Mittelpunkt des Objektes als Ursprung, aber mit transform-origin kann er beliebig verschoben werden. Das folgende Beispiel zeigt rotate mit den gleichen Parametern, wie sie in Beispiel 2 gesetzt waren, verschiebt aber den Ursprung von der Mitte in die linke, obere Ecke des Objektes:

4. Scaling

Scaling ermöglicht es uns, unser Objekt in die x- bzw. y-Richtung zu skalieren, also zu verkleinern oder zu vergößern. Im Beispiel wird die Höhe halbiert und die Breite verdoppelt:

5. Skew

Mit Skew können wir unser Objekt längs seiner x- bzw. y-Achse scheren. Im Beispiel wird um 45° längs der y-Achse verzerrt:

6. Kombinationen

Natürlich können wir die einzelnen Funktionen auch kombinieren – entweder in einer Matrix, oder eben durch Hintereinanderausführen der Funktionen:

Weitere Artikel zum Thema:

• CSS3: color (Farben) mit Farbtabellen (0)
• CSS3: box-shadow (Schatten) (0)
• CSS3: border-radius (abgerundete Ecken) (1)
• Mal kurz rundgeschaut… #24 (0)
• Mal kurz rundgeschaut… #23 (0)

Definition

Schauen wir uns zunächst wieder die Definition an:

<border-radius> =
[<length>|<percentage>]{1,4}
[/[<length>|<percentage>]{1,4}]?

Das bedeutet, dass die Eigenschaft 1-4 Parameter erhält und optional nochmal zusätzlich weitere 1-4 Parameter, die mit einem Schrägstrich (/) von den vorhergehenden Werten abgetrennt werden. Bei den einzelnen Werten handelt es sich entweder um Längenangaben oder um Prozentwerte, die in Relation zur gesamten Box stehen.

Alternativ können die einzelnen Ecken auch gezielt angesteuert werden, was etwas umständlicher, aber dafür leichter zu überblicken ist:

<border-[top-right|bottom-right|bottom-left|top-left]-radius> =
[<length>|<percentage>] [<length>|<percentage>]?

Hier bekommen also die Eigenschaften border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius einen Parameter (Länge oder Prozent) und optional einen weiteren Wert, der durch ein Leerzeichen abgetrennt wird.

border-radius ist natürlich immer vom bestehenden border abhängig. Ohne Rahmen gibt es auch keine runden Ecken

Parameter

Schauen wir uns nun an, wozu diese ganzen Parameter gut sein sollen. Sprechen wir eine Ecke direkt an, dann steht der erste Wert für den horizontalen (h) und der optionale zweite Wert für den vertikalen (v) Radius einer Ellipse (siehe Grafik links), die die Form der abgerundeten Ecke beschreibt. Ist kein zweiter Wert angegeben, dann entspricht der erste Wert dem Radius (h = v) des Kreises, der die Form beschreibt.

Etwas komplizierter wird es, wenn wir border-radius verwenden. Vor dem Schrägstrich (/) stehen die horizontalen Werte, dahinter die vertikalen Werte, dementsprechend reden wir wieder von einem Kreis (h=v), wenn der optionale Part (/ + Werte) weggelassen wird. Auf welche Ecken sich die Werte beziehen, hängt nun von deren Anzahl ab. Hier die Übersicht:

• 1 Wert: gilt für alle Ecken
• 2 Werte: (top-left & bottom-right) (top-right & bottom-left)
• 3 Werte: top-left (top-right & bottom-left) bottom-right
• 4 Werte: top-left top-right bottom-right bottom-left

Es ist durchaus möglich, für den horizontalen und den vertikalen Radius jeweils eine andere Anzahl Werte zu setzen, also z.B. ein Einheitswert horizontal und vier Einzelwerte vertikal. 0 steht immer für keine Rundung.

Solange sich die Eigenschaft noch in Entwicklung befindet, verwenden Webkit- und Mozilla-Browser ein Präfix. Möchte man sie bereits verwenden, muss sie daher mehrfach mit gleichen Parametern definiert werden: border-radius (Opera), -moz-border-radius (Mozilla) und -webkit-border-radius (Webkit).

Beispiele

Die folgenden Beispiele sollten das Prinzip verdeutlichen. Sofern Dein Browser bereits border-radius unterstützt, kannst Du den Effekt in der jeweiligen Box Live-Demo ansehen. Ansonsten sollten normale Boxen erscheinen.

1. Gleichmäßige Rundung

2. Elliptische Rundungen

3. Variierende Ecken

6. Prozentangaben

5. Variierende Rahmendicke

Interessant ist zu sehen, wenn sauber die “runden Ecken” gerendert werden, wenn die Rahmendicke variiert. Das padding dient in dem Beispiel dazu, dass der Inhalt nicht in den Rahmen läuft.

6. Rahmen dicker als Radius

Ist der Rahmen dicker als der Radius, dann bleibt die Ecke auf der Innenseite eckig:

Weitere Artikel zum Thema:

• Mal kurz rundgeschaut… #17 (0)
• CSS3: transform (Lineare Transformationen) (0)
• CSS3: color (Farben) mit Farbtabellen (0)
• CSS3: box-shadow (Schatten) (0)
• Mal kurz rundgeschaut… #24 (0)

Bisher wurden Farben entweder über die HTML4-Keywords, die SVG- bzw. X11-Keywords oder als hexadezimale RGB-Angaben definiert. Während die möglichen Farben via Keyword natürlich recht begrenzt sind, ist die hexadezimale RGB-Angabe (z.B. #FF0000 oder #F00 als Kurzfrom für rot) kaum intuitiv. Zunächst muss das richtige Mischverhältnis von rot, grün und blau gefunden werden, danach müssen die Werte noch in hexadezimale Werte umgerechnet werden. Dank CSS3 wird dies aber alles einfacher. Die hier vorgestellten Methoden zur Farbdefinition werden, abgesehen von Einschränkungen beim IE, bereits von allen modernen Browsern unterstützt.

RGB: Angabe in Dezimalzahlen und Prozent

Wie bereits erwähnt, mussten Farben bisher in hexadezimalen Werten angegeben werden. Mit der rgb-Funktion können Farben nun aber auch über eine Ganzzahl von 0-255 oder eine Prozentangabe von 0-100 definiert werden. Somit hätten wir nun folgende Möglichkeiten, die Farbe gelb darzustellen:

Das Ergebnis ist jeweils gleich (hier im Beispiel mit background-color):

HSL: Hue (Farbton), Saturation (Sättigung), Luminance (Helligkeit)

Deutlich intuitiver als die Angabe von Farben im RGB-Format ist die HSL-Variante. Dabei wird die Farbe über die drei Werte Farbton, Sättigung und Helligkeit definiert. Unter Farbton versteht man die Auswahl der Farbe aus einem Farbkreis durch die Angabe eines Wertes in Grad (°) von 0-359. Die folgende Skala zeigt die Verteilung der Farbtöne:

Bildquelle: Wikipedia; gemeinfrei.

Wie es sich für einen Kreis “gehört” entspricht also der Wert 360 dem Wert 0 (=rot). Gelb liegt bei 60°, grün bei 120° und blau bei 240°. Somit kann recht leicht ein Farbton ausgewählt werden, die Angabe erfolgt ohne Einheit. Nun kann die Farbe mit den Angaben für Sättigung und Helligkeit weiter variiert werden. Beide Werte werden in Prozent von 0-100 angegeben. Eine Sättigung von 100% zeigt die gewünschte Farbe wie im Farbkreis gezeigt. Wird sie hingegen auf 0% gesenkt, dann erhält man nur noch grau. Die Helligkeit entspricht mit 50% der normalen Helligkeit der Farbe, 0% führt zu schwarz, 100% zu weiß. Mit folgender Demo kann der Effekt der einzelnen Werte ausprobiert werden:

Beispiele
Hier als Beispiele einmal die Farben des Farbkreises in 30°-Schritten (100% Sätting, 50% Helligkeit):

Alphatransparenz

Ein ganz besonderes Schmankerl der neuen Farbfunktionen ist die direkte Unterstützung von Alphatransparenz, die bisher nur mit Grafiken zu realisieren waren. Um eine transparente Farbe zu definieren, ersetzen wir rgb() durch rgba() bzw. hsl() durch hsla() und ergänzen einen vierten Parameter in Form des Alphawertes zwischen 0 und 1. Wird 1 angegeben, dann ist die Farbe “massiv”, also gar nicht transparent, bei einer 0 wird die Farbe vollständig transparent, also unsichtbar. Rot mit 50% transparenz würde also so aussehen:

Im folgenden Beispiel lege ich DIVs mit obigen Angaben als background-color über das gezeigte Bild der Farbskala:

HTML4-Farben

Hier eine Liste der in HTML4 vordefinierten Farben:

X11-Farben (SVG)

Abschließend die definierten X11-Farben:

Weitere Artikel zum Thema:

• HTML5: Web Storage (Local und Session Storage) (0)
• HTML5 und CSS3 (0)
• Mal kurz rundgeschaut… #23 (0)
• Mal kurz rundgeschaut… #19 (1)
• CSS3: transform (Lineare Transformationen) (0)

Definition

Definiert ist die Eigenschaft folgendermaßen:

<shadow> = inset? && [<length>{2,4} && <color>?]

Das bedeutet, dass man optional inset für einen inneren Schatten angegeben kann, 2 bis 4 Längenangaben notwendig sind und wiederum optional eine Farbe definiert werden kann. Bei den Längenangaben kann es sich um positive und teils auch um negative Werte handeln, die Farbe kann natürlich neben dem klassischen Hex-Code bzw. den vordefinierten Konstanten auch mit den neuen Farbmöglichkeiten von CSS3 angegeben werden.

Parameter

Schauen wir uns zunächst die einzelnen Parameter und deren Bedeutung im Detail an:

• Länge 1: Horizontaler Versatz des Schattens. Ein positiver Wert zeichnet den Schatten nach rechts, ein negativer Wert nach links.
• Länge 2: Vertikaler Versatz des Schattens. Ein positiver Wert zeichnet den Schatten nach unten, ein negativer Wert nach oben.
• Länge 3 (optional): Laufweite des Weichzeichners. Hier sind nur positive Werte möglich.
• Länge 4 (optional): Aufsatz auf den Schatten. Ein positiver Wert erweitert den Schatten, ein negativer Wert zieht ihn zusammen.
• Farbe (optional): Die Farbe des Schattens.
• Inset (optional): Wird dieser Wert angegeben, dann handelt es sich um einen inneren Schatten.

Solange sich die Eigenschaft noch in Entwicklung befindet, verwenden Webkit- und Mozilla-Browser ein Präfix. Möchte man sie bereits verwenden, muss sie daher mehrfach mit gleichen Parametern definiert werden: box-shadow (Opera), -moz-box-shadow (Mozilla) und -webkit-box-shadow (Webkit).

Beispiele

Sofern Dein Browser box-shadow (ggf. mit Präfix) bereits unterstützt, kannst Du den Effekt jeweils in der Box Live-Demo sehen. Browser, die box-shadow noch nicht unterstützen, zeigen einfach nur die Box ohne Schatten.

1. Ganz einfacher Schatten:

2. Farbiger Schatten:

3. Weichzeichner:

4. Mit Aufsatz:

5. Mit Abzug:

6. Negativer Versatz:

7. Innerer Schatten:

8. Mehrere Schatten:
Es können auch mehrere Schatten definiert werden, wenn diese per Komma getrennt werden:

Weitere Artikel zum Thema:

• CSS3: transform (Lineare Transformationen) (0)
• CSS3: color (Farben) mit Farbtabellen (0)
• CSS3: border-radius (abgerundete Ecken) (1)
• Mal kurz rundgeschaut… #24 (0)
• Mal kurz rundgeschaut… #23 (0)

Das Problem

Mein Fehler lag darin, dass ich vor lauter Wald die Bäume nicht mehr gesehen habe. Voller Begeisterung für die Positionierungsmöglichkeiten von CSS habe ich das Diagramm aus augenscheinlich zusammenhangslosen DIVs gebaut. Dabei bietet HTML doch durchaus sinnvolle Möglichkeiten zur sinnvollen Erfassung solcher Daten, die dann wiederum mit CSS auf den entsprechende Format gebracht werden können. Beispielsweise lassen sich die Daten in einer Tabelle erfassen, die für lesende Software nachvollziehbar sind, und die dann dank CSS optisch aufbereitet werden.

Ein Beispiel

Thomas verwies auf einen von ihm gebauten CSS-Graphen, der sehr eindrucksvoll die Möglichkeiten zur Formatierung einer korrekten Tabelle mit CSS präsentiert. Die Werte werden bei eingeschaltetem CSS in einem mehrdimensionalen Balkendiagramm dargestellt, wobei die Balken aus entsprechend verschobenen Grafiken bestehen. Solltet ihr an einer solchen komplexen Lösung interessiert sein, schaut mal in den kommentierten Quelltext. Schaltet man CSS aus, so bekommt man eine ganz normale Tabelle der gezeigten Werte zu Gesicht.

Das gestrige Beispiel mit TABLE

Die Verwendung einer TABLE hat nicht nur den Vorteil, dass die Daten auch ohne CSS interpretierbar sind, sondern auch, dass wir auf die ganzen Positionierungen verzichten können. Somit ist diese Variante nicht nur barrierefrei, sondern zudem auch deutlich einfacher. Zunächst zeige ich den allgemeinen CSS-Teil der Umsetzung:

Sieht schon deutlich einfacher aus, oder? Mit dem obigen Code ist schon alles vorbereitet. Nun müssen wir nur noch die Balken mit Farben (bzw. Hintergrundgrafik) und Länge definieren, wobei hier auch wieder 1 Pixel für 0,25 Prozent genommen wurde:

Bleibt jetzt noch die zugehörige Tabelle:

Zur Darstellung der Balken verwende ich einfach leere DIVs (ein Leerzeichen &nbsp; ist darin, um Warnungen des Validators zu umgehen), die dank CSS optisch gestaltet werden. Folgender Screenshot zeigt das Ergebnis:

Das Schöne ist, dass die ganze Sache auch deutlich kompakter wird. Inkl. Spritegrafik bringt diese Lösung (ohne Minimierung des Codes) weniger als 2 Kilobyte auf die Waage. Mit deaktiviertem CSS sieht es dann wie auf diesem Screenshot aus:

Daher nochmal vielen Dank an Thomas für den sinnvollen Hinweis in die richtige Richtung!

Weitere Artikel zum Thema:

• Balkendiagramme mit CSS (7)
• Mal kurz rundgeschaut… #23 (0)
• Mal kurz rundgeschaut… #19 (1)
• Little Boxes Teil 1 gratis (0)
• HTML5 und CSS3 (0)

Möchte man auf einer Webseite Statistiken angemessen aufbereiten, dann kommt man kaum an entsprechenden Grafiken vorbei. Bei einmaligen, statischen Werten können Diagramme natürlich mit einer beliebigen Software erstellt und als Grafiken eingebunden werden. Aber wie geht man mit dynamischen Werten um? Für nur wenige Graphen lohnt es sich meist nicht, eine umfangreiche Bibliothek zur dynamischen Erzeugung einzurichten und sich darin einzuarbeiten. Externe Lösungen, wie z.B die Google Chart API, bergen hingegen eine gewisse Abhängigkeit von einem Drittanbieter. In diesem Tutorial möchte ich deshalb erläutern, wie sich einfache Balkendiagramme problemlos mit CSS umsetzen lassen. Es geht dabei lediglich um die Gestaltung, in einem weiteren Beitrag werde ich dann die dynamische Erzeugung via PHP behandeln.

Die hier vorgestellte Methode ist eigentlich nichts besonderes, zeichnet sich aber insbesondere dadurch aus, dass sie sich vollkommen mit Bordmitteln umsetzen lässt. Wie bereits erwähnt, sind auf der Serverseite keine Bibliotheken zur Grapherstellung notwending. Aber auch der Client braucht weder JavaScript, noch Flash oder irgendein sonstiges Plugin. Natürlich steckt ein gewisser Aufwand dahinter, wenn man jedes Balkendiagramm einzeln zusammenbauen muss, jedoch soll diese Detailerklärung des Aufbaus ja eher für den “Einmaleinsatz” und zum allgemeinen Verständnis dienen. Doch jetzt genug der langen Vorrede – los geht’s:

Inhalt

1. Unser Zeichenblatt
2. Achsen und Beschriftung
3. Die Balken
4. Darf’s ein wenig 3D sein?
5. Doch ein wenig JavaScript?

1. Unser Zeichenblatt

Zunächst definieren wir einen Bereich, innerhalb dessen wir unser Diagramm gestalten wollen. Wir beginnen mit dem Stylesheet:

Unser Zeichenblatt wird über eine eindeutige ID bardemo benannt. Wir setzen die Position auf relative, damit wir die einzelnen Unterelemente innerhalb unserer Leinwand positionieren können.

Dazu gehört natürlich auch das entsprechende DIV im Body unseres HTML-Dokumentes:

Schon haben wir unsere Leinwand:

2. Achsen und Beschriftung

Wie wir es in der Schule gelernt haben, versehen wir unser Zeichenblatt jetzt erstmal mit den Achsen, in die wir nachher unsere Balken einfügen wollen. Dazu positionieren wir ein weiteres DIV innerhalb des bardemo-DIV. Wieder erstmal die Style-Angaben:

Und natürlich der HTML-Teil:

So sieht das dann aus (der Hintergrund ist nur für das Beispiel eingefärbt):

Nun spendieren wir unserem Diagramm noch einen Titel, damit auch jeder weiß, womit er es zu tun hat. Hierfür verwenden wir ein weiteres DIV mit passenden Style-Angaben:

Und her mit dem Titel:

So einfach geht das:

Außerdem müssen wir unsere Achsen beschriften. Da die Balken in diesem Beispiel horizontal ausgerichtet sein sollen, d.h. von links nach rechts, schreiben wir zunächst die Einheit an die x-Achse. Auch für dieses DIV brauchen wir wieder den passenden Style:

Und wieder zusammenbauen:

Langsam kann man erahnen, worauf es hinausläuft:

Bisher haben wir eigentlich nur die festen Elemente auf unserer Leinwand verteilt. Nun wollen wir aber an der y-Achse die Beschriftungen für die einzelnen Balken anbringen. Wir entscheiden uns nun für drei Balken, wodurch wir die Positionen der Labels festlegen können. Jeder Balken soll 30 Pixel hoch werden, zusätzlich sollen sie 15px Abstand voneinander haben. Wir definieren nun die Styles für die Umgebung der Labels labels, allgemeine Angaben für alle Labels label und dann die Details für die einzelnen Labels label_x (Abstand von oben top und Farbe color).

Die eigentlichen Beschriftungen kommen dann in unseren HTML-Code:

Jetzt ist unsere Leinwand für die eigentlichen Balken bereit:

3. Die Balken

Jetzt möchten wir natürlich auch die richtigen Balken einzeichnen. Die Positionen sind soweit klar, wir müssen uns nur noch ansehen, wieviele Pixel einem Prozent entsprechen. Unser Zeichenbereich für die Balken innerhalb der Achsen ist exakt 400 Pixel breit, d.h. 4 Pixel entsprechen 1%. Dadurch können wir unsere Graphen in 0,25%-Schritten darstellen, bei kleineren Unterschieden müssten wir runden. Für eine einfache Visualisierung sollte diese Genauigkeit aber ausreichen. Die Demobalken sollen die Werte 37,5% (=150px), 67,5% (=270px) und 100% (=400px) darstellen. Wieder schreiben wir die für alle Balken gültigen Werte in eine eigene Klasse bar, während die individuellen Angaben (Breite width, Farbe background und Abstand von oben top) in eigenen Klassen bar_x stehen:

Außerdem soll die konkrete Wert rechtsbündig im Balken angezeigt werden. Damit diese Zahl nicht direkt am Rand klebt, fügen wir nach rechts noch ein Leerzeichen &bsp; ein:

Schon hätten wir bereits ein fertiges Diagramm:

4. Darf’s ein wenig 3D sein?

Diagramme sind meistens nicht sonderlich spannend. Aber mit ein paar grafischen Finessen kann man es aber geschickt aufwerten. (Zumindest solange man es nicht übertreibt… auch hier gilt: Weniger ist manchmal mehr!) CSS3 bietet hierzu tolle Möglichkeiten, aber zur Zeit sollten wir uns der Kompatibilität wegen lieber mit dem zufrieden geben, was CSS2 uns ermöglicht. Beispielsweise können wir den Balken mit einer Hintergrundgrafik durch einen Farbverlauf einen leichten 3D-Effekt spendieren. Andere Möglichkeiten wären auch Grafiken mit Schatten oder eine zusätzliche Grafik, die den Balken mit runden Ecken abschließt. Hier wollen wir als Beispiel einfach eine Hintergrundgrafik aus einem CSS-Sprite einfügen. So sieht die Grafik aus, wobei sie hier etwas verbreitert angezeigt wird, da die eigentliche Datei (365 Bytes) nur 1px breit ist:

Um unsere Grafik zu nutzen, müssen wir lediglich die CSS-Klassen der Balken etwas anpassen:

Dadurch wird jedem DIV die Hintergrundgrafik bar_sprite.png hinzugefügt, die bei Balken 2 und 3 via background-position entsprechend verschoben wird. Mehr zur Verwendung von CSS-Sprites findet ihr im zugehörigen Artikel. Die Hintergrundfarbe steht hier im Beispiel immer noch in den Style-Klassen, wodurch die Darstellung auch gelingt, wenn die Grafik nicht geladen werden kann bzw. mit Verzögerung geladen wird.

So sieht es dann aus:

Damit ist unser Bordmittel-Balkendiagramm auch schon fertig. Im letzten Abschnitt möchte ich zusätzlich noch zeigen, wie man den Graphen via JavaScript noch etwas aufpeppen kann.

5. Doch ein wenig JavaScript?

Da sich CSS-Eigenschaften via JavaScript manipulieren lassen, kann man (sofern man eben nicht nur mit HTML und CSS auskommen muss bzw. möchte) dem Diagramm noch etwas zusätzlichen Pepp verleihen. Beispielsweise könnte man sie dynamisch manipulierbar machen. An dieser Stelle möchte ich zeigen, wie die Balken beim Seitenaufruf in einer kleinen Animation “herausfahren” können. Dazu ändern wir zunächst die CSS-Klassen so, dass die Balken zu Beginn nur 0px breit sind:

Im HTML entfernen wir zusätzlich die Beschriftungen, die erst nach dem vollständigen Ausfahren der Balken erscheinen soll. Außerdem ergänzen wir für die Balken IDs, damit wir leichter darauf zugreifen können:

Außerdem ergänzen wir den BODY-Tag unseres HTML-Dokuments so, dass nach dem Ladevorgang die JavaScript-Funktion show_bars() aufgerufen wird:

Vor dem schließenden BODY-Tag, also am Ende unseres Dokumentes, fügen wir nun noch eine Skript-Sektion ein, die den folgenden JavaScript-Code enthalten soll:

Also machen wir uns jetzt an das eigentliche Skript. Zunächst wollen wir ein paar notwendige Variablen definieren, die im Ablauf verwendet werden und uns eine leichte Anpassung der Parameter ermöglichen:

Jetzt brauchen wir auch die zu Beginn aufgerufene show_bars()-Funktion. Sie durchläuft die einzelnen Balken aus dem Array bardemo_bars in einer Schleife und überprüft, ob der aktuelle Wert des Balkens aus bardemo_current bereits der Ziellänge aus bardemo_target entspricht. Wurde die Länge noch nicht erreicht, dann wird der Wert um bardemo_step erhöht und die Länge des Balken auf den entsprechenden Pixel-Wert gesetzt. Sollte sie stattdessen erreicht sein, wird der Zielwert noch als Label im Balken ausgegeben.

Abschließend definiert die Funktion, sofern noch nicht alle Balken fertig sind, dass sie in bardemo_time Millisekunden wieder ausgeführt werden soll.

Minimiert man alles, dann hat man so ein animiertes Balkendiagramm mit weniger als 3 Kilobyte. Eine Demo findet ihr im Testlabor. Und jetzt viel Spaß damit!

Weitere Artikel zum Thema:

• HTML/CSS-Balkendiagramm – barrierefrei (0)
• Webseiten-Performance erhöhen (3)
• Web-Entwicklung 1: Die Grundgedanken (0)
• Teleskoptext – Die etwas andere Klickstrecke (1)
• Mal kurz rundgeschaut… #23 (0)

HTML5 bringt insbesondere viele Neuerungen, die die Entwicklung von Web-Applikationen erleichtern sollen. Aus diesem Grund will Google die Arbeiten an Gears zurückfahren, um stattdessen verstärkt auf HTML5 zu setzen. Da der neue Standard zudem erlaubt, Video und Audio nativ einzubinden, findet er auch in den laufenden Diskussionen über das drohende Ende des Flash-Zeitalters entsprechende Beachtung. Besonders interessant sind außerdem die zusätzlichen Formular-Elemente (z.B. für Datumseingaben), das Canvas-Element, das dynamische Grafiken via HTML erlaubt, und die zusätzlichen Tags zur Strukturierung eines Dokumentes (z.B. article oder nav).

Folgende Dokumente finde ich persönlich insbesondere für den Einstieg in HTML5 sehr interessant:

HTML5 – A vocabulary and associated APIs for HTML and XHTML

Abstract: This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

Zur zuletzt veröffentlichten Version des Dokumentes.

HTML: The Markup Language

Abstract: This document describes the HTML markup language and provides details necessary for producers of HTML content to create documents that conform to the language. By design, it does not define related APIs, nor attempt to specify how consumers of HTML content are meant to process documents, nor attempt to be a tutorial or “how to” authoring guide.

Zur zuletzt veröffentlichten Version des Dokumentes.

HTML5 differences from HTML4

Abstract: HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML. “HTML5 differences from HTML4″ describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML5 specification is still actively in development. When in doubt, always check the HTML5 specification itself.

Zur zuletzt veröffentlichten Version des Dokumentes.

Viel Spaß beim Stöbern… und nicht vergessen: Es handelt sich nach wie vor um Entwürfe. Die Links führen übrigens nicht direkt auf die gerade veröffentlichten Dokumente vom 4. März, sondern auf die jeweils zuletzt veröffentlichte Version, d.h. sie eignen sich als Bookmarks, wenn ihr immer auf dem neusten Stand sein wollt.

Weitere Artikel zum Thema:

• Teleskoptext – Die etwas andere Klickstrecke (1)
• HTML5 und CSS3 (0)
• Sketching und Wireframing – Noch mehr Vorlagen (0)
• Praktisch: Webseiten mit Browsershots testen (0)
• MAMA wacht über Webstandards (1)