Florence Maurice gibt Trainings, Inhouseschulungen und indi-viduelle Coachings zu Webthemen, setzt eigene Webprojekte um und schreibt regelmäßig Artikel in Fachzeitschriften. Sie ist Autorin mehrerer Fachbücher zu CSS, PHP und MySQL sowie mobilem Webdesign.

Florence Maurice

CSS3

Die neuen Features für fortgeschrittene Webdesigner

2., erweiterte und aktualisierte Auflage

Florence Mauriceflorence@maurice-web.de

Lektorat: René SchönfeldtCopy-Editing: Marita Böhm, MünchenHerstellung: Birgit BäuerleinSatz: Isolde Kommer und Tilly Mersin, GroßerlachUmschlaggestaltung: Helmut Kraus, www.exclam.deDruck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn

Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN Buch 978-86490-118-8PDF 978-3-86491-399-0ePub 978-3-86491-400-3

2., aktualisierte und erweiterte Auflage 2014Copyright © 2014 dpunkt.verlag GmbHWieblinger Weg 1769123 Heidelberg

Die erste Auflage dieses Buchs erschien 2011 unter dem Titel »CSS3. Leitfaden für Webdesigner« im Addison-Wesley Verlag, München

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

5 4 3 2 1 0

v

Inhaltsverzeichnis

Vorwort 11.1 Besser mit CSS3 .......................................................................21.2 Was in diesem Buch steht .........................................................31.3 Was nicht in diesem Buch steht ................................................61.4 Was Sie sonst noch wissen sollten ...........................................6

1 CSS3 heute 91.1 CSS3 – Stand der Dinge ........................................................101.2 CSS3 und die aktuellen Browser ............................................13

Verbreitung der Browser ....................................................15Herstellerspezifische Präfixe ..............................................16

1.3 CSS3 heute – was geht? ..........................................................221.4 Leben entsteht durch den kleinen Unterschied .......................241.5 Vorteile durch CSS3 ...............................................................281.6 CSS3 für mobile Geräte .........................................................301.7 CSS3 heute – ganz pragmatisch ............................................31

2 Umgang mit unterschiedlichen Browsern 332.1 Wer kann’s? ...........................................................................342.2 Unschlagbar: Modernizr ........................................................35

Auftritt Modernizr ............................................................36JavaScript-Schnittstelle von Modernizr..............................40Modernizr einsetzen oder nicht .........................................41

2.3 Nachbessern mit JavaScript ..................................................412.4 Eintauchen in proprietäre Untiefen: Filter ..............................43

filter und -ms-filter und der IE8 .........................................45Filter zum Nachrüsten von CSS3-Features ........................46Filter-Fazit .........................................................................47

2.5 Noch mehr Proprietäres: htc-Dateien am Beispiel .................48htc-Dateien – Grundprinzip ...............................................48Die Rundum-sorglos-Lösung CSS3 PIE .............................48

2.6 Jedem IE sein Süppchen – Conditional Comments ...............50

vi Inhaltsverzeichnis

Conditional Comments – Basics ........................................50Conditional Comments und Performance ..........................52Conditional Comments ohne externe Stylesheets ..............52

2.7 Ausblick .................................................................................53

3 Transparenzen 553.1 opacity – weniger ist mehr Transparenz .................................56

Das Grundprinzip von opacity...........................................56opacity in den heutigen Browsern ......................................58

3.2 Farben notieren: rgb() und hsl() .............................................59RGB und Co. .....................................................................59HSL ..................................................................................60

3.3 Am Ende steht a: rgba() und hsla() .........................................62Grundprinzip von hsla() und rgba() ...................................63Nicht nur als Hintergrund .................................................64rgba() und hsla() am Beispiel: Bildbeschriftung..................66Strategien für ältere Browser .............................................68

3.4 Steckbrief ...............................................................................72

4 Alle Macht den Selektoren 754.1 Attributselektoren ..................................................................76

Das gab es bereits in CSS 2.1 .............................................76Neu in CSS 3 – Attributselektoren für

Teilübereinstimmungen ................................................784.2 Strukturelle Pseudoklassen ....................................................82

Verwandtschaftsbeziehungen .............................................82Abzählen mit :nth-child() ...................................................83Der Soundsovielte seiner Art .............................................86Erst-, Letztgeborene und Einzelkind ..................................87Überblick über die strukturellen Pseudoklassen zur

Auswahl bestimmter Kindelemente ..............................894.3 Weitere Pseudoklassen – :empty, :not() und :root ...................904.4 :target – das Ziel vor Augen ...................................................90

Klassisches Beispiel für :target ...........................................91Fortgeschrittene Einsatzbereiche von :target ......................92

4.5 Pseudoklassen für Formularelemente .....................................94Zustand der Formularelemente ..........................................94Pseudoklassen für die Validierung mit HTML5 ................95

4.6 Pseudoklassen am Beispiel: Zebratabelle ..............................96Nachbessern für ältere IEs .................................................98Komfortabler nachbessern mit Selectivizr ........................100

4.7 Die liebe Verwandtschaft: allgemeiner Geschwisterkombinator & Co. ...........................................101

viiInhaltsverzeichnis

4.8 :checked und Geschwisterkombinator zum Filtern von Inhalten ...............................................................................102

4.9 Ausblick: Selektoren der Zukunft ........................................1054.10 Steckbrief .............................................................................107

5 Mehr Typografie – Webfonts, Textschatten und mehr 109

5.1 Webfonts – herunterladbare Schriften ..................................110Schriftformate .................................................................112Die Sache mit den Lizenzen .............................................113Schriften konvertieren .....................................................114Die richtige browserübergreifende @font-face-Syntax .....115Dienste nutzen .................................................................116Google Fonts nutzen ........................................................117Das Webfont Kit von Font Squirrel ..................................119FOUT vermeiden .............................................................120Umgang mit Schriftauszeichnungen ................................122Webfonts, aber richtig ......................................................126

5.2 Icon-Fonts ............................................................................1275.3 OpenType-Features ..............................................................1295.4 Textschatten ........................................................................131

Schatteneffekte ................................................................132Textschatten in den aktuellen Browsern ..........................135

5.5 Bereit für den Umbruch: word-wrap bzw. overflow-wrap ....1375.6 Steckbrief .............................................................................139

6 Rahmen, Schatten und Hintergrundbilder 1416.1 border-radius: abgerundete Ecken .......................................142

Die Anatomie von border-radius ......................................143Asymmetrische Rundungen .............................................144Kreise und Ellipsen ..........................................................145Allerlei Verkürzungen ......................................................146Browsergeschichten und Steckbrief ..................................147Browserunterstützung für border-radius ..........................148

6.2 background-image: altbekannte Eigenschaft in neuem Gewand ...............................................................................149

Zeichenreihenfolge ..........................................................150Parallax-Effekt.................................................................151

6.3 Mehr Möglichkeiten für background-position, background-repeat und background-attachment .................153

6.4 background-clip – Reichweite des Hintergrundbilds ............156Schöner Einsatzbereich: transparente Rahmen ................158Browsergeschichten und Steckbrief ..................................159

viii Inhaltsverzeichnis

6.5 background-origin – Startpunkt des Hintergrundbildes ......1606.6 border-image: Bilder für Rahmen ........................................161

Rahmenbild definieren .....................................................162Browsergeschichten und Steckbrief ..................................167

6.7 background-size: Hintergrundbilder skalieren .....................168Das Browserfenster füllen ................................................170Browsergeschichten und Steckbrief ..................................170

