Schweizer Messer für CSS

Stylesheets sind eigentlich eine einfache Geschichte. Sie geben einem die Möglichkeit das Design von der eigentlichen Struktur klar zu trennen. Und das dient wiederum der Wartbarkeit der Webseite. Doch die Sache wird schnell kompliziert: Präzise Designs erfordern eine genau Ausrichtung in unterschiedlichen Browsern, deren Interpretation sich oft am Standard vorbei bewegt (Wir sind aber auf dem richtigen Weg). Es werden Browserweichen geschrieben, Normen gemischt, und wilde Floating-Knobeleien ausgedacht daß es im Endeffekt dann doch so aussieht, wie man es ursprünglich wollte – Text- / Customreader, Schriftarten und barrierefreies Layout mal außer Acht gelassen.
Man müsste also den ganzen Tag Definitionen wälzen, Browser Engines debuggen und sich mit Abgesandten des W3 Konsortiums prügeln um all dessen Herr zu werden. Doch Zeitersparnis und Entspannung bringt keine dieser Möglichkeiten mit sich. Mittlerweile manifestieren sich allerdings einige freie CSS Frameworks um genau dieser Lage Herr zu werden oder einfach nur einen Baukasten zum schnellen Layout zu liefern.
Als Basis hierfür dienen sogenannte Reset CSS welche die vordefinierte Formatierung des Browsers zurück setzen um neu zu beginnen (Außen- und Innenabstände, Einrückungen, …). Hier gibt es die großen Klassiker z.B. von Eric Meyer oder auch YUI. Leider bietet YUI keine Unterstützung für HTML5 dafür allerdings ein grundsolides Basis CSS (Damit man nach dem Resetten nicht doch wieder alles formatieren muss ;-)) und Styles zur typografischen Normalisierung von Schriftgrößen um proportional angemessene Schriftvergrößerung zu gewährleisten. Mit YUI können alle diese CSS Techniken im Kontext angewandt werden – Also nur gültig für alle Elemente unterhalb eines bestimmten.
Einige weitere Frameworks setzen hier noch eins drauf und nehmen einem Strukturarbeit bereits ab. BluePrint bietet neben Reset, Base und Typografie Unterstützung für Spaltenorganisation. Perfekt gefloatete Teilbereiche einer Seite können bequem per Klassen konfiguriert werden (Mit dem Nachteil nicht mehr zu wissen was eigentlich im Hintergrund passiert). Reine Tabellen-Hilfen wie 960 Grid System warten mit einer kompletten Planungshilfe für Webseiten auf. So z.B. Sketchbooks und Vorlagen für Inkscape, Gimp oder Illustrator oder Plugins zur Erstellung von Templates aus Photoshop heraus.
Als letztes in meiner Liste sticht HTML5 Boilerplate als Komplettlösung hervor. Neben oben erwähnter CSS Normalisierung erhält man nebst HTML Stub auch HTML5 Korrekturen für ältere Browser, jQuery zum schnellen Prototypen, Build Scripte zum Komprimieren bis hin zur auskonfigurierten .htaccess für unseren Web-Indianer um korrekte Header zu liefern oder entsprechenden Inhalt zu komprimieren.
Je nachdem wie viel man sich abnehmen lassen möchte hat man die Qual der Wahl auf welche Frameworks man setzt. Alle samt eignen sich sehr gut um Anregungen und Fixes für seine täglichen Web-Probleme zu holen. Auch für Dummies, Mockups und Prototypes sind diese Hilfen Ideal. Produktiv muss man sich allerdings entscheiden und sollte genau abwägen was man eigentlich braucht – Denn Geschmäcker sind bekanntlich verschieden…

HTML5 Boilerplate – GridEasy – blueprint – BlueTrip – 906 Grid System – YUI3 – Reset CSS

Marius Hein

Head of IT Service Management

---

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert und viele Jahre in der Softwareentwicklung gearbeitet. Mittlerweile ist er Herr über die interne IT und als Leiter von ITSM zuständig für die technische Schnittmenge der Abteilungen der NETWAYS Gruppe. Wenn er nicht gerade IPv6 IPSec Tunnel bohrt, sitzt er daheim am Schlagzeug und treibt seine Nachbarn in den Wahnsinn.

Lies mehr von Marius und triff unser Team