CSS3 E-Book

Florence Maurice

• Herausgeber: dpunkt
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2013

Seitenzahl: 336

Beschreibung

Kein Webdesigner kommt heute mehr an CSS3 vorbei. Dieses Buch bietet Ihnen profundes Wissen zu den wichtigsten Features und zu fortgeschrittenen CSS3-Techniken samt einer Fülle von Tricks für die Praxis. Was Sie in diesem Buch lernen: •Grafische Effekte wie runde Ecken, Transparenzen und Schatten einsetzen •Webfonts richtig verwenden •Farbverläufe erstellen •Elemente im 3D-Raum transformieren •Inhalte mit Transitions und Animations bewegen •Responsive Layouts für Smartphones, Tablets und Desktops umsetzen •Von den neuen Layoutmodulen profitieren Anhand zahlreicher Beispiele zeigt Ihnen Florence Maurice diese Techniken und gibt Ihnen dabei auch Hinweise für die richtige Strategie im Umgang mit älteren Browsern. Ein besonderer Schwerpunkt liegt auf der Erstellung performanter und mobiler Webseiten. Neu in der 2. Auflage sind unter anderem die Themen: •CSS3 für mobile Geräte •Icon-Fonts •CSS3-Buttons •Bildüberblendeffekte •Animierte Seitenübergänge •Off-Canvas-Darstellung •Die neue Flexbox-Syntax •Ausklappnavigation fürs Responsive Webdesign •Einführung in LESS/Sass •Zusammenspiel mit JavaScript bei Transitions und Animations •... und vieles mehr Das Buch richtet sich an fortgeschrittene Webdesigner und setzt fundierte Kenntnisse im klassischen CSS 2.1 sowie Erfahrung in der Gestaltung von Weblayouts voraus. Wer noch nicht mit CSS3 gearbeitet hat, findet hier einen anschaulichen Einstieg. Wer bereits das eine oder andere CSS3-Feature einsetzt, aber keinen systematischen Überblick hat, erfährt hier die Zusammenhänge und lernt nützliche Tricks und weitergehende Möglichkeiten.

Leseprobe

Florence Maurice gibt Trainings, Inhouseschulungen und individuelle 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.

CSS3

Die neuen Features fürfortgeschrittene Webdesigner

2., erweiterte und aktualisierte Auflage

Florence Maurice

Florence [email protected]

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 NationalbibliothekDie Deutsche Nationalbibliothek verzeichnet diese Publikation in der DeutschenNationalbibliografie; detaillierte bibliografische Daten sind im Internet überhttp://dnb.d-nb.de abrufbar.

ISBNBuch 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ürWebdesigner« 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 dieschriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar.

Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendungin elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligenFirmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutzunterliegen.

Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfaltkontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemachtwerden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

5 4 3 2 1 0

Inhaltsverzeichnis

Vorwort

1.1 Besser mit CSS3

1.2 Was in diesem Buch steht

1.3 Was nicht in diesem Buch steht

1.4 Was Sie sonst noch wissen sollten

1 CSS3 heute

1.1 CSS3 – Stand der Dinge

1.2 CSS3 und die aktuellen Browser

Verbreitung der Browser

Herstellerspezifische Präfixe

1.3 CSS3 heute – was geht?

1.4 Leben entsteht durch den kleinen Unterschied

1.5 Vorteile durch CSS3

1.6 CSS3 für mobile Geräte

1.7 CSS3 heute – ganz pragmatisch

2 Umgang mit unterschiedlichen Browsern

2.1 Wer kann’s?

2.2 Unschlagbar: Modernizr

Auftritt Modernizr

JavaScript-Schnittstelle von Modernizr

Modernizr einsetzen oder nicht

2.3 Nachbessern mit JavaScript

2.4 Eintauchen in proprietäre Untiefen: Filter

filter und -ms-filter und der IE8

Filter zum Nachrüsten von CSS3-Features

Filter-Fazit

2.5 Noch mehr Proprietäres: htc-Dateien am Beispiel

htc-Dateien – Grundprinzip

Die Rundum-sorglos-Lösung CSS3 PIE