6.8 Angenehme Schatten: box-shadow ......................................171Schattensteuerung ............................................................171Buttons ...........................................................................177Glühendes Textfeld ..........................................................179Browsergeschichten und Steckbrief ..................................180

7 Farbverläufe 1837.1 Geschichte der CSS3-Farbverläufe .......................................1847.2 Lineare Farbverläufe ............................................................186

Mehr Optionen für Farben ..............................................187Unterschied zwischen box-shadow und

linear-gradient() ..........................................................189Richtung des Farbverlaufs bestimmen .............................191Radiale Farbverläufe ........................................................192Form des Farbverlaufs ....................................................193Position festlegen .............................................................195Größe bestimmen ............................................................195

7.3 Sich wiederholende Farbverläufe ..........................................1967.4 Alte Webkit-Syntax ..............................................................1987.5 Muster über Farbverläufe erzeugen ..................................... 2007.6 Browsergeschichten und Steckbrief ......................................201

Syntaxvarianten ...............................................................201Nachbessern in älteren Browsern (= IEs) .........................202Steckbrief .........................................................................205

8 Transformationen 2078.1 2D-Transformationen ..........................................................208

rotate() – Drehen..............................................................208Mittelpunkt für die Drehung festlegen ............................209Größenveränderung über scale() ......................................210Verschieben mit translate() ..............................................211Transformationen kombinieren .......................................212Gerader Text auf gedrehtem Element ...............................213Schicke Schatten – zwei Nichts erzeugt, gedreht und in

den Hintergrund gesetzt .............................................214Browsergeschichten und Steckbrief ..................................219

ixInhaltsverzeichnis

8.2 3D-Transformationen ..........................................................220Position des Betrachters .................................................. 223Kindelemente bei Transformationen ................................224Sichtbarkeit der Rückseite ................................................226Mehr als Drehungen ........................................................2273D-Transformationen einsetzen .......................................227Browsergeschichten und Steckbrief ..................................233

9 Transitions und Animations 2359.1 Transition ...........................................................................236

Einführungsbeispiel .........................................................236transition-property: Auswahl der Eigenschaft .................238Zeitangaben: transition-duration und transition-delay ....240Ablauf des Übergangs ......................................................242Animierte Bildübergänge .................................................244Animierten Seitenwechsel implementieren .......................252Browsergeschichten und Steckbrief ..................................256

9.2 Animationen ........................................................................257Animation definieren und zuweisen .................................258Animationen genauer steuern ..........................................261Glüheffekt bei Button ......................................................263Unendlicher Slider............................................................264Weitere Effekte ................................................................266Browserkompatibilität und Steckbrief ..............................267

10 Responsive Webdesign 26910.1 Gestatten: responsive ...........................................................270

Media Queries .................................................................271Metaangabe für Smartphones ..........................................276Aus fest mach flüssig ........................................................277Ein Desktop-First-Responsive Layout ..............................280Nachbessern in älteren Browsern .....................................281Mobile-First-Herangehensweise ......................................282

10.2 Bilder im Responsive Webdesign ..........................................286Bilder flexibilisieren .........................................................286Bilder für hochauflösende Displays: Retina & Co. ..........288

10.3 Weiterführende Techniken ...................................................291Navigationen im Responsive Webdesign ..........................291Off Canvas ..................................................................... 300Layoutänderungen – die Wahl der Breakpoints ...............306

10.4 Fazit Responsive Webdesign ................................................30610.5 Steckbrief Media Queries .....................................................307

x Inhaltsverzeichnis

11 Layouten mit CSS3 30911.1 Mehrspaltendarstellung .......................................................310

Anzahl der Spalten .........................................................311Breite der Spalten ............................................................312Trennlinie ........................................................................313Spalten verbinden ............................................................315Mehr Steuerung bei der Aufteilung ..................................316Spaltenumbruch vermeiden ..............................................316Browsergeschichten und Steckbrief ..................................319

11.2 Flexbox ................................................................................320Flexbox-Basics .................................................................320Finetuning: Ausdehnung ..................................................323Leerraumverteilung ..........................................................324Praktisch: horizontal und vertikal zentrieren ...................326Reihenfolge der Flexitems ...............................................327Flexible Breiten ................................................................328Alles fürs Responsive Webdesign .....................................330Steckbrief .........................................................................330Browsergeschichten .........................................................331Crossbrowser-Lösungen ..................................................332

11.3 Noch mehr Layoutmodule ...................................................334

12 Neue Einheiten und mehr 33712.1 Freie Wahl des Boxmodells und CSS lernt rechnen ..............338

box-sizing – Wahl des Boxmodells ...................................339CSS-Rechner ................................................................... 340Browsergeschichten und Steckbrief ................................. 340

12.2 Neue Einheiten braucht das Land: rem und vw ...................341rem wie em, nur einfacher ...............................................341Passend zur Viewport-Größe ...........................................343Browsergeschichte und Steckbrief ....................................345

13 Anhang 34713.1 Einführung in LESS/Sass .....................................................348

Erste Schritte mit LESS ....................................................349LESS-Konzepte ................................................................349Und Sass & Compass & Co. ...........................................352Präprozessor einsetzen oder nicht? ..................................354

13.2 Quellen im Netz ..................................................................35513.3 Browserunterstützung der vorgestellten Features .................356

Index 360

1

Vorwort

Der Siegeszug von CSS3 ist unbestreitbar und unübersehbar. CSS3 ist im Web allgegenwärtig: eine über CSS3 abgerundete Ecke hier, eine leichte Transparenz dort, ein Schatten da, woanders ein schöner Farbverlauf, und für die Überschrift wurde vielleicht eine individuelle Schrift gewählt. Neben diesen rein optischen Aufhübschungen kann CSS3 aber noch mehr. Sie können CSS3 für Dinge verwenden, die früher bei CSS undenkbar schienen: Für viele Animationen ist CSS3 die bessere Wahl als JavaScript. Und schließlich hat ein weiteres CSS3-Feature – die Abfragen nach Gerä-teeigenschaften über CSS3 Media Queries – das Responsive Webdesign, einen der wichtigsten aktuellen Trends bei Webseiten, erst ermöglicht. Res-ponsive Webdesign bedeutet flexible Webseiten, die sich an die Gegeben-heiten des Ausgabemediums anpassen. Layouts, die bei viel Platz mehr-spaltig sind, können etwa auf einem Smartphone problemlos einspaltig angezeigt werden.

Apropos Smartphones: Der mobile Zugriff hat heute eine ganz zentrale Bedeutung fürs Webdesign. Wenn Sie Ihre Webseiten fit für Smartphones machen wollen, kommen Sie wiederum nicht an CSS3 vorbei. Denn viele Dinge, die zwar auch mit CSS 2.1 unter Zuhilfenahme von Bildern funk-tionieren würden, gehen mit CSS3 direkt und sind damit wesentlich per-formanter. Und auch für App-typische Seitenübergänge ist CSS3 mit einer Prise JavaScript die richtige Wahl. Wenn Sie sich einmal das Stylesheet von jQuery Mobile, einem beliebten Framework für mobile Seiten und mobile Web-Apps, ansehen, werden Sie dort hauptsächlich CSS3 vorfin-den. Kurz gefasst: Wenn Sie moderne Webseiten für Smartphones, Desk-tops und Tablets oder auch Web-Apps für mobile Geräte erstellen wollen, dann führt kein Weg an CSS3 vorbei.

CSS3 ist allgegenwärtig.

Mobil ohne CSS3 geht nicht.

2 Vorwort

Besser mit CSS3

