Meine Vorgehensweise ist gar nicht so weit von der in dem Text beschriebenen entfernt. Nur die Benamung realisiert er konsequenter. Mal schauen, ob ich das demnächst in meinen Workflow integriere. Für den Workflow im Team sind kleine Modul-CSS-Dateien auch hilfreich. Dadurch können sich die Teammitglieder auf einzelne Aufgaben konzentrieren. Man sollte dann zu einem festgelegten Zeitpunkt – bspw. immer zur vollen Stunde – alle Dateien in das hoffentlich genutzte Versionierungssystem spielen. Danach haben alle Teammitglieder wieder einen einheitlichen Stand.

Auch für Profis empfiehlt es sich, den Test zu machen und danach die knappen Erklärungen der Lösung zu lesen. Ich finde den Quiz sehr lehrreich. Mal schauen, dass ich ihn in meine nächsten Schulungen einbinde.

Ich denke, es ist mir in 98 Slides gelungen, dies zu kommunizieren. Da das PDF zu gross für meinen Slideshare-Account ist, habe ich diesmal Speakerdeck genutzt. Auch ein empfehlenswerter Dienst.

Dass die Wahl auf Sass fiel hatte seine Gründe. Es ist in meinen Augen das bekannteste System mit einer großen Community. Zudem hat Less einen Konstruktionsfehler: es wurde anfangs im Browser gerendert. Es soll wohl auch eine serverseitige Version geben, doch dieser Konstruktionsfehler hat mich gegen das System eingenommen. Die gleichen Vorbehalte habe ich gegen prefixfree von Lea Verou. Ich möchte nicht, dass Tools, die ich für meine Bequemlichkeit nutze, auf dem Rücken meines Endproduktes, also der Nutzer ausgeführt werden. Jedes CSS-Rendering mittels JavaScript zieht die Performance der Seite unnötig herunter und macht die Seite ohne Javascript unbenutzbar. Die Syntax von Sass und Less unterscheidet sich nicht allzusehr.

Da ich viel mit CSS3 arbeite, lag für mich die Nutzung von Compass nahe. Denn dieses Zusatzframework bringt eine Masse mixins für CSS3 mit. Die Praxis zeigte mir schnell, dass diese mixins für meine Ansprüche zu schlecht waren. Ich arbeite nun also mit Compass, ohne ein einziges mixin davon zu nutzen. Ich fand die Ausgabe von Compass schlecht, weil bspw. bei der Ausgabe von IE-Filtern meist die -ms-filter-Variante fehlt. Zudem bekommen die Elemente kein hasLayout mittels zoom:1 zugewiesen, was die Filter evtl. unsichtbar macht.

Bislang habe ich im Wesentlichen Farbvariablen genutzt, habe Elemente verschachtelt und mixins für border-radius (ich will noch ganz alte Browser mitnehmen), gradients und box-shadow genutzt. Ausserdem habe ich mir selber ein mixin geschrieben, mit dem ich über :before oder :after Pfeile erzeugen kann.

Für meine Bedürfnisse reichen ein paar CSS3-mixins, die ich in den unendlichen Weiten von github gefunden habe. Ich habe sie mir mittlerweile bearbeitet und in zwei mixins gesplittet. Die eine Version ist für die alten IE, die andere für moderne Browser. Ich muss so nur irgendwann im Zuge der Bearbeitung die CSS3-Regeln für eine IE-Version herausziehen. Da die Namen der mixins identisch bleiben, erzeugen sie dann im IE-spezifischen CSS genau den passenden Code – und nur den.