2.6 Jedem IE sein Süppchen – Conditional Comments

Conditional Comments – Basics

Conditional Comments und Performance

Conditional Comments ohne externe Stylesheets

2.7 Ausblick

3 Transparenzen

3.1 opacity – weniger ist mehr Transparenz

Das Grundprinzip von opacity

opacity in den heutigen Browsern

3.2 Farben notieren: rgb() und hsl()

RGB und Co

HSL

3.3 Am Ende steht a: rgba() und hsla()

Grundprinzip von hsla() und rgba()

Nicht nur als Hintergrund

rgba() und hsla() am Beispiel: Bildbeschriftung

Strategien für ältere Browser

3.4 Steckbrief

4 Alle Macht den Selektoren

4.1 Attributselektoren

Das gab es bereits in CSS 2.1

Neu in CSS 3 – Attributselektoren für Teilübereinstimmungen

4.2 Strukturelle Pseudoklassen

Verwandtschaftsbeziehungen

Abzählen mit :nth-child()

Der Soundsovielte seiner Art

Erst-, Letztgeborene und Einzelkind

Überblick über die strukturellen Pseudoklassen zur Auswahl bestimmter Kindelemente

4.3 Weitere Pseudoklassen – :empty, :not() und :root

4.4 :target – das Ziel vor Augen

Klassisches Beispiel für :target

Fortgeschrittene Einsatzbereiche von :target

4.5 Pseudoklassen für Formularelemente

Zustand der Formularelemente

Pseudoklassen für die Validierung mit HTML5

4.6 Pseudoklassen am Beispiel: Zebratabelle

Nachbessern für ältere IEs

Komfortabler nachbessern mit Selectivizr

4.7 Die liebe Verwandtschaft: allgemeiner Geschwisterkombinator & Co.

4.8 :checked und Geschwisterkombinator zum Filtern von Inhalten

4.9 Ausblick: Selektoren der Zukunft

4.10 Steckbrief

5 Mehr Typografie – Webfonts, Textschatten und mehr

5.1 Webfonts – herunterladbare Schriften

Schriftformate

Die Sache mit den Lizenzen

Schriften konvertieren

Die richtige browserübergreifende @font-face-Syntax

Dienste nutzen

Google Fonts nutzen

Das Webfont Kit von Font Squirrel

FOUT vermeiden

Umgang mit Schriftauszeichnungen

Webfonts, aber richtig

5.2 Icon-Fonts

5.3 OpenType-Features

5.4 Textschatten

Schatteneffekte

Textschatten in den aktuellen Browsern

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

5.6 Steckbrief

6 Rahmen, Schatten und Hintergrundbilder

6.1 border-radius: abgerundete Ecken

Die Anatomie von border-radius

Asymmetrische Rundungen

Kreise und Ellipsen

Allerlei Verkürzungen

Browsergeschichten und Steckbrief

Browserunterstützung für border-radius

6.2 background-image: altbekannte Eigenschaft in neuem Gewand

Zeichenreihenfolge

Parallax-Effekt

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

6.4 background-clip – Reichweite des Hintergrundbilds

Schöner Einsatzbereich: transparente Rahmen

Browsergeschichten und Steckbrief

6.5 background-origin – Startpunkt des Hintergrundbildes

6.6 border-image: Bilder für Rahmen

Rahmenbild definieren

Browsergeschichten und Steckbrief

6.7 background-size: Hintergrundbilder skalieren

Das Browserfenster füllen

Browsergeschichten und Steckbrief

6.8 Angenehme Schatten: box-shadow

Schattensteuerung

Buttons

Glühendes Textfeld

Browsergeschichten und Steckbrief

7 Farbverläufe

7.1 Geschichte der CSS3-Farbverläufe

7.2 Lineare Farbverläufe

Mehr Optionen für Farben

Unterschied zwischen box-shadow und linear-gradient()

Richtung des Farbverlaufs bestimmen

Radiale Farbverläufe

Form des Farbverlaufs

Position festlegen

Größe bestimmen

7.3 Sich wiederholende Farbverläufe