CSS3 bedeutet in vielen Fällen eine Arbeitserleichterung. Das klassische Beispiel hierfür sind die abgerundeten Ecken. Wenn Sie früher eine fle-xible Box erstellen wollten, so benötigten Sie hierfür vier Hintergrund-bilder und eine ausgeklügelte Methode, diese zuzuweisen. Mit CSS3 geht das ganz einfach: Die Eigenschaft border-radius macht das, was ihr Name verspricht.

Das heißt, die Lösung durch CSS3 ist in diesem Fall einfacher zu reali-sieren und damit auch besser zu warten. Bei eventuellen Änderungen müs-sen keine Bilder neu erstellt werden, sondern man braucht nur die CSS-Datei anzupassen.

Ein weiterer Vorteil ist die verbesserte Performance: Zusätzliche Bilder, die geladen werden müssen, bedeuten zusätzliche HTTP-Requests, also Zeit. Und die sparen Sie sich und Ihren Besuchern. Was sind also nun die wichtigsten Vorteile von CSS3?

■ In CSS 2.1 müssen Sie für manche Effekte komplizierte Tricks anwen-den, CSS3-Formatierungen sind einfach und direkt.

■ CSS3-Lösungen sind schneller zu implementieren, leichter zu warten und anzupassen.

■ CSS3 ist performanter. Viele CSS-2.1-Effekte basieren auf Hinter-grundbildern; mit CSS3 können Sie auf Bilder verzichten, was HTTP-Requests spart.

Trent Walton kommt im »Smashing Magazine« anhand einer Beispielseite zu dem Ergebnis, dass sich die CSS3-Variante um 33% rascher erstellen lässt, dass die Dateien um fast 10% kleiner sind und dass aufgrund der geringeren Anzahl an HTTP-Requests die Webseite um 45% schneller lädt.1

Aber CSS3 anzuwenden ist nicht immer ganz einfach:

■ Erstens, weil das, was CSS3 ermöglicht, ebenfalls komplex ist. Beispiel 3D Transforms: Das eröffnet neue Perspektiven – aber in die Einstel-lungsmöglichkeiten muss man sich auch erst einmal hineinfinden. Ähn-lich ist es bei den über CSS3 realisierten Animationen oder den neuen Media Queries.

1 http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark

Vorteile von CSS3

CSS3 ist nicht immer einfach.

3Was in diesem Buch steht

■ Zweitens, weil die Browser die Spezifikation, die sich in manchen Punk-ten ja noch in der Entwicklung befindet, unterschiedlich implementiert haben und sich auch nicht alle CSS3-Features heute schon gleicherma-ßen für den produktiven Einsatz eignen.

■ Und drittens, weil es unterschiedliche Möglichkeiten gibt, in älte-ren Browsern nachzubessern und mit nicht unterstützenden Browsern umzugehen.

Deswegen ist CSS3 nicht nur einfach wunderbar, sondern bietet auch mehr als genug Material für ein Buch …

Was in diesem Buch steht

Kapitel 1, »CSS3 heute«, informiert Sie über den aktuellen Stand der Dinge bezüglich CSS3. Sie erfahren, dass CSS3 in Module unterteilt ist, die unterschiedlich nahe an der endgültigen Verabschiedung sind, und welche Strategien Browser entwickelt haben, um mit dieser ungewissen Situation umzugehen. Außerdem lesen Sie, warum und wann Sie die CSS3-Features mit welcher Strategie einsetzen können. Die Vorteile von CSS3 werden hier auch noch einmal näher behandelt.

An dem Thema Browser und unterschiedliche Implementierungen kommt niemand vorbei, der in der Webentwicklung unterwegs ist. Erst recht nicht, wenn man vorhat, neue Features einzusetzen. Und so zeigt Kapitel 2, »Umgang mit unterschiedlichen Browsern«, die wichtigsten Tools und Strategien im Umgang mit den Browserunterschieden: von einem großartigen Tool namens Modernizr bis hin zum richtigen Umgang mit Conditional Comments, die die Performance nicht beeinträchtigen – inklusive einer kurzen Exkursion in die Unterwelt der proprietären Tech-niken wie Filter.

Transparenzen sind ein wichtiges Element von Webdesigns. Mit CSS3 gibt es gleich zwei Möglichkeiten für Transparenzen – zum einen die Eigen-schaft opacity und zum anderen die neuen Farbdefinitionen über rgba() und hsla(). Wie diese funktionieren und wie man in Browsern nachbessert, die weniger transparenzfreudig sind, zeigt Kapitel 3, »Transparenzen«.

CSS3 heute

Umgehen mit unterschiedlichen

Browsern

Transparenzen

4 Vorwort

Auf den ersten Blick wirken Selektoren wenig sexy. Aber nicht ganz ohne Grund hat Eric Meyer die CSS3-Selektoren als eines der attraktivsten Fea-tures von CSS3 erkoren.2 Und sie bieten eine enorme Arbeitserleichterung, sodass man mehr Zeit auf die spannenderen Features verwenden kann. Aber neben der Einsparung von Klassen und Ids im HTML-Code ermögli-chen die CSS3-Selektoren auch interaktive Komponenten – beispielsweise durch die scheinbar so harmlosen Selektoren :target oder auch :checked. Guter Stoff für Kapitel 4, »Alle Macht den Selektoren«, das auch einen Ausblick auf die in Zukunft angedachten neuen Selektoren bietet (mitun-ter auch fälschlich als »CSS4« betitelt).

Wer vom Printbereich kommt und sich aufs Webdesign einlässt, leidet oft unter den äußerst beschränkten Möglichkeiten für die Typografie und individuelle Schriften. Mit CSS3 wird alles besser: Webfonts funktionieren bestens, und besonders praktisch sind auch die Icon-Fonts. Daneben gibt es Textschatten, OpenType-Features und mehr … alles Themen von Kapi-tel 5, »Mehr Typografie – Webfonts, Textschatten und mehr«.

Bei einer Umfrage nach der bekanntesten CSS3-Eigenschaft stünde sicher border-radius an vorderster Stelle – runde Ecken per CSS! Aber das Hintergrund- und Rahmen-Modul, das in Kapitel 6, »Rahmen, Schatten und Hintergrundbilder«, vorgestellt wird, hat noch einiges mehr zu bie-ten: von mehrfachen und skalierbaren Hintergrundbildern über Schatten-effekte bis hin zu Bildern für Rahmen.

CSS3 ersetzt oft den Aufruf des Bildbearbeitungsprogramms, etwa wenn sich runde Ecken direkt durch die entsprechende Eigenschaft erstellen las-sen. Weniger Bilder bedeuten bessere Performance und einfachere War-tung. Dazu passen thematisch dann auch die Farbverläufe über CSS, die einen zentralen Platz bei der Gestaltung von Buttons, Tabs und Menüs haben und die Kapitel 7, »Farbverläufe«, zeigt.

Wer Elemente drehen oder verzerren will, musste früher Bilder einset-zen. Mit CSS3 geht das ganz ohne – ein paar Zeilen Code sorgen für den gewünschten Effekt. Der Vorteil: Die Texte sind weiterhin für Suchmaschi-nen auslesbar und bleiben auch für Screenreader nutzbar – ganz im Unter-schied zu Bildern. Möglich wird das durch die CSS3 Transforms, um die sich alles in Kapitel 8, »Transformationen«, dreht. Im wahrsten Sinne des Wortes neue Dimensionen für Benutzeroberflächen eröffnen sich insbeson-dere durch die 3D Transforms.

