Kurs:Neueste Internet- und WWW-Technologien/CSS 3

Cascading Style Sheets (CSS) haben die Aufgabe Stilvorlagen für z.B Schriftarten, Farben und Abstände für Webdokumente zu sein.

Geschichte

Die einzelnen Schritte der Entwicklung von CSS lassen sich in level einteilen. Das erste level ist die 1, und das neuste level ist zur Zeit CSS level 3.

CSS level 1

Die erste Spezifikation wurde 1996 zur W3C Empfehlung. Dabei besteht eine Regel für eine Stilvorlage aus zwei Hauptteilen: dem Selektor ("H1") und der Deklaration ("color:blue"), wobei diese wiederum in Eigenschaft ("color") und Wert ("blue") eingeteilt werden.

Grundlegend gab es unter CSS level 1 folgende Funktionsunterstützung:

• Schriftgestaltung
• Farbe von Text, Hintergründe und Elementen
• Ausrichtung von Bildern, Texten, Tabellen
• Ränder, Abstände für Objekte

CSS level 2

Das level 2 für CSS wurde direkt vom W3C entwickelt und 1998 veröffentlicht. Es sollte neue Funktionalitäten zur Gestaltung von HTML Elementen bieten. Zu den neuen Funktionen gehören mitunter:

• absolute, relative und fixe Positionierung
• z-index
• Unterschiede zwischen Medien
• Schatten in Texten

CSS level 2.1

Das nächste level wurde ebenfalls vom W3C entwickelt. Hierbei handelte es sich nur um eine revision, also wurden keine neuen Funktionalitäten hinzugefügt. Dieses level von CSS galt als jedoch nur als Fehlerbehebung für die bisher schlecht unterstützte Version CSS 2. Ebenso wurde der vom W3C vergebene Status von Working Draft zu Candidate Recommendation Status ständig gewechselt. Letztendlich wurde das erste Mal 2004 CSS 2.1 vom W3C empfohlen, auch wenn es das letzte Mal 2011 angepasst werden musste und somit endgültig zur W3C-Empfehlung aufsteigen konnte.

Im Gegensatz zu allen anderen Browsern unterstützt nur der Internet Explorer 8 bisher alle CSS2.1 Spezifikationen.

Neues in CSS 3

Module

Die Modulstrukur wurde für CSS level 3 eingeführt. Dabei sollten diese Module das Entwickeln von Stilvorlagen vereinfachen, damit nicht ein ganzes level, sondern eben nur die Module durch den W3C empfohlen werden mussten.

Für CSS 3 gab es schon 1999 die allerersten Entwürfe. Die Moduleb bekamen vom W3C indirekt eine Priorisierung, da einige Funktionalitäten schon früh fertig oder gewünscht waren.

Entwicklungsstatus

Wie schon erwähnt, werden die level der CSS zunächst durch verschiedene Status gebracht, bevor sie vom W3C als Empfehlung zu Implementierung an die Browerhersteller geht. In der folgenden Tabelle werden die einzelnen Status genauer erklärt.

Working Draft	Es sind noch viele Veränderungen zu erwarten und es wurde bisher nur veröffentlicht, um Feedback zu bekommen.
Last Call	Die Entwcklungszeit ist so gut wie vorrüber und ein baldiges Ende der Entwurfszeit ist in Aussicht.
Candidate Recommendation	In diesem Status überprüft der W3C vielfach die Entsprechungen an den technischen Anforderungen.
Proposed Recommendation	Wenn ein Mpdul oder level in diesem Status ist, kann es bedenkenlose eingesetzt werden. Es ist der Wartestatus bevor die vollständige Bestätigung vom W3C veröffentlicht wird.
W3C Recommendation	Das Modul oder das level ist fertiggestellt. Ab nun wird die Implementierung durch Browserhersteller empfohlen.

Kompatibilität

Eine statische Tabelle, welche Funktionen gerade in welchen Browsern implementiert sind, bringt nicht viel Informationen mit sich, da sich dies ständig ändert. Die beste Referenz kann hier http://www.w3schools.com/ zu CSS 3 Kompatibilität bieten. Sie zeigen zu jedem Modul auf, ab welcher Version eines Browsers sich die Module Prefixfrei nutzen lassen.

Prefixe

Prefixe sind für die Kompatibiliät der einzelnen Browserhersteller. Dies bedeutet, dass entweder der W3C das Modul nicht als Empfehlung herausgegeben hat oder die Browserhersteller diese Empfehlung noch nicht umgesetzt haben.

Im ersten Fall erstellen die Browserhersteller schon für noch nicht empfohlene Module Implementierungen. Dies hat zur Folge, dass sich diese von Browser zu Browser unterscheiden. Die Browserhersteller besitzen dabei Prefixe, die vor dem eigentlichen Modulnamen gesetzt werden.

Die Prefixe lauten:

