Cheat Sheet

CSS3 - Quick Reference Guide

21.11.2012 von Carola Heine

Mehrspaltige Layouts, Integration von eigenen Fonts und Farbverläufe sind nur einige Optionen, die mit CSS3 umgesetzt werden können. Unsere Übersicht soll Sie bei der täglichen Arbeit mit CSS3 unterstützen.

ca. 2:40 Min

Ratgeber

internet, webdesign, css3, cheat sheet, layouts, fonts — Unsere Übersicht hilft bei der täglichen Arbeit mit CSS3.

Wer sich bereits beruflich oder aus Interesse mit Cascading Style Sheets beschäftigt, sollte nun nicht länger damit zögern, sich ein Grundlagenwissen über die spannenden neuen Funktionen von CSS3 anzueignen. Auch wenn der zukünftige Standard sich noch in der Entwicklung befindet, so rüsten jetzt doch immer mehr Browser stets weitere CSS3-Features nach.

Zusätzlich zu den bewährten Eigenschaften von CSS 2.1 und den damit bereits verbundenen Gestaltungsmöglichkeiten kann man dafür Sorge tragen, dass die Anwender mit modernen Browsern in den Genuss der neuen Möglichkeiten kommen, die anderen aber trotzdem eine funktionale Website sehen, nur eben ohne CSS3-Effekte. Die Veränderungen sind den Aufwand wert: CSS3 ergänzt die Vorgängerversion um viele Funktionen.

Noch mehr CSS 3

Bildschirmfüllende Hintergrundbilder, mehrere Hintergründe in Kombination und beliebiger Anordnung, Farbverläufe, abgerundete Ecken und Schatten oder transparente Seitenbereiche und flexible Elemente, deren Größe der User per Drag-und-Drop selbst bestimmen kann: CSS3 kann mehrspaltigen Inhalt, flexible Layouts und Animationen. Es ist ganz sicher kein Zufall, dass abgerundete Ecken und Schlagschatten für Kästen und Texte zu den beliebtesten neuen Features gehören: Sie sind viele Jahre überfällig. Statt quälend aufwändiger Lösungen mit Hintergrundgrafiken und kunstvoll arrangierten DIVs einfach die CSS3-Angaben für "border radius" erzeugen und schon können Sie eine oder alle Ecken beliebig rund gestalten. Mit einer Box oder einem Button, die nur durch CSS3-Code erzeugt wurden, können Sie nun beispielsweise einen box shadow ergänzen und den runden Ecken auch noch einen Schatten verpassen. Schatten für Texte ersparen das Hantieren mit GIFs für Schriftzüge mit Drop-Shadow, die seit anderthalb Jahrzehnten nie völlig aus der Mode gekommen sind, so oft sie auch totgesagt wurden.

Mehr Funktionen

Noch eine spannende CSS3-Funktion sind Gradients, die ganz ohne die Hilfe eines Grafikprogramms beliebige Seitenbereiche, Content oder Buttons mit Farbverläufen ausstatten. Das bedeutet nicht nur weniger Aufwand sowie schlankeren und eleganteren Quellcode, sondern verringert auch die Ladezeiten entscheidend, da keine Hintergrundgrafiken mitgeladen werden müssen (Gradient Generator).

Der beliebte Magazin-Look im Stil einer mehrspaltigen Publikation mit typischen Fonts lässt sich durch die "Multiple Columns" und den "Font-Face"-Befehl realisieren. Mehrspaltige Erscheinungsbilder für Texte wirken aufwändig, bringen Abwechslung und lassen sich mit CSS3 endlich komfortabel und schnell umsetzen.

Live-Test

Einfach ausprobieren können Sie viele der neuen CSS3-Effekte unter css3please.com an einer lebenden Site: Der Cross-Browser CSS3 Rule Generator ist so aufgebaut, dass Sie die Werte im angezeigten CSS-File editieren können, wobei die entsprechenden anderen Werte dann automatisch passend ergänzt werden. Die fertigen Experimente lassen sich übrigens problemlos kopieren und in eigene Stylesheets einfügen.

Quick Reference Guide

Unser Cheat Sheet ist als Arbeitshilfe gedacht. Mit einer Übersicht neuer Befehle und typischer CSS3-Funktionen soll es Ihnen die anspruchsvolle Einarbeitung in die CSS3-Funktionen erleichtern. Wir freuen uns über Feedback, damit die nächsten Arbeitsblätter noch nützlicher werden.

Workarounds einsetzen - ja oder nein?

Ressourcen:

Das Developer-Herz lacht, wenn die populärsten Browser einen Entwicklungsstand erreicht haben, der aufwändige Zusätze für einzelne CSS3-Befehle überflüssig macht. Doch sollte man diese Erweiterungen nicht einfach weglassen, nur weil sie von aktuellen Browser-Versionen nicht mehr benötigt werden.

Erstens verrät nur ein regelmäßiger prüfender Blick in die Site-Statistik, ob die eigene Zielgruppe überhaupt mit der jeweils neuesten Version surft, und zweitens gibt es immer wieder User, die gar keinen Einfluss darauf haben, wann ihr Browser aktualisiert wird, zum Beispiel die typischen Bürosurfer.

Ein schöner beziehungsweise valider Code ist also nicht alles: In erster Linie sollten immer alle Anwender komfortabel an alle Inhalte können.