Übergänge sind in CSS nicht wahrnehmbar. Wenn ein Menüpunkt beim Hovern die Farbe ändert, so findet dieser Wechsel abrupt statt. CSS3 macht den Übergang sichtbar und Benutzeroberflächen schöner. CSS Tran-sitions werden in Kapitel 9, »Transitions und Animations«, behandelt. Ein weiteres Thema des Kapitels sind die CSS-Animationen. Sie ermöglichen

2 http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/

Selektoren

Typografie

Rahmen und Hintergründe

Farbverläufe

Transformationen

Transitions und Animations

5Was in diesem Buch steht

Effekte, die man sonst nur über JavaScript oder Flash erreichen konnte. JavaScript hat bei Transitions/Animations aber trotzdem nicht ausgedient, denn es kann mittels Klassenzuweisungen die Animation auslösen. Prak-tisch sehen wir uns das anhand eines animierten Seitenübergangs und eini-ger Bildüberblendeffekte an.

Die Bildschirme werden immer größer und gleichzeitig immer kleiner – die Unterschiede zwischen den einzelnen Geräten, mit denen Websei-ten betrachtet werden, sind so groß wie nie, und das wird sich in absehba-rer Zeit auch nicht ändern. Eine Antwort auf dieses Problem sind Media Queries – passende CSS-Angaben je nach den Eigenschaften des Ausga-begeräts. Media Queries sind die wichtigste Komponente des Responsive Webdesigns – eines Webdesigns, das sich an das Gerät anpasst, auf dem es betrachtet wird. Wie das in der Praxis funktioniert, zeigt Kapitel 10, »Res-ponsive Webdesign«, inklusive nützlicher Tricks fürs Responsive Webde-sign, etwa eine Off-Canvas-Präsentation für einzelne nicht sofort benötigte Bereiche auf kleinen Bildschirmen oder eine Klappnavigation.

Wer flexible Layouts erstellen möchte, für den ist heute float das Maß aller Dinge – außer er verwendet CSS3. Da gibt es gleich mehrere Module, die float seine Vormachtstellung streitig machen können: Zuerst ist da das Multi-column zur Erstellung von Text, der sich automatisch auf mehrere Spalten verteilt. Besonders nützlich ist das Flexible Box Layout für wirk-lich flexible Boxen, womit viele Layoutprobleme wie richtige Zentrierung, gleich lange Spalten oder auch Leerraumaufteilungen bei flexiblen Men-übuttons der Vergangenheit angehören. Das alles ist Thema von Kapitel 11, »Layouten mit CSS3«.

Schließlich konzentrieren wir uns in Kapitel 12, »Neue Einheiten und mehr« auf überaus hilfreiche Details wie die Eigenschaft box-sizing oder die neuen Einheiten rem und vw.

Was an CSS3 abschreckend wirkt, ist, dass Sie viele Eigenschaften noch für ältere Browser mit eigenen Präfixen schreiben müssen. Das verdop-pelt den Code und macht Änderungen mühsam. Mehrere Tools verspre-chen Abhilfe. Besonders komfortabel geht es mit CSS-Präprozessoren wie LESS und Sass, die sich inzwischen einen festen Platz im aktuellen CSS-Workflow erobert haben. Im Anhang finden Sie alles für den Einstieg mit LESS/Sass und wie Sie sich darüber die Arbeit mit CSS3 erleichtern. Außer-dem führt der Anhang die wichtigsten Links für weitere Informationen auf und fasst die vorgestellten Features samt ihrer Browserunterstützung zusammen.

Die Browserunterstützung ist ein heikler Punkt, wenn es um CSS3 geht: Nicht alles ist gleichermaßen praktikabel, bei manchem kann man es ver-schmerzen, wenn ein Browser das entsprechende Feature nicht darstellt, bei anderen wiederum ist es unverzichtbar, man muss eine Fallbacklösung haben oder nachbessern … um diese Fragen geht es natürlich auch jeweils in den einzelnen Kapiteln.

Media Queries für Responsive

Webdesign

Flexible Layouts

Hilfreiche Details

LESS und Sass

Browserunterstützung

6 Vorwort

Im Vergleich zu meinem CSS3-Buch von 2011 ……wurden alle Inhalte aktualisiert und erweitert – neu berücksichtigt habe ich die veränderte Browsersituation (IE10, Änderungen bei Opera, Chrome) und die neue Version der Spezifikationen (CSS-Gradients, Flex-box etc.). Außerdem gibt es jede Menge Neuerungen, hier nur eine kleine Auswahl: CSS3-Filtermöglichkeiten über die Pseudoklasse :checked; die Vermeidung des FOUT bei der Verwendung von Webfonts; OpenType-Features, Icon-Fonts, nette Tricks mit Spread Distance bei box-shadow; die Erstellung von Buttons mit Farbverläufen und Boxschatten; Farbverläufe mit Transparenzen kombinieren, Farbverläufe animieren; die Erstellung eines 3D-Würfels; Bildüberblendeffekte, animierte Seitenübergänge, die neuen flexiblen Viewport-basierten Einheiten wie vw und, und, und ...

Was nicht in diesem Buch steht

Das Buch ist keine Einführung in CSS. Vorausgesetzt wird, dass Sie über grundlegende CSS-Kenntnisse verfügen, also etwa wissen, wie Sie Style-sheets einbinden, die gängigsten CSS-2.1-Eigenschaften einsetzen und Selektoren wie Klassen und Ids verwenden; auch ein Layout sollten Sie einmal realisiert haben.

Das Buch ist hingegen das Richtige für Sie, wenn Sie das Wichtigste zu CSS3 erfahren wollen: Vielleicht haben Sie bisher noch wenig CSS3 ein-gesetzt, dann finden Sie hier einen anschaulichen Einstieg. Auch wenn Sie bereits mit dem einen oder anderen CSS3-Feature gearbeitet, aber keinen systematischen Überblick haben, erfahren Sie hier die Zusammenhänge und lernen nützliche Tricks und weitergehende Möglichkeiten.

Was Sie sonst noch wissen sollten

Die Listings zum Buch können Sie auf der Website zum Buch unter http://www.css3-features.de herunterladen, dort finden Sie auch Aktualisierun-gen zu den vorgestellten Inhalten.

CSS3 ist ein weites Feld, über das man gleich mehrere Bücher schreiben könnte. Ich musste also eine Auswahl der zu behandelnden Features tref-fen. Ausgewählt wurden die Features, die besonders attraktiv sind und sich einer guten oder sogar sehr guten Browserunterstützung erfreuen.

Im Steckbrief in jedem Kapitel finden Sie eine Tabelle mit der Brow-serunterstützung. Angegeben ist immer die erste Browserversion, die ein bestimmtes Feature implementiert, wenn die Unterstützung erst seit Kur-zem eingeführt wurde.

Aktualisierungen und Ergänzungen

CSS-Kenntnisse werden vorausgesetzt.

.

Alles Wichtige zum neuen Standard

Die Website zum Buch: css3-features.de.

7Was Sie sonst noch wissen sollten

Apropos Browser: Jede neue Browserversion brüstet sich unter anderem mit einer verbesserten CSS3-Unterstützung. Damit Sie alles selbst austes-ten können, brauchen Sie auf jeden Fall mehrere Browser, zumindest den aktuellen Firefox, den aktuellen Chrome, am besten auch Opera, Safari und Internet Explorer 10.

So, ich hoffe, Sie freuen sich jetzt mit mir auf die vielen neuen Features und Möglichkeiten. Und damit: Vorhang auf für CSS3!

1 CSS3 heute

10 1 CSS3 heute