7.4 Alte Webkit-Syntax

7.5 Muster über Farbverläufe erzeugen

7.6 Browsergeschichten und Steckbrief

Syntaxvarianten

Nachbessern in älteren Browsern (= IEs)

Steckbrief

8 Transformationen

8.1 2D-Transformationen

rotate() – Drehen

Mittelpunkt für die Drehung festlegen

Größenveränderung über scale()

Verschieben mit translate()

Transformationen kombinieren

Gerader Text auf gedrehtem Element

Schicke Schatten – zwei Nichts erzeugt, gedreht und in den Hintergrund gesetzt

Browsergeschichten und Steckbrief

8.2 3D-Transformationen

Position des Betrachters

Kindelemente bei Transformationen

Sichtbarkeit der Rückseite

Mehr als Drehungen

3D-Transformationen einsetzen

Browsergeschichten und Steckbrief

9 Transitions und Animations

9.1 Transition

Einführungsbeispiel

transition-property: Auswahl der Eigenschaft

Zeitangaben: transition-duration und transition-delay

Ablauf des Übergangs

Animierte Bildübergänge

Animierten Seitenwechsel implementieren

Browsergeschichten und Steckbrief

9.2 Animationen

Animation definieren und zuweisen

Animationen genauer steuern

Glüheffekt bei Button

Unendlicher Slider

Weitere Effekte

Browserkompatibilität und Steckbrief

10 Responsive Webdesign

10.1 Gestatten: responsive

Media Queries

Metaangabe für Smartphones

Aus fest mach flüssig

Ein Desktop-First-Responsive Layout

Nachbessern in älteren Browsern

Mobile-First-Herangehensweise

10.2 Bilder im Responsive Webdesign

Bilder flexibilisieren

Bilder für hochauflösende Displays: Retina & Co.

10.3 Weiterführende Techniken

Navigationen im Responsive Webdesign

Off Canvas

Layoutänderungen – die Wahl der Breakpoints

10.4 Fazit Responsive Webdesign

10.5 Steckbrief Media Queries

11 Layouten mit CSS3

11.1 Mehrspaltendarstellung

Anzahl der Spalten

Breite der Spalten

Trennlinie

Spalten verbinden

Mehr Steuerung bei der Aufteilung

Spaltenumbruch vermeiden

Browsergeschichten und Steckbrief

11.2 Flexbox

Flexbox-Basics

Finetuning: Ausdehnung

Leerraumverteilung

Praktisch: horizontal und vertikal zentrieren

Reihenfolge der Flexitems

Flexible Breiten

Alles fürs Responsive Webdesign

Steckbrief

Browsergeschichten

Crossbrowser-Lösungen

11.3 Noch mehr Layoutmodule

12 Neue Einheiten und mehr

12.1 Freie Wahl des Boxmodells und CSS lernt rechnen

box-sizing – Wahl des Boxmodells

CSS-Rechner

Browsergeschichten und Steckbrief

12.2 Neue Einheiten braucht das Land: rem und vw

rem wie em, nur einfacher

Passend zur Viewport-Größe

Browsergeschichte und Steckbrief

13 Anhang

13.1 Einführung in LESS/Sass

Erste Schritte mit LESS

LESS-Konzepte

Und Sass & Compass & Co.

Präprozessor einsetzen oder nicht?

13.2 Quellen im Netz

13.3 Browserunterstützung der vorgestellten Features

Index

Vorwort

CSS3 ist allgegenwärtig.

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. Responsive Webdesign bedeutet flexible Webseiten, die sich an die Gegebenheiten des Ausgabemediums anpassen. Layouts, die bei viel Platz mehrspaltig sind, können etwa auf einem Smartphone problemlos einspaltig angezeigt werden.

Mobil ohne CSS3 geht nicht.

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 performanter. 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 vorfinden. Kurz gefasst: Wenn Sie moderne Webseiten für Smartphones, Desktops und Tablets oder auch Web-Apps für mobile Geräte erstellen wollen, dann führt kein Weg an CSS3 vorbei.

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 flexible Box erstellen wollten, so benötigten Sie hierfür vier Hintergrundbilder 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 realisieren und damit auch besser zu warten. Bei eventuellen Änderungen müssen keine Bilder neu erstellt werden, sondern man braucht nur die CSSDatei 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?