• -moz- für Mozilla Firefox
• -webkit- für Chrome und Safari
• -o- für Opera
• -ms- für Internet Explorer

Damit man nun für jeden Browser ein Modul gleich nutzen möchte, muss beachtet werden, welche Prefixe alle neben dem eigentlichen Modul mitgenutzt werden müssen. Dies macht das Nutzen neuer Funktionalitäten schwieriger.

Im zweiten Fall stehen die Implementierung noch aus und die Funktionalitäten können überhaupt nicht für einige Browser genutzt werden.

Beispiele

Webfonts

Webfonts sind Schriftarten, die online verfügbar sind, sodass auf weitere Schriftarten zugegriffen werden kann, ohne dass der Nutzer diese installiert haben muss. Die Idee für Webfonts wurde schon für CSS2 vorgeschlagen, jedoch nur für den Internet Explorer 5 umgesetzt. Dies bedeutete, dass auf das Embedded Open Type (.eot) aufgebaut wurde. Erst seit Safari 3.1 (2007) ist es möglich TrueType (.ttf) und OpenType (.otf) zu verwenden, worauf CSS3 Webfonts aufbauen.

Es gibt zwei Möglichkeiten Webfonts zu benutzen. Die erste ist direkt in der .css Datei eine Sourceangabe der Schriftartendatei (in diesem Fall .ttf). Durch Setzen eines font-family-Namens kann diese dann in den einzelnen Elementen genutzt werden.

   @font-face {
   font-family: "Kimberley";
   src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
   }
   h4 { font-family: "Kimberley", sans-serif }

Die zweite Variante zeigt das Einbinden von Webfonts durch einen Link zu einem externen Stylesheet. In diesem Fall handelt es sich um eine Schriftart von Google, die viele Schriftarten bereitstellen. Hierbei gibt Google nicht nur den einzubettenen Tag, sondern auch den zu benutzenen font-family-Namen.

   < link href='http://fonts.googleapis.com/css?family=Nosifer' rel='stylesheet' type='text/css' >
   h5 { font-family: 'Nosifer', cursive; }

border-radius

Unter border-radius wird die Stilvorlage für abgerundetes, einfaches Design von bisher eckigen Elementen in HTML bezeichnet. Dieses Modul ist seit 2005 in Bearbeitung und fand bei hohen Anklang, das so ein einfaches Design schnell erstellt werden konnte.

Die ersten vier Stelle geben den horizontalen Radius für die Ecke an. Durch Trennung mit Hilfe eines "/" werden die nächsten vier Stellen für den vertikalen Radius angegeben.

Das erste Beispiel zeigt einen vollständig, gleichmäßig, abgerundeten Körper.

   div.border-radius {
   border-radius: 5em 5em 5em 5em;
   } 

In diesem Beispiel wird gezeigt, dass die linke, obere und die rechte untere Ecke eine geringere Abrundung als die anderen beiden Ecken haben.

   div.border-radius {
   border-radius: 0.5em 2em 0.5em 2em;
   } 

Mit dem letzten Beispiel zu border-radius soll die benutzung des vertikalen Radius gezeigt werden.

   div.border-radius {
   border-radius: 5em 1em / 5em 1em;
   }

Transparenz

In CSS 3 ist es möglich Elementen, die eine Farbe besitzen auch noch transparent zu machen. Hierbei ist es egal, ob die Farbe mithilfe von Hex oder im rgb-Farbraum angegeben werden. Das folgende Bild zeigt einige Farben und ihre Transparenz. Dabei wird sind die Schritte von oben nach unten: 20%, 40%, 80% und 100%. Das bedeutet also, dass die Angabe opacity: 0.1 nur 10% des eigentliches Farbwertes ist.

Wie schon erwähnt, kann die Hintergrundfarbe auch durch die Angabe von RGB-Werten stattfinden. Wichtig in diesem Fall ist die Eigenschaft opacity, die in diesem Beispiel bei 40% liegt.

   .opacity1{
   background: rgb(196, 216, 90);
   opacity: 0.4;
   }

Für die Farbe #A61000 wird in diesem Beispiel eine Transparenz von 80% festgelegt.

   .opacity2{
   background: #A61000;
   opacity: 0.8;
   }

Multi-Column-Layout

bei der Stilvorlage für das Multi-Column-layout handelt es sich um eine einfache Darstellung von Fließtext in mehreren Spalten. Hierbei kann durch column-count die Anzahl der Spalten und durch column-width die Breite der Spalten angegeben werden.

Wie im Beispiel deutlich zu erkennen, ist diese Funktionalität noch nicht in alle Browsern implementiert, sodass Prefixe verwendet werden müssen, damit alle Browser dies korrekt anzeigen.

   p {
   -moz-column-count: 4;
   -webkit-column-count: 4;
   column-count: 4;
   -moz-column-width: 200px;
   -webkit-column-width: 200px;
   column-width: 200px;
   }