CSS3 ist schon da. Es ist nur noch nicht gleichmäßig verteilt.

Dieses Kapitel gibt Ihnen einen Crashkurs über die äußeren Umstände von CSS3: Sie erfahren, wie es heute um CSS3 steht, wie der Standardisierungs-prozess abläuft und wie weit die unterschiedlichen Komponenten von CSS3 entwickelt sind. Außerdem beschäftigen wir uns mit den unter-schiedlichen Browsern sowie den herstellerspezifischen Präfixen und wie Sie damit richtig umgehen.

Der zweite Teil des Kapitels liefert Ihnen Hinweise, die man berück-sichtigen muss, um zu entscheiden, wann und wie man CSS3 einsetzt. Schließlich geht es noch einmal etwas ausführlicher als im Vorwort um die Vorteile von CSS3, den Nutzen von CSS für mobile Geräte und um die wichtige Frage, inwieweit Seiten in unterschiedlichen Situationen auch unterschiedlich aussehen dürfen.

1.1 CSS3 – Stand der Dinge

CSS3 ist im Gegensatz zu CSS 2.1 kein monolithischer Block, es ist nicht eine einzige Spezifikation, sondern in unterschiedliche Module aufgeteilt. Das hat zwei Vorteile: Zum einen können Browserhersteller auch nur ein-zelne Module implementieren. Und zum anderen können einzelne Module schneller fertiggestellt werden als eine umfassende Gesamtspezifikation. Einen aktuellen Überblick über den Stand der einzelnen Module finden Sie unter http://www.w3.org/Style/CSS/current-work.

Hinter jedem Modul sind der derzeitige Status und der folgende Status angegeben. Alle Module müssen zu ihrer Verabschiedung einen bestimm-ten Weg durchlaufen. Dieser sieht folgendermaßen aus:

■ Working Draft (WD) – Arbeitsentwurf ■ Last Call (LD) – Letzter Aufruf ■ Candidate Recommendation (CR) – Veröffentlichungsvorschlag ■ Proposed Recommendation (PR) – Geplante Veröffentlichung ■ W3C Recommendation (REC) – Standard

Eigentlich heißt »Recommendation« so viel wie Empfehlung. Die fertigen Spezifikationen des W3C heißen Recommendation und nicht Standard oder ähnlich, da das W3C kein klassisches Standardisierungsgremium ist. De facto sind diese aber wie Standards, deswegen ist die deutsche Überset-zung passend, die von der offiziellen Seite des W3C stammt.

Es ist wichtig zu wissen, in welchem Zustand sich ein Modul befin-det: Denn die Wahrscheinlichkeit für Änderungen ist höher, je weiter unten sich ein Modul im Standardisierungsprozess befindet. Bei Working

Wege zur Standardisierung

11CSS3 – Stand der Dinge

Drafts sind Änderungen folglich wahrscheinlicher als bei einer Proposed Recommendation.

Man könnte vermuten, dass ein Modul vom W3C in den Status einer Recommendation erhoben wird und danach die Browserhersteller begin-nen, die entsprechenden Features zu implementieren. So läuft es aber nicht: Die Browserhersteller implementieren die Features schon wesentlich frü-her. Damit eine Recommendation überhaupt eine solche werden kann, muss es entsprechende Implementierungen geben. Eine Implementierung ist auf jeden Fall gefordert, besser sind jedoch zwei »preferably, the Work-ing Group SHOULD be able to demonstrate two interoperable implemen-tations of each feature«.1 Das bedeutet, dass nur etwas eine Recommenda-tion wird, was sich auch als praxistauglich erwiesen hat.

Der eben vorgestellte Weg der Standardisierung ist außerdem keine Ein-bahnstraße. Es kann auch vorkommen, dass ein Modul herabgestuft wird. So passierte es beispielsweise bei CSS 2.1, das bereits am 8.9.2009 eine Candidate Recommendation war und am 7.12.2010 als Last Call herun-tergestuft wurde. Am 12.4.2011 wurde CSS 2.1 wieder in den Zustand einer Candidate Recommendation erhoben.

1 http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels

Keine Recommendation ohne

Implementierung

Abb. 1-1

Die Seite des W3C der

CSS-Arbeitsgruppe

12 1 CSS3 heute

Ein paar Beispiele für wichtige Module und den Status, in dem sie sich befinden (Stand Herbst 2013):

■ CSS 2.1 befindet sich seit April 2011 im Status einer Recommendation. Das bedeutet, obwohl CSS 2.1 schon lange eingesetzt wird, war es bis April 2011 noch keine Recommendation. Das ist ein bemerkenswerter Punkt. Denn häufig wird als pauschales Argument gegen den Einsatz von CSS3-Features angeführt, dass CSS3 noch nicht verabschiedet ist.

■ Weit gediehen ist das Selectors-Modul. Es ist seit dem 29. September 2011 Recommendation, d.h. offiziell verabschiedet. Das Modul bein-haltet neben den aus CSS 2.1 bekannten Selektoren spannende Fea-tures wie :nth-child() zur Auswahl des soundsovielten Kindelements oder :target, um das Ziel von internen Verweisen hervorzuheben (mehr dazu in Kapitel 4, »Alle Macht den Selektoren«). Das W3C arbeitet bereits an einer Nachfolgespezifikation mit weiteren Features.

■ Ebenfalls im Status einer Recommendation befindet sich das Color-Modul, das neben den klassischen, aus CSS 2.1 bekannten Möglichkei-ten zur Definition von Farben auch Farbdefinitionen mit Alphakanal vorsieht – schön für transparente Bereiche (Kapitel 3, »Transparenzen«).

■ Auch schon offiziell verabschiedet im Juni 2012 als Recommendation ist die Spezifikation für Media Queries. Media Queries erlauben CSS-Angaben je nach Eigenschaft des Ausgabegeräts und sind damit eine zentrale Komponente des Responsive Webdesign (Kapitel 10, »Respon-sive Webdesign«).

■ Das Backgrounds and Borders-Modul beinhaltet border-radius für abgerundete Ecken, mehrfache Hintergrundbilder, Bilder für Rahmen etc. (alles Thema in Kapitel 6, »Rahmen, Schatten und Hintergrundbil-der«). Es ist im Herbst 2013 eine Candidate Recommendation.

■ Das Multi-column Layout-Modul ermöglicht Mehrspaltenlayouts: Damit kann man in einem Bereich einen Text normal fließen lassen und dann angeben, dass dieser auf zwei oder mehr Spalten verteilt wird (Kapitel 11, »Layouten mit CSS3«). Dieses Modul ist ebenfalls im Zustand einer Candidate Recommendation.

■ Das CSS Image Values-Modul »definiert, wie Eigenschaften auf Bilder per URL verweisen«. Sie brauchen es beispielsweise, um Farbverläufe per CSS zu erstellen (Kapitel 7, »Farbverläufe«). Es liegt ebenfalls als Candidate Recommendation vor.

■ Das Flexible Box Layout ist das Layoutmodul der Zukunft (Kapitel 11, »Layouten mit CSS3«). Nach einer etwas bewegten Geschichte und mehreren tief greifenden Änderungen ist es ebenfalls seit Septem-ber 2012 Candidate Recommendation, und damit ist die jetzt definierte Syntax recht stabil.

Recommendations

Candidate Recommendations

13CSS3 und die aktuellen Browser

■ Das Values and Units-Modul führt neue Einheiten ein und ermöglicht neue Arten der Flexibilisierung. Auch dieses Modul ist bereits eine Can-didate Recommendation (Kapitel 12, »Neue Einheiten und mehr«).