Vorteile von CSS3

In CSS 2.1 müssen Sie für manche Effekte komplizierte Tricks anwenden, 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 Hintergrundbildern; 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:

CSS3 ist nicht immer einfach.

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

Zweitens, weil die Browser die Spezifikation, die sich in manchen Punkten 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 älteren 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

CSS3 heute

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.

Umgehen mit unterschiedlichen Browsern

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 Techniken wie Filter.

Transparenzen

Transparenzen sind ein wichtiges Element von Webdesigns. Mit CSS3 gibt es gleich zwei Möglichkeiten für Transparenzen – zum einen die Eigenschaft 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«.

Selektoren

Auf den ersten Blick wirken Selektoren wenig sexy. Aber nicht ganz ohne Grund hat Eric Meyer die CSS3-Selektoren als eines der attraktivsten Features 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 (mitunter auch fälschlich als »CSS4« betitelt).

Typografie

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 Kapitel 5, »Mehr Typografie – Webfonts, Textschatten und mehr«.

Rahmen und Hintergründe

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 bieten: von mehrfachen und skalierbaren Hintergrundbildern über Schatteneffekte bis hin zu Bildern für Rahmen.

Farbverläufe

CSS3 ersetzt oft den Aufruf des Bildbearbeitungsprogramms, etwa wenn sich runde Ecken direkt durch die entsprechende Eigenschaft erstellen lassen. Weniger Bilder bedeuten bessere Performance und einfachere Wartung. 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.

Transformationen

Wer Elemente drehen oder verzerren will, musste früher Bilder einsetzen. 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 Suchmaschinen auslesbar und bleiben auch für Screenreader nutzbar – ganz im Unterschied 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 insbesondere durch die 3D Transforms.

Transitions und Animations

Ü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 Transitions werden in Kapitel 9, »Transitions und Animations«, behandelt. Ein weiteres Thema des Kapitels sind die CSS-Animationen. Sie ermöglichen 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. Praktisch sehen wir uns das anhand eines animierten Seitenübergangs und einiger Bildüberblendeffekte an.

Media Queries für Responsive Webdesign

Die Bildschirme werden immer größer und gleichzeitig immer kleiner – die Unterschiede zwischen den einzelnen Geräten, mit denen Webseiten betrachtet werden, sind so groß wie nie, und das wird sich in absehbarer Zeit auch nicht ändern. Eine Antwort auf dieses Problem sind Media Queries – passende CSS-Angaben je nach den Eigenschaften des Ausgabegerä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, »Responsive 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.

Flexible Layouts

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 wirklich 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«.

Hilfreiche Details

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.

LESS und Sass

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 CSSWorkflow 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ßerdem führt der Anhang die wichtigsten Links für weitere Informationen auf und fasst die vorgestellten Features samt ihrer Browserunterstützung zusammen.

Browserunterstützung

Die Browserunterstützung ist ein heikler Punkt, wenn es um CSS3 geht: Nicht alles ist gleichermaßen praktikabel, bei manchem kann man es verschmerzen, 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.

Im Vergleich zu meinem CSS3-Buch von 2011 ...

Aktualisierungen und Ergänzungen

...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, Flexbox 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

CSS-Kenntnisse werden vorausgesetzt.

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

Alles Wichtige zum neuen Standard

Das Buch ist hingegen das Richtige für Sie, wenn Sie das Wichtigste zu CSS3 erfahren wollen: Vielleicht haben Sie bisher noch wenig CSS3 eingesetzt, 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 Website zum Buch: css3-features.de.

Die Listings zum Buch können Sie auf der Website zum Buch unter http://www.css3-features.de herunterladen, dort finden Sie auch Aktualisierungen 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 treffen. 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 Kurzem eingeführt wurde.

