Keiner weiß, wie viele Entwickler schon aus dem Fenster gesprungen sind, weil sie „mal eben schnell“ alle Vorkommnisse eines Grautons und dessen Abstufungen leicht ins bläuliche Färben sollten. CSS wird zwar um viele Features erweitert, doch die Auzeichnungssprache an sich hat sich seit 1998 kaum geändert. Features wie Variablen sucht man vergebens, was einem bleibt ist viel doppelte Arbeit.
Doch bevor nun alle Entwicklungsabteilungen ins Erdgeschoß verlegt werden, möchte ich den Ausweg aus der misere Vorstellen: SASS.
*.sass Dateien sind spezielle Stylesheets, die über einen Compiler einfach in CSS umwandelt werden. Man kann so Variablen, verschachtelte Definitionen, Funktionen und vieles mehr in sein Stylesheet einbauen – der Compiler erstellt daraus dann eine valide CSS-Datei.
Und das beste: Wer CSS kann, muss kaum Neues lernen. Eigentlich kann man damit sofort produktiv loslegen.
Nehmen wir mal ein einfaches Stylesheet:
div.header {
background-color: #ababab; /*dunkelgrauer Rand*/
border: 1px solid #dedede; /*grauer Rand*/
}Mit SASS würde dies wie folgt aussehen:
$theme_color1: rgb(222,222,222) /*Variable mit Farbwert*/
div.header
background-color: darken($theme_color1, 20%) /*Rand, dank Funktion 20% dunkler als $theme_color*/
border: $theme_color1 /*grauer Rand*/
Der Vorteil ist sofort ersichtlich: Muss man bei einem neuen Grauton das CSS an zwei Stellen ändern und sogar den neuen Farbwert des Randes per Hand ausrechen, reicht bei der .sass Datei lediglich eine Änderung in der Variable $theme_color – den Rest erledigt SASS.
Das CSS erstellt man einfach via
sass --watch %sass-quelle%:%ziel-datei% Durch den –watch Parameter erkennt SASS, wenn sich Änderungen an der *.sass Datei ergeben haben und aktualisiert das CSS. So kann man direkt am SASS Entwurf arbeiten und sieht das Ergebnis sofort.
Natürlich ist das nur ein kleiner Einblick in die Möglichkeiten. Am besten einfach mal auf die Homepage gehen, ausprobieren und begeistert sein.
Zusammenfassung der Serie über High Performance Websites.
Dieser vorerst finale Teil befasst sich mit den restlichen Serverseitigen Themen Redirects und Keep-Alive. Zusätzlich wird auf DNS und das DNS Cacheverhalten des Browsers eingegangen.
Ein weiterer wichtiger Punkt bei der Optimierung ist das Thema Kompression, hierbei werden sämtliche noch komprimierbaren Inhalte (HTML, CSS, JavaScript, …) geschrumpft und so in einer verkleinerten Version ausgeliefert.
Nachdem im vorherigen Teil die HTTP-Requests auf ein minimum reduziert wurden ist es nun an der Zeit den Client das zwischenspeichern von Inhalten auf eine besitmmte Zeit hin zu erlauben.