Aber auch mehrere Module, die sich derzeit »erst« im Zustand eines Wor-king Draft befinden, bieten interessante Optionen und lassen sich heute schon gewinnbringend einsetzen.

■ Das CSS Fonts-Modul (Kapitel 5, »Mehr Typografie – Webfonts, Text-schatten und mehr«) liegt als Working Draft vor und beinhaltet unter anderem die @font-face-Regel, über die sich herunterladbare Schriften in Webseiten integrieren lassen. Und mit ein paar Tricks funktioniert das sogar bis zurück zum Internet Explorer 6, obwohl wir den ja nor-malerweise inzwischen ignorieren können.

■ Ebenfalls spannend ist das Transforms-Modul, das Eigenschaften zum Drehen und Skalieren von Elementen im 2D- und 3D-Raum bereit-stellt und das alle aktuellen Browser unterstützen, der IE9 zumindest die 2D-Transformationen (Kapitel 8, »Transformationen«). Transfor-mationen sind wichtig für viele Seitenübergangseffekte oder schicke Bildwechsel.

■ Das CSS Transitions-Modul ist auch ein Working Draft und ermöglicht sanftere Übergänge – beispielsweise für Änderungen beim Hovern, aber nicht nur (Kapitel 9, »Transitions und Animations«).

■ Auch die CSS Animations – Animationen über CSS (Kapitel 9, »Tran-sitions und Animations«) – sind derzeit ein Working Draft, aber inzwi-schen in allen aktuellen Browsern implementiert. Wenn Sie sich einmal gefreut haben an den schönen Seitenübergängen von jQuery Mobile – diese sind alle über CSS Animations realisiert.2

Das war nur ein Ausschnitt aus den neuen CSS3-Modulen – es gibt natür-lich wesentlich mehr. Ausgewählt im Buch wurden diejenigen, die so weit von Browsern unterstützt werden, dass Sie sie heute schon einsetzen können.

1.2 CSS3 und die aktuellen Browser

Alle aktuellen Browser zeichnen sich durch eine sehr gute CSS3-Unterstüt-zung aus. Hier ein paar Details und wichtige Meilensteine.

Firefox unterstützt viele CSS3-Features wie die CSS3-Selektoren, das Color-Modul, große Teile des »Backgrounds and Borders«-Moduls, Media Queries, Webfonts und Teile des »Multi-column Layout«-Moduls und der

2 Zum Ausprobieren: http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html

Wichtige Module als Working Draft

Firefox

14 1 CSS3 heute

Transformationen, Transitions und Animations und auch das Flexbox-Modul. Meilensteine sind Version 4, die beispielsweise Animationen und 3D-Transformationen brachte, und Version 16, durch die man sich in vie-len Fällen das browserspezifische Präfix -moz- ersparen kann.

Webkit-basierte Browser wie Safari und Chrome sind in Sachen CSS3 sicher Vorreiter. Sie unterstützen unter anderem neben den bei Firefox genannten Features etwa auch CSS3-Filter-Effekte. Es gibt jedoch Unter-schiede zwischen den einzelnen Webkit-Browsern, die unter anderem damit zusammenhängen, dass Chrome einen rascheren Update-Zyklus hat. Beim Safari sind Version 5 und 5.1 wichtige Meilensteine, so unterstützt Safari seit 5.1 beispielsweise die neue modifizierte Syntax für Farbverläufe.

Apropos Chrome: Google hat im Frühjahr 2013 angekündigt, in Zukunft eine eigene Browser-Engine mit Namen Blink für Chrome zu nut-zen. Es ist jedoch keine eigene Browser-Neuentwicklung, sondern ein Fork von Webkit, sodass sich für Webentwickler nicht zu viel ändern sollte.

Opera muss sich, was seine CSS3-Unterstützung betrifft, beileibe nicht verstecken. Ein Meilenstein war hier die Version 10.5 (Layout-Engine Presto 2.5), die CSS3 Transitions und 2D Transforms bringt und eine ver-besserte Unterstützung für das »Backgrounds and Borders«-Modul lie-fert. Mit Version 11.10 kommt die Unterstützung für das »Multi-column Layout«-Modul und CSS-Farbverläufe. In Version 12.1 sind viele Eigen-schaften ohne herstellerspezifische Präfix implementiert. Leider wird Opera als Rendering Engine nicht mehr weitergeführt werden; stattdessen setzt das Opera-Team seit Opera 15 auf ein Webkit-Derivat.

Der Internet Explorer (IE) implementiert in Version 9 viele CSS3-Fea-tures: Unterstützt werden alle CSS3-Selektoren, das Color-Modul, Media Queries und Teile des »Backgrounds and Borders«-Moduls. Transforms sind ebenfalls teilweise implementiert. Version 10 bringt weitere spannende Neuerungen wie CSS-Farbverläufe, mehrere Möglichkeiten für flexible Lay-outs wie das Multi-column Layout, Grid Layout und das Flexible Box Lay-out. Transitions, Animations und 3D Transforms sind ebenfalls mit dabei.

Recht mager sieht es mit den IE-Vorversionen aus. Im IE8 funktionie-ren nur die neu in CSS eingeführten Attributselektoren (siehe Kapitel 4, »Alle Macht den Selektoren«) und der Sibling Combinator (allgemeiner Folgeelementselektor) und außerdem vereinzelte Eigenschaften wie word-wrap (Kapitel 5, »Mehr Typografie – Webfonts, Textschatten und mehr«), overflow-x und overflow-y.

Zusammenfassend lässt sich sagen, dass alle aktuellen Browser eine überzeugende CSS3-Unterstützung bieten. Der IE9 beinhaltet zumindest einen Teil der attraktiven CSS3-Features. Ältere IEs hingegen sind noch nicht bei CSS3 angekommen. Aber natürlich ist das eine etwas verein-fachte Darstellung. Zu den Details – und die gibt es bei den einzelnen Implementierungen und Versionen – kommen wir bei der Behandlung der einzelnen Themen ausführlich.

Safari und Chrome

Opera

Internet Explorer

Fazit

15CSS3 und die aktuellen Browser

1.2.1 Verbreitung der Browser

Allgemeine Browserstatistiken sind nur bedingt aussagekräftig, weil es sehr große Unterschiede gibt je nach Region und Zielpublikum. Zudem kommen je nach grundlegenden Entscheidungen – z.B. abhängig von der Einbeziehung mobiler Browser – auch ganz unterschiedliche Ergebnisse heraus. Am besten ist es immer, wenn Sie in solchen Fragen die aktuellen Statistiken der Webseite heranziehen, um die es geht. Trotzdem hier ein paar Zahlen.

Die Webseite http://www.browser-statistik.de/ kommt beispielsweise im August 2013 für Deutschland zu folgendem Ergebnis – Firefox liegt vor Chrome und Safari, danach folgt der Internet Explorer.

Internet Explorer Firefox Chrome Safari Opera

August 2013 16,7 % 33,5 % 19,6 % 22,7 % 2,2 %

Interessant ist dann aber die Verteilung der Versionen. Wie teilen sich die 16,7 % auf die verschiedenen IEs auf? Laut Statistik kommen auf den IE10 42 %, IE9 auf 19 %, 24 % auf den IE8, 15 % auf den IE7. Die letzten Zah-len sind aber natürlich keine absoluten Zahlen, sondern erläutern, wie sich die 16,7 % auf einzelne IEs aufteilen.

Browserstatistiken

Tab. 1-1

Browserstatistik von

http://www.browser-statistik.de/

Abb. 1-2

Ein ähnliches Bild zeichnet