Apropos Browser: Jede neue Browserversion brüstet sich unter anderem mit einer verbesserten CSS3-Unterstützung. Damit Sie alles selbst austesten 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!

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

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

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 Standardisierungsprozess abläuft und wie weit die unterschiedlichen Komponenten von CSS3 entwickelt sind. Außerdem beschäftigen wir uns mit den unterschiedlichen Browsern sowie den herstellerspezifischen Präfixen und wie Sie damit richtig umgehen.

Der zweite Teil des Kapitels liefert Ihnen Hinweise, die man berücksichtigen 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 einzelne 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.

Wege zur Standardisierung

Hinter jedem Modul sind der derzeitige Status und der folgende Status angegeben. Alle Module müssen zu ihrer Verabschiedung einen bestimmten 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 Übersetzung passend, die von der offiziellen Seite des W3C stammt.

Es ist wichtig zu wissen, in welchem Zustand sich ein Modul befindet: Denn die Wahrscheinlichkeit für Änderungen ist höher, je weiter unten sich ein Modul im Standardisierungsprozess befindet. Bei Working Drafts sind Änderungen folglich wahrscheinlicher als bei einer Proposed Recommendation.

Abb. 1-1 Die Seite des W3C der CSS-Arbeitsgruppe

Keine Recommendation ohne Implementierung

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 Working Group SHOULD be able to demonstrate two interoperable implementations of each feature«.1 Das bedeutet, dass nur etwas eine Recommendation wird, was sich auch als praxistauglich erwiesen hat.

Der eben vorgestellte Weg der Standardisierung ist außerdem keine Einbahnstraß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 heruntergestuft wurde. Am 12.4.2011 wurde CSS 2.1 wieder in den Zustand einer Candidate Recommendation erhoben.

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

Recommendations

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 beinhaltet neben den aus CSS 2.1 bekannten Selektoren spannende Features 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öglichkeiten 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, »Responsive Webdesign«

).

Candidate Recommendations

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 Hintergrundbilder«

). 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 September 2012 Candidate Recommendation, und damit ist die jetzt definierte Syntax recht stabil.

Das

Values and Units

-Modul führt neue Einheiten ein und ermöglicht neue Arten der Flexibilisierung. Auch dieses Modul ist bereits eine Candidate Recommendation (

Kapitel 12, »Neue Einheiten und mehr«

).

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

Wichtige Module als Working Draft

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 normalerweise inzwischen ignorieren können.

Ebenfalls spannend ist das

Transforms

-Modul, das Eigenschaften zum Drehen und Skalieren von Elementen im 2D- und 3D-Raum bereitstellt und das alle aktuellen Browser unterstützen, der IE9 zumindest die 2D-Transformationen (

Kapitel 8, »Transformationen«

). Transformationen 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, »Transitions und Animations«

) – sind derzeit ein Working Draft, aber inzwischen 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ürlich 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ützung aus. Hier ein paar Details und wichtige Meilensteine.

Firefox

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 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 vielen Fällen das browserspezifische Präfix -moz- ersparen kann.

Safari und Chrome

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 Unterschiede 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 nutzen. Es ist jedoch keine eigene Browser-Neuentwicklung, sondern ein Fork von Webkit, sodass sich für Webentwickler nicht zu viel ändern sollte.

Opera

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 verbesserte Unterstützung für das »Backgrounds and Borders«-Modul liefert. 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 Eigenschaften 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.

Internet Explorer

Der Internet Explorer (IE) implementiert in Version 9 viele CSS3-Features: 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 Layouts wie das Multi-column Layout, Grid Layout und das Flexible Box Layout. Transitions, Animations und 3D Transforms sind ebenfalls mit dabei.

Recht mager sieht es mit den IE-Vorversionen aus. Im IE8 funktionieren 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.

Fazit

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 vereinfachte Darstellung. Zu den Details – und die gibt es bei den einzelnen Implementierungen und Versionen – kommen wir bei der Behandlung der einzelnen Themen ausführlich.

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.

Browserstatistiken

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%

Tab. 1-1 Browserstatistik von http://www.browser-statistik.de/

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 Zahlen sind aber natürlich keine absoluten Zahlen, sondern erläutern, wie sich die 16,7 % auf einzelne IEs aufteilen.

