CSS3 - Der neue Standard im Web

Überblick und Hintergründe von CSS3 Ähnlich wie HTML5 hat CSS3 eine bewegte Geschichte hinter sich - so ist CSS3 nicht etwa die dritte Ausfertigung des CSS-Standards, sondern die vierte. Des weiteren zeigen viele Tendenzen in modernem CSS eindeutig in die Vergangenheit und vieles ist gar nicht so neu, wie es den Anschein hat. CSS3-Selektoren Heutiges HTML-Markup ist häufig von sogenannter „Classitis“ geplagt, also einer Vielzahl von Klassen, die einfach nur als Hooks für das Design dienen. Classitis verletzt die Trennung von Markup und Design und macht die Wartung von Webseiten unnötig schwer. Die Lösung für dieses Problem sind die neuen CSS3-Selektoren, die ganz neue Möglichkeiten für die gezielte Ansprache von DOMElementen bieten. Transformationen Auch mit CSS3 besteht Webdesign im wesentlichen aus lauter kleinen Boxen, doch dank Transformationen lassen sich diese Boxen erstmals transformieren. Neben 2D-Transformationen (verschieben, verzerren, rotieren) öffnet sich für CSS-Autoren in modernen Browsern auch die dritte Dimension. Boxen und Rahmen Abgerundete Ecken von Boxen sind das Vorzeige-Feature von CSS3, allerdings bei weitem nicht das einzige, was CSS in Zukunft für die Gestaltung von Boxen und Rahmen bereit hält - auch skalierbare Hintergründe, Sprite-Borders und vieles mehr stehen auf dem Programm. Farben und Farbverläufe Neben einer handvoll neuer Farbmodelle führt CSS3 auch Farbverläufe ein. Dieses in jedem Fall nützliche, aber auf den ersten Blick etwas unspektakuläre Feature bietet mehr als man meinen möchte, denn neben einfachen Farbübergängen kann man aus CSS3-Farbverläufen auch komplexe Texturen zaubern. Schrifteinbettung und -gestaltung Schrifteinbettung mit @font-face wird oft zu CSS3 gezählt, ob wohl die Technologie eigentlich steinalt ist und selbst im Internet Explorer 6 funktioniert. Ungeachtet dessen gibt es allerlei Fußangeln, die bei der Einbettung zu beachten sind und CSS3 bringt für die Schriftgestaltung durchaus auch eine oder andere wirklich neue Feature mit. Effekte und Animationen Animationen werden heutzutage meist per jQuery und andere JavaScript-Bibliotheken umgesetzt. Da dies langsame JavaScript-Engines und das noch langsamere DOM nutzt, sind diese Animationen langsam und ineffizient - ganz anders als die einfachen und vor allem sehr schnellen CSS3- Animationen und -Transitionen. CSS3-Tools Als wäre CSS3 an sich nicht komplex genug, verkomplizieren Vendor-Prefixes, alte Browser und die Notwendigkeit von kreativen Hacks die Umsetzung von Webdesigns zunehmend. Abhilfe können hier nur die richtigen Tools schaffen, die vom einfachen, webbasierten Code-Generator über JavaScript bis hin zum CSS-Compiler reichen. Media Queries und Responsive Design CSS3 und vor allem HTML5 werden wahre Wunderdinge für die mobile Webentwicklung nachgesagt und Media Queries halten dieses Versprechen. Mit nur wenigen Zeilen CSS-Code lassen sich Regeln ganz gezielt je nach Art und Formfaktor des Ausgabegeräts anwenden. Wichtig ist dies für responsive design, polyvalentes Webdesign, das Nomal- Tablet- und Handy-Layout auf einmal ist. CSS3-Layout Heutiges Webseiten-Layout - egal ob es Tabellen, Floats, oder andere Techniken einsetzt - besteht nur aus Notbehelfen. Echte Layout-Techniken werden nämlich erstmals mit CSS3 eingeführt. Egal ob Mehrspaltigkeit oder Grid-Layout - am Ende fragt man sich, wie man je ohne CSS3-Layouts arbeiten konnte. Ausblick Obwohl manche Browser bis heute CSS3 nicht voll unterstützen, ist bereits CSS4 in Arbeit. Erste Spezifikationen für CSS4-Selektoren, Variablen werden bereits geschrieben und auch jenseits der W3C-Gremen tut sich einiges. Präprozessoren verwandeln CSS in ein reines Compiler-Ziel und die stetig wachsende Komplexität wird auch den Beruf der Webdesigner und -entwickler verändern.