http://gs.statcounter.com/#browser-

DE-monthly-201205-201305 – auch hier

ist der Firefox vorne.

16 1 CSS3 heute

Bei den anderen Browsern sind die jeweils aktuellen die stärksten – was ja ein Vorteil ist, den Webentwickler von der Auto-Update-Funktion haben. Ausnahme ist hier Safari, da er enger verknüpft ist mit bestimmten Mac-OS- oder auch iOS-Versionen.

Schließlich spielt auch eine Rolle, wozu man die mobilen Geräte und die mobilen Browser rechnet. Bei http://gs.statcounter.com/#mobile_browser-DE-monthly-201205-201305 erhält man etwa beim Punkt »mobile Brow-ser« eine Übersicht über die mobilen Betriebssysteme. Diese jedoch sind nicht per se mit mobilen Browsern zu verwechseln: Auf einem Android-Gerät kann ich mir auch einen mobilen Firefox, einen mobilen Opera oder einen Chrome installieren. Klar ist auf jeden Fall, dass auf mobilen Gerä-ten Webkit-Browser derzeit vorherrschend sind, wenn sie auch nicht die einzigen sind. Aber Webkit-Browser unterscheiden sich auch voneinander – was Peter-Paul Koch deutlich gemacht hat.3

Welche Statistik Sie auch heranziehen, im Normalfall ist deutlich, dass die Nutzer von CSS3-fähigen Browsern in der Überzahl sind und immer mehr werden. Trotzdem sollte das nicht dazu verleiten, schicke ausgefal-lene Effekte einzusetzen, ohne zu testen, was passiert, wenn diese noch nicht unterstützt werden – so geschehen etwa auf der Webseite von Barack Obama, was Stephanie Rieger schön gezeigt hat.4 Hier funktionierte das Menü nur auf dem neuesten iPhone oder den neuesten Android-Geräten. Auf anderen Geräten war nicht einfach nur der Effekt nicht da, sondern das Menü nicht mal benutzbar. Besser ist es da, den Prinzipien des Progres-sive Enhancement zu folgen, d.h., eine funktionierende Basis zu erstellen, die durch bestimmte Features verbessert wird.

1.2.2 Herstellerspezifische Präfixe

Teile von CSS3 sind noch in der Entwicklung. Das bedeutet auch, dass sich einzelne Eigenschaften ändern können. Wie können Browser nun sol-che Eigenschaften implementieren? Was machen sie, wenn sich eine Eigen-schaft ändert? Das ist in zweierlei Hinsicht problematisch.

■ Verschiedene Versionen eines Browsers: Jede neue Browserversion muss, um eine allgemeine Akzeptanz zu erreichen, bis zu einem gewis-sen Grad abwärtskompatibel sein. Das heißt, eine Webseite, die in der älteren Version eines Browsers funktioniert hat, sollte auch noch in einer neueren funktionieren. Schwierig wird es, wenn eine Seite auf eine

3 http://www.quirksmode.org/webkit.html4 http://stephanierieger.com/a-plea-for-progressive-enhancement/

Browser auf mobilen Geräten

17CSS3 und die aktuellen Browser

Eigenschaft setzt, die sich jetzt geändert hat, und eine neue Version des Browsers die nun geänderte Version unterstützt.

■ Verschiedene Browser: Ebenfalls schwierig ist der folgende Fall: Brow-ser A hat die ältere Version einer Eigenschaft implementiert, Browser B implementiert die neue Version. Die Eigenschaft heißt aber gleich – und wird von den Browsern unterschiedlich implementiert.

Um dem Umstand Rechnung zu tragen, dass CSS3 sich in der Entwicklung befindet, implementieren Browser viele Eigenschaften probeweise mit einem entsprechenden Vorsatz, einem Präfix, das nur von den entsprechen-den Browsern gelesen wird.

Ein Beispiel: In CSS3 sind sogenannte Transformationen möglich, über die Sie Elemente drehen, skalieren oder verschieben können (Kapitel 8, »Transformationen«). Die Eigenschaft dafür heißt transform. Für Safari bis einschließlich Version 7 schreiben Sie diese Eigenschaft als -webkit-transform. -webkit- ist in diesem Fall das herstellerspezifische Präfix. -web-kit-transform wird im Prinzip nur von Webkit-basierten Browsern gelesen, von anderen Browsern ignoriert.5 Neben -webkit- gibt es weitere Präfixe für andere Browser.

Herstellerspezifisches Präfix Gültig für Browser

-moz- Gecko-basierte Browser wie Firefox

-o- Opera vor Version 15

-webkit- Safari, Google Chrome und andere Webkit-basierte Browser

-ms- Internet Explorer

Wenn man diese Eigenschaften einsetzt, sollte man sich allerdings darüber im Klaren sein, dass sie nicht unbegrenzt gültig sein werden: Spätestens in dem Moment, in dem das entsprechende Modul vom W3C verabschiedet wird, wird die jeweilige herstellerspezifische Eigenschaft durch die entspre-chende standardisierte Form ersetzt.

So hat man in älteren Firefox-Versionen die Transparenz von Elemen-ten über -moz-opacity definiert. -moz-opacity funktionierte aber nicht so, wie opacity heute in der Spezifikation definiert ist. Mit Firefox 0.9 wurde die offizielle Eigenschaft opacity eingeführt, die standardgemäß implemen-tiert ist. Parallel dazu existiert weiterhin -moz-opacity bis zu Firefox 3.5, der -moz-opacity nicht mehr unterstützt.

Daraus folgen zwei wichtige Regeln im Umgang mit den herstellerspezi-fischen Erweiterungen.

