Der IE8 kommt auf Media Queries leider nicht so wirklich klar. Daher müssen CSS-Hacks her: http://www.akademy.co.uk/blog-tips/2010/03/css-style-ie6-media-hack/

… ausbaufähig …

Auf die YUI bin ich gekommen, da ich mit Yahoo die Liebe zu Symfony teile. Mit Symfony steht die Logik zwar in Rekordzeit, aber die Interaktion mit dem User ist letztlich das was zählt. Logisch das ein riesiges Unternehmen wie Yahoo nicht nur bestrebt ist gute Userinterfaces zu entwickeln, sondern diese Entwicklungsarbeit auch nicht jedes Mal aufs neue zu investiert. Das Ergebnis ist die Yahoo User Interface Library. Eine JavaScript Bibliothek die als Grundlage der Yahoo Dienste für eine stabile Basis sorgt. Das Yahoo diese dann auch noch zur freien Verfügung stellt, beschert Ihnen freie Entwickler, viel Feedback und mir zur Zeit ein Grund zur Euphorie.

Ein wesentlicher Punkt zu meiner Entscheidung: Es handelt sich um eine überaus gut dokumentierte Bibliothek! Eine technisch dokumentierte API ist selbstverständlich. Aber, zahlreiche Beispiele zu jedem Teil der Bibliothek; Spickzettel, so genannte Cheat Sheets, zum Schnellüberblick und ganze Video-Presentationen, sind, wie ich finde, vorbildhaft und machen einfach Lust sich weiter in die Tiefen zu wagen.

In diesem Artikel geht es nun also um einen speziellen Teil des Frameworks. Nämlich nicht den großen Teil JavaScript, sondern den kleinen, aber nicht minder mächtigen CSS-Teil. Dieser unterteilt sich in drei Teile. Die da wären…

CSS Reset

HTML/XHML ist eine reine Auszeichnungssprache. Wer davon ausgeht, dass HTML dafür sorgt, dass das strong-Tag den umschlossenen Text mit fetter Schrift darstellt, liegt falsch. Als Auszeichnungssprache sorgt HTML nur für die logische Unterteilung des Textes. “Schuld” daran, das ein strong-Tag in aller Regel Text fett hervorhebt, ein i-Tag kursiven Text erzeugt oder h1-h6 typografisch voneinander zu unterscheiden sind, ist der Browser.

Jeder gängige Browser hat ein eigenes Browserstylesheet. Es kommt automatisch auf jeder Seite zum Einsatz. Die Browserhersteller haben nur leider verschiedene Vorstellungen davon, wie eine Seite auszusehen hat. So kommt es, dass ein H1-Tag in dem einen Browser so, in dem anderen Browser so dargestellt wird. Nun müsste man also hingehen und viele Tags, hier sind bei weitem nicht alle genannt, einzeln überschreiben, um ihr einheitliches Erscheinen zu erreichen. Das ist allerdings sehr fehleranfällig. Schnell ist ein Parameter vergessen und die Ausgabe zwischen den Browsern weicht wieder ab.

Ein logisches vorgehen, keine Yahoo-Erfindung, ist das resetten aller Browsersheets. Was bleibt, ist reines HTML, ohne jegliche Textformatierung. Wie die Elemente dann letztlich aussehen, liegt in der eigenen Hand. Der Browser pfuscht nicht mehr rein.

Genau dieses Resetten übernimmt das reset.css Sheet in der YUI. Diese Datei wird auf jeder Seite an erster Stelle eingebunden. Ergebnis ist eine über alle Browser hinweg stabile Ausgabe. Die Tags sehen erstmal nach nichts aus, darum muss man sich selbst kümmern, aber auf Dauer spart dieses Vorgehen unheimlich viele Nerven.

CSS Fonts

Hier wird ein weiteres Problem abgedeckt. Über die verschiedenen Browsern hinweg  werden Schriften sehr unterschiedlich behandelt. Yahoo hat auch hier etwas verglichen und mit dem ausgelieferten CSS eine Lösung  entwickelt, um die Schriften möglichst konstant auszugeben. Schriften sollten dann nur noch in Prozent angegeben werden. Dadurch wird eine hohe Barrierefreiheit gewährleistet. Die Liste um zwischen den bekannten Pixelwerten und dem Prozentwert umzurechnen findet sich hier in einem der wunderbaren Cheat Sheets. Gewöhnungsbedürftig, aber es funktioniert.

CSS Grids

Hier beginnt die eigentliche “Magie”. Die Grids sind dafür da Seiten in Spalten und Blöcke zu unterteilen. Um all die Abstände und Floats kümmert sich das mitgelieferte CSS. Vor allem aber muss man sich keinen Gedanken mehr über das Verhalten gängiger und auch weniger gängiger Browser machen. Das CSS ist klein, hat es aber in sich. Wenn man es einmal begriffen hat, wie ein Dokument aufgebaut wird, hat man eine Seite wie von Geisterhand aufgebaut.

Nun ja, Yahoo “bewirbt” das Ganze mit more than 1,000 CSS-driven wireframes in a 4KB file was ein vollkommen irrelevanter Wert ist. Tatsache ist aber, dass damit, wenn es um verschachtelte Spaltensturkturen geht, unzählige Layouts zum Kinderspiel werden.

Gebremste Begeisterung und der Drang zur Mehrspaltigkeit

Ein gewisse Ernüchterung tritt ein, wenn man die Sache dann tatsächlich in der Praxis anwenden will. Sofern nicht der unwahrscheinliche Fall eintritt, dass man sowohl Designer als auch Entwickler ist, stößt man nämlich doch sehr schnell an Grenzen oder macht sich durch rigide Vorgaben sehr unbeliebt beim Designer.

Erste gute Erfahrungen habe ich mit eigenen Prototypen gemacht, hier war ja auch kein Design vorgegeben. Bei diesem Blog, wo das Design vorgegeben war, wurde es dann aber schon tricky. Reset und Fonts: Wunderbar. Aber die Grids ergeben ohne Anpassungen keinen Sinn. Design sind nun mal oft eher künstlicher Natur und keine Mathematik. Abstände also nicht immer logisch. Optisch aber die bessere Wahl. Also doch wieder Handarbeit…

Besonders “gefährlich”: Man möchte alles mehrspaltig machen. Da kämpfe ich noch etwas mit mir. mehrspaltiger Text ergibt doch nur in den wenigsten Fällen wirklich Sinn… aber es geht doch jetzt so schön einfach!

Zu guter Letzt, was eigentlich gemein ist, wenn man sich tatsächlich den vorhergehenden Quatsch durchgelesen hat: Wem die englische Sprache nicht weiter Schwierigkeiten macht, sollte sich einfach folgendes Video zu Gemüte führen. Hier wird in einer knappen Schulstunde jeder Bestandteil erklärt und an Beispielen verdeutlicht:

Nate Koechley: “The YUI CSS Foundation” @ Yahoo! Video