Leider gibt es bislang noch keine Möglichkeit, diesen Vorgang aus dem SCSS-File zu automatisieren. Aber wenn ich den dazugehörigen Thread in github richtig verstanden habe, wird zumindest darüber nachgedacht, das Aufsplitten von Regeln aus einer Datei in zwei Zieldateien entweder in Compass oder in Sass zu integrieren. Ich bin gespannt. Aber auch ohne diese weitere Erleichterung ist mein Workflow mittlerweile schon besser geworden. Meine Arbeitdatei ist übersichtlicher und ich kann viel einfacher mit Farben hantieren. Ich werde mit der Zeit sicher noch ein paar weitere Highlights entdecken. Aber der erste Schritt ist getan und ich möchte das Tool nicht mehr missen. Irgendwann teste ich auch die Erzeugung von Sprites aus. Das kann Compass nämlich auch. Ich werde mir auch mal die Compass-recipes anschauen. Das scheint mir eine interessante Sammlung zu sein.

Wer wie ich im Laufe eines Projektes entscheidet, Compass zu verwenden, der hat ein Problem. Sowohl die Doku als auch alle Einführungen, als auch das im Entstehen befindliche Buch bei Manning erklären immer nur, wie man in einem leeren Verzeichnis mittels Compass eine Grundstruktur erzeugt. Das war aber gar nicht mein Wunsch. Nach längerem Suchen bin ich auf folgende Zeile gestossen, die man im Terminal im betreffenden Verzeichnis ausführen muss:

Ich bin mal gespannt, welche Details mir mit der Zeit noch so auffallen. Aktuell splitte ich mein CSS und meine mixins in viele unterschiedliche Dateien, am Ende kommt eine Datei bzw. noch eine weitere IE-Datei heraus. Während der Entwicklung kann ich hingegen in kleinen, übersichtlichen Dateien arbeiten. Auch meine Variablen habe ich ausgelagert. So werden sie von der normalen und der IE-spezifischen Datei erfasst und verarbeitet.

Der Adventskalender der Webkrauts macht mit einem Artikel von Ansgar Hein auf. Ansgar betrachtet “Wireframes für Startseiten“.

Der englischsprachige Kalender “24ways” macht mit einem Artikel über eine Eigenschaft von @font-face auf. Drew McLellan beschreibt, wie man mittels der Eigenschaft “unicode-range” den Einsatz einer Schrift auf wenige Zeichen (oder nur eines) beschränken kann. Eine interessante Idee mit diversen Pferdefüssen.

Sven Wolfermann beschreibt im ersten Türchen des “CSS3-Adventskalenders” eine Lösung, Rahmenlinien mit Verläufen zu versehen.

Auch Mozilla macht bei den Adventskalendern neuerdings mit. Hier werden empfehlenswerte Links spendiert. Bei sitepoint ist man hingegen geschäftstüchtig und verkauft drei ausgesuchte ebooks zu einem gnadenlos günstigen Preis. Ich habe mir gleich das ebook über mobile Webentwicklung gekauft.

Ich warte nur noch drauf, dass sich das erste Türchen des “Performance Calendars” öffnet. Habe ich einen Adventskalender übersehen? Ergänzungen sind in den Kommentaren willkommen. Die Kalender sollten aber etwas mit Webentwicklung zu tun haben.

Am 3. Dezember ist wieder “International Open Data Hackathon“. An diesem Tag soll mit offenen Daten experimentiert werden. In Deutschland sind Veranstaltungen in Berlin und Frankfurt gemeldet. Für die Frankfurter Veranstaltung gibt es ein Doodle.

Welche Schriften kombiniere ich mit welchen anderen Schriften am besten, wenn ich meine Schriftarten in CSS zuweise? Die Antwort formt den sogenannten “CSS-Font-Stack”. Auf der passenden URL gibt es eine umfangreiche Liste der “Stacks”, die man sich direkt in die Zwischenablage kopieren lassen kann. Schade finde ich nur, dass die Kontraste der Seite schlecht lesbar sind.

Im Accessibility Blog von Yahoo! gibt es eine interessante Präsentation über Fehler, die im Bezug auf die Zugänglichkeit von Webseiten immer wieder gemacht werden. Unter der von Slideshare eingebundenen Präsentation gibt es eine umfangreiche Niederschrift. Die Aufzeichnung des Vortrags befindet sich dann im YUI-Theater.