5 Das ist so gedacht. Allerdings hat Opera, da die für ihn benötigten herstellerspezifischen Angaben zu oft auf Webseiten vergessen wurden, begonnen, ebenfalls einen Teil der -webkit-Eigenschaften zu lesen (http://www.opera.com/docs/specs/presto2.12/css/alia-ses/).

Probeweise Implementierung durch

Browser

Tab. 1-2

Übersicht über die gängigen

herstellerspezifischen Präfixe

18 1 CSS3 heute

1. Wo die Eigenschaft relativ stabil ist, sollten Sie immer zusätzlich die offizielle Version verwenden.

2. Die offizielle Version sollten Sie zuletzt angeben. So ist sichergestellt, dass, falls ein Browser eine »proprietäre« und die offizielle Version unterstützt, die letzte genommen wird.

3. Wenn Sie in einem Spezialfall nur die herstellerspezifischen Varianten benutzen, weil die Eigenschaft noch nicht stabil und in keinem weite-ren Browser implementiert ist, sollten Sie von Zeit zu Zeit überprüfen, ob sich die Lage geändert hat und der Code modifiziert werden muss.

Durch die Varianten mit den herstellerspezifischen Präfixen vervielfacht sich teilweise der Code, den Sie schreiben müssen. Folgende fünf Zeilen sind notwendig, um ein Element um 30 Grad zu drehen, wenn das in so vielen Browsern wie möglich – auch älteren – funktionieren soll.

-webkit-transform: rotate(30deg); /* Safari, Chrome */

-moz-transform: rotate(30deg); /* FF < 16 */

-o-transform: rotate(30deg); /* Opera < 12.1 */

-ms-transform: rotate(30deg); /* IE9 */

transform: rotate(30deg); /* FF 16++, Opera 12.1, IE10 */

In anderen Fällen sind hingegen weniger Varianten notwendig – so haben Internet Explorer 9 und Opera 10.5 direkt border-radius eingeführt ohne eine entsprechende testweise Implementierung. Die Eigenschaften -ms-bor-der-radius oder -o-border-radius hat es nie gegeben.

Sinn und Zweck der herstellerspezifischen Präfixe

An sich haben diese herstellerspezifischen Präfixe einen großen Vorteil, wie es Eric Meyer in einem Artikel bei »A List Apart« erläutert: Dadurch ersparen Sie sich mühselige Hacks.6 Gibt es Unterschiede bei der Darstel-lung von Eigenschaften, kann ich für den Browser X die Eigenschaft ent-sprechend angeben – und Browser Y liest es nicht.

Die herstellerspezifischen Präfixe ermöglichen es auch Browserherstel-lern, sich dem Standard anzupassen. In diesem Fall können sie die Stan-dardeigenschaft ohne Präfix implementieren und die ursprüngliche, nicht korrekte Version mit Präfix noch eine Weile aus Gründen der Abwärts-kompatibilität beibehalten. Gleichzeitig erinnern einen die Präfixe daran, dass es sich um noch nicht verabschiedete Eigenschaften handelt und des-wegen Änderungen möglich sind.

Leider haben sich die herstellerspezifischen Präfixe in der Praxis nicht bewährt. Sie haben nämlich zu unschönen Situationen geführt: Auf vielen Web-seiten wurden einfach nur die Webkit-Präfixe verwendet und die der anderen Browser ignoriert. Oft wurde auch die offizielle Eigenschaft gar nicht

6 http://www.alistapart.com/articles/prefix-or-posthack/

Offizielle Angabe immer zuletzt

schreiben

19CSS3 und die aktuellen Browser

angegeben. Dadurch konnte es passieren, dass ein Firefox oder Opera ein CSS3-Feature nicht darstellt, obwohl er es eigentlich könnte. Was macht man in dieser Situation?

Opera ist den Weg der Anpassung gegangen und hat zuerst einen Teil der Webkit-Eigenschaften als Alias implementiert. Und seit Version 15 werkelt in Opera sogar ein Webkit-basierter Browser.

Firefox hat mit Version 16 eine große Depräfigierungsaktion gestartet, d.h. implementiert mit Version 16 in vielen Fällen die offizielle Eigenschaft ohne Präfix. Und häufig werden experimentelle Features nicht in ihrer Prä-fixversion eingeführt, sondern sind hinter einer Browsereinstellung verbor-gen. Wenn man als Entwickler das Feature testen möchte, muss man die Unterstützung im Browser erst aktivieren. So war das etwa vor Firefox 22 bei der Flexbox-Darstellung (Kapitel 11, »Layouten mit CSS3«).

Welche herstellerspezifischen Präfixe anwenden? Oder: Die Hölle, das sind die Präfixe der anderen Browser

Welche Präfixe soll man jetzt aber konkret einsetzen? Hierfür gibt es unter-schiedliche Strategien.

Sie können natürlich beschließen, diese Frage zu ignorieren, und immer so viele Präfixe wie nur möglich angeben. Das sieht man auch häufig beim Code, der von Präprozessoren erzeugt wird. Unschön ist daran, dass der Code aufgebläht wird. Trotzdem ist diese Strategie besser, als beispiels-weise nur -webkit-Präfixe zu verwenden und die Standardeigenschaft wegzulassen.

Die andere Herangehensweise sieht so aus, dass Sie abwägen und je nach Situation entscheiden. Dabei sind drei Faktoren relevant:

1. Erst einmal müssen Sie wissen, bei welchen Eigenschaften welche präfigierten Versionen existieren und welche Browserversionen diese unterstützen. Diese Informationen finden Sie natürlich hier im Buch für die aktuellen Versionen. Ausführlicher und ständig aktualisiert sind diese Angaben bei http://caniuse.com. Dort steht beispielsweise die Information, dass Firefox seit Version 4 das Präfix bei border-radius nicht mehr braucht.

2. Jetzt müssen Sie sich entscheiden, inwieweit die älteren Versionen der Browser für Sie noch relevant sind. Am besten ziehen Sie hierfür die Sta-tistiken Ihrer Seite heran.

3. Außerdem ist die Frage wichtig, was passiert, wenn das Feature nicht funktioniert. Wenn beispielsweise Inhalte ohne das Feature nicht benutzbar/lesbar sind, ist es wichtig, sich darum zu kümmern, auch wenn es sich nur um einen kleinen Benutzerkreis handelt. Meist liegt die Lösung aber dann nicht im Ergänzen der Deklarationen mit den herstellerspezifischen Präfixen, sondern in der Implementierung einer allgemeinen guten Fallbackstrategie. Nehmen wir den etwas absurden

Präfixe auswählen

20 1 CSS3 heute

Fall an, dass Inhalte der Webseite ohne border-radius nicht funktions-fähig sind. Dann sind wahrscheinlich die Nutzer des IE8 ein größeres Problem, und allein mit der Ergänzung der Angaben mit –moz-border-radius für die Benutzer von Firefox vor Version 4 haben Sie nicht viel gewonnen.

Eine allgemeine gute Fallbackstrategie ist wichtiger, als eine ältere Browservor-

version durch ein Präfix zu bedienen.

Wie gesagt: Bei den Überlegungen, welche Versionen Sie berücksichtigen – eine Frage, die natürlich über die reine Frage nach den herstellerspezifi-schen Präfixen hinausgeht –, sollten Sie am besten von einer aktuellen Sta-tistik der eigenen Nutzer ausgehen. Ansonsten würde ich Ihnen Folgendes empfehlen – und es ist auch der Weg, den ich im Buch gewählt habe.

■ Beim Internet Explorer geht man häufig bis Version 8 zurück. Das heißt, es muss alles auf dem IE8 noch funktionieren – das heißt aber nicht, dass es dort auch genauso aussehen muss wie im IE10. Je weiter die Zeit voranschreitet, desto akzeptabler werden auch Abweichungen in der Darstellung beim IE8.

■ Bei Firefox und Opera würde ich normalerweise nicht mehrere Browserversionen zurückgehen. Diese Browser haben eine gute Auto-Update-Funktion, und darauf würde ich vertrauen. Für dieses Buch und die Listings habe ich entschieden, dass ich die präfigierten Angaben, die vor dem Firefox 16 benötigt werden, nicht mehr angebe. Sie fin-den aber in den Tabellen zur Browserkompatibilität bei der Vorstel-lung der Features immer angegeben, wenn der Firefox vorher noch ein Präfix gebraucht hat. Zurück bis zum Firefox 3.6 gehe ich nicht in der Angabe der Browserkompatibilität – falls Sie solche historisch anmu-tenden Informationen einmal benötigen, schauen Sie bei http://caniuse.com nach.

■ Die Frage, inwieweit man ältere Webkit-Browser berücksichtigen möchte, ist schwieriger zu beantworten. Chrome hat ein Auto-Update, bei dem ich davon ausgehen würde, dass es funktioniert. Anders sieht es aber aus mit den ganzen auf vielen Smartphones vorinstallierten Web-kit-Derivaten. Häufig können die Nutzer hier nicht selbst entscheiden, wann sie updaten oder nicht … sondern müssen darauf warten, dass ihnen ihr Hersteller ein Update zur Verfügung stellt – wenn er es denn überhaupt tut. Deswegen würde ich ältere Webkit-Browser noch wei-terhin berücksichtigen und so handhabe ich es auch hier im Buch und bei den Listings – ich berücksichtige noch den Safari 5, allerdings nicht mehr den Safari 4.

Welche Browser berücksichtigen?

Spezialfall Webkit auf Smartphones

und Co.