Abb. 1-2 Ein ähnliches Bild zeichnet http://gs.statcounter.com/#browserDE-monthly-201205-201305 – auch hier ist der Firefox vorne.

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 MacOS- oder auch iOS-Versionen.

Browser auf mobilen Geräten

Schließlich spielt auch eine Rolle, wozu man die mobilen Geräte und die mobilen Browser rechnet. Bei http://gs.statcounter.com/#mobile_browserDE-monthly-201205-201305 erhält man etwa beim Punkt »mobile Browser« 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 ausgefallene 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 Progressive 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 solche Eigenschaften implementieren? Was machen sie, wenn sich eine Eigenschaft ändert? Das ist in zweierlei Hinsicht problematisch.

Verschiedene Versionen eines Browsers: Jede neue Browserversion muss, um eine allgemeine Akzeptanz zu erreichen, bis zu einem gewissen 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 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: Browser 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.

Probeweise Implementierung durch Browser

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 entsprechenden 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. -webkit-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

Tab. 1-2 Übersicht über die gängigen herstellerspezifischen Präfixe

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 entsprechende standardisierte Form ersetzt.

So hat man in älteren Firefox-Versionen die Transparenz von Elementen ü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äß implementiert 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 herstellerspezifischen Erweiterungen.

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

Offizielle Angabe immer zuletzt schreiben

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 weiteren 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-border-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 entsprechend angeben – und Browser Y liest es nicht.

Die herstellerspezifischen Präfixe ermöglichen es auch Browserherstellern, 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ärtskompatibilität beibehalten. Gleichzeitig erinnern einen die Präfixe daran, dass es sich um noch nicht verabschiedete Eigenschaften handelt und deswegen Ä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 Webseiten wurden einfach nur die Webkit-Präfixe verwendet und die der anderen Browser ignoriert. Oft wurde auch die offizielle Eigenschaft gar nicht 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 verborgen. 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 unterschiedliche 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 beispielsweise nur -webkit-Präfixe zu verwenden und die Standardeigenschaft wegzulassen.

Präfixe auswählen

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 Statistiken 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 Fall an, dass Inhalte der Webseite ohne border-radius nicht funktionsfä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.

Welche Browser berücksichtigen?

Wie gesagt: Bei den Überlegungen, welche Versionen Sie berücksichtigen – eine Frage, die natürlich über die reine Frage nach den herstellerspezifischen Präfixen hinausgeht –, sollten Sie am besten von einer aktuellen Statistik 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 finden 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 anmutenden Informationen einmal benötigen, schauen Sie bei

http://caniuse.com

nach.

Spezialfall Webkit auf Smartphones und Co.

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 Webkit-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 weiterhin 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.

Das führt dazu, dass in vielen Fällen die Angabe mit dem -webkit-Präfix neben der offiziellen genügt.

Helfen lassen bei den Präfixen

Unabhängig davon, welche Strategie Sie wählen und welche Browserversionen Sie unterstützen, Sie müssen immer wieder Code doppeln. Das ist mühsam und fehleranfällig. Glücklicherweise können Sie sich helfen lassen. Es gibt etwa eine Reihe von Onlinetools, bei denen Sie die unpräfigierte Variante hineinkopieren und dann automatisch die Variante mit allen Präfixen erhalten.7

Abb. 1-3 Das passende Logo des Projekts -prefix-free von Lea Verou

Eine weitere sehr schöne Lösung ist gerade für die Entwicklung praktisch, nämlich -prefix-free8 von Lea Verou. Es ist eine JavaScript-Datei, die Sie nach dem Herunterladen im Kopfbereich Ihres Dokuments einbinden, und das war es schon.

<script src="prefixfree.js"></script>

Jetzt werden bei allen CSS3-Eigenschaften die benötigten Präfixe ergänzt.

<!DOCTYPE html><html><head>  <meta charset="UTF-8" />  <title>transforms</title><script src="prefixfree.js"></script><style>/* Stylesheet mit mehreren unpräfigierten CSS3-Eigenschaften – Ausschnitt