Transitions

Transitions sind ein Modul von CSS3, um Eigenschaftsänderungen in CSS-Werten zu vollziehen, ähnlich wie bei beim schon in CSS2 bekannten Effekt von hover. Jedoch gibt es bei Transitions die Möglichkeit die Dauer des Effekts (timing-functio), dessen Beschleunigung (transition-timing-function), die zeitliche Verschiebung (transition-delay) und die Eigenschaft, die sich ändern soll (transition-property) anzugeben. Besonders die Seite http://cubic-bezier.com/ zeigt deutlich, wie diese Bezier-Kurven für die Geschwindigkeit der Elemente verantwortlich ist.

Die 'timing-function wird in s (Sekunden) oder ms (Millisekunden) angegeben.

Für die transition-timing-function gibt es schon einige vordefinierte Werte, die das Ganze ein wenig vereinfachen:

• ease: (0.25,0.1,0.25,1)
• linear: (0,0,1,1)
• ease-in: (0.42,0,1,1)
• ease-out: (0,0,0.58,1)
• ease-in-out: (0.42,0,0.58,1)

Sie bedeuten die Koordinaten einer Bezierkurve im Raum 1x1, wodurch nur Werte von 0 bis 1 erlaubt sind. Im folgenden Beispiel werden für ein div-Element alle Eigenschaften innerhalb von 3 Sekunden mit dem Geschwindigkeitsverlauf der ease-Bezierkurve geändert.

   div.one {
   -moz-transition: all 3s ease;
   -webkit-transition: all 3s ease;
   -o-transition: all 3s ease;
   -ms-transition: all 3s ease;
   transition: all 3s ease;
   }

Animations

Animationen sind im Gegensatz zu Transitions, die Änderung des Stils eines Elements (Größe, Farbe) mit Zeit und Geschwindigkeit beschränken, dafür gedacht, animierten Bilder, Flash und Javascript zu ersetzen, da sie auch die Position ändern können.

Ausgelöst wird die Animation in dem folgenden Beispiel durch den hover-Effekt. Dabei soll die Animation myfirst innerhalb von 6 Sekunden ausgeführt werden. Diese beschreibt, dass von (from) der Hintergrundfarbe #A61000 zu (to) der Hintergrundfarbe rgb(196, 216, 90) gewechselt werden soll. Nach den sechs Sekunden wechselt das div-Element wieder in seinen Ausgangszustand.

   div.test:hover{
   animation:myfirst 6s;
   -moz-animation:myfirst 6s; /* Firefox */
   -webkit-animation:mysecond 6s; /* Safari and Chrome */
   }
   
   @keyframes myfirst{
   from {background:#A61000;}
   to {background:rgb(196, 216, 90);}
   }

Es ist möglich, nicht nur Start- und Endzustand, sondern auch Zwischenschritte anzugeben. Diese werden z.B. durch Prozentangaben angegeben.

   @keyframes mysecond{
   0% {background:#A61000;}
   25% {background:rgb(196, 216, 90);}
   50% {background:#015666;}
   100% {background:black;}
   } 

Außerdem können mit Animationen die Positionen der Elemente verändert werden. Dazu müssen nur die Abständen von links und von oben angegeben werden.

   @keyframes mythird{
   0% {background:A; left: 0px; top: 0px;}
   25% {background:B; left:200px; top: 0px;}
   50% {background:C; left:200px; top:200px;}
   75% {background:D; left: 0px; top:200px;}
   100% {background:E; left: 0px; top: 0px;}
   }

Vor- und Nachteile

Die Umsetzung von Modulen anstatt ein ganzes level finde ich besonders gelungen. Es bringt die Veränderungen und Funktionalitäten schneller in die Browser. Es führt jedoch auch dazu, dass, wie schon im Abschnitt Kompatibilität erwähnt, zwischenzeitlich die Browser unterschiedliche Implementierungen der Module besitzen, wodurch man sich nicht sicher sein kann, ob ein Modul in allen Browsern 100%ig gleich aussieht bzw. sich gleich verhält.

Besonders gelungen ist bei CSS3 die Transitions und Animationen. Sie setzen den Grundstein dafür, dass nicht mehr jedes Element mit Javascript bearbeitet werden muss, falls es animiert sein soll. Ob CSS3 Javascript und Flash jemals vollständig ersetzen kann, da deren Funktionsumfang im Gegensatz dazu viel größer sind. Eine Umstellung von Javascript/Flash auf CSS3

Empfehlungen zum Weiterlesen

Diese Seiten zeigen nicht nur weitere Beispiele auf, sondern klären auch die Grundlagen für CSS.

• http://www.w3schools.com/css3/
• http://www.css3.info/
• http://de.wikipedia.org/wiki/Cascading_Style_Sheets