TIL: Sass-Kommentare in komprimierten CSS-Dateien

Die Regel

Während eines Projektes macht man so einige Kommentare in seine Sass-Dateien um vielleicht ungewöhnlichen Code, der evtl. nur für eine Rückwärtskompatibilität (Hallo IE…) nötig ist, zu erläutern. Im Build-Prozess werden diese meist bei einer Komprimierung der finalen CSS-Datei entfernt (Sass-Parameter –style compressed), was durchaus auch gewollt ist um dem Website-Nutzer nur den Code übertragen zu müssen, der für die Darstellung der Website nötig ist.

Die Ausnahme

Manchmal ist es aber doch von Nöten, dass ein Kommentar in der finalen CSS-Datei erhalten bleiben muss. Heutzutage ist dies gerade oft bei Web-Fonts erforderlich, da der Kommentar über der @font-face Definition die Lizenz festlegt und nicht entfernt werden darf.

Die Lösung

Schreibt man in seiner Sass-Datei nun am Anfang statt des gewöhnlichen Block-Kommentars /* einfach /*! bleibt der gesamte Code-Block unkomprimiert erhalten, währnd der Rest der CSS-Datei von Kommentaren und unnötigen Leerzeichen befreit ist.

/*
Dieser Kommentar wird entfernt fuer die Ausgabe.
*/


/*!
Dieser Kommentar hingegen wird genau so in der CSS-Datei auftauchen.
*/

HTML5 template-Tag

Template-Technologien für’s Backend gibt es zuhauf (Smarty, Template-Toolkit,…), aber seit dem im Frontend immer mehr dynamisch an Code erstellt wird hat sich auch dort die Notwendigkeit für Template-Techniken ergeben. Da die Frontend-Script-Sprache Nummer 1 nun mal JavaScript ist lag es nahe, dass auch die Templates in JavaScript verwaltet werden, so entstanden beispielsweise Template-Systeme wie „mustache.js„.
Als Frontend-Entwickler möchte man allerdings eigentlich nicht Scripts und Markup vermischen. Haben wir es die letzten Jahre nun endlich hinbekommen, dass Markup, Scripts und Layout sauber getrennt sind würden Frontend-Templates in JavaScript das ganze wieder zunichte machen. Doch das Allzweck-Buzzword HTML5 hat da etwas in der Pipeline: das <template>-Tag. HTML5 template-Tag weiterlesen

Shadow DOM Grundlagen

Das Shadow DOM ist eine versteckte Hierarchie innerhalb des DOMs der Hauptseite. Den Shadow DOM kennen wir eigentlich schon länger. Am offensichtlichsten zeigt er sich beim <iframe>, denn jedem ist klar, dass sich innerhalb dieses Tags das DOM der eingebeteten Seite befindet. Etwas weniger offensichtlich zeigt er sich beim <video>-Tag. man baut nur das <video>-Tag ein, jedoch gibt es automatisch auch Elemente für die Navigation, die ja auch Objekte sein müssen. Diese Tags sind alle vordefiniert und können nur verwendet werden, jedoch lässt sich ein Shadow DOM mit Hilfe von JavaScript auch selbst erzeugen und nutzen. (Prefixes derzeit noch nötig) Shadow DOM Grundlagen weiterlesen

Accessibility: Kontrast-Verhältnis Text- zu Hintergrundfarbe

Auf ihrer Website hat die Frontend-Entwicklerin Lea Verou heute ein neues Tool von sich vorgestellt: Contrast Ratio mit dem es einfach möglich ist das Kontrast-Verhältnis gegen die WCAG 2.0 Richtlinien zu testen. Accessibility: Kontrast-Verhältnis Text- zu Hintergrundfarbe weiterlesen

CSS Caching

Idealerweise sollte man das Caching selbst in die Hand nehmen, um die Kontrolle zu haben und es nicht einfach dem Browser überlassen. Es sollte aber auch immer die Möglichkeit geben einen Cache ungültig zu machen, sodass die Datei vor Ablauf des Caches neu geladen wird. Man stelle sich vor, das Caching für eine CSS-Datei ist auf einen Tag festgelegt, dann muss aber schnell ein Bugfix raus, jedoch bekommen die meisten User den Bugfix erst nach 24 Stunden mit, weil ihr Browser die CSS-Datei solange noch aus dem Cache lädt.

Cache einrichten

Um die Kontrolle zu übernehmen, arbeiten wir mit einer .htaccess-Datei, in der wir das Apache-Modul mod_expires verwenden. Der folgende Code aktiviert für alle Dateien vom Typ text/css ein Caching von 3 Tagen.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 3 days"
</IfModule>

Beim ersten Abruf des CSS bekommt der Browser den ETag der Datei mit und speichert sich diesen. Bei der nächsten Anfrage des Browsers sendet dieser also erstmal lediglich seinen lokal gespeicherten ETag an den Server, dieser vergleicht den empfangenen ETag mit dem der vorliegenden Datei. Weicht dieser ab, wird die Datei mit dem Statuscode 200/OK gesendet. Hat sich der ETag nicht geändert, sendet der Server nur den Statuscode 304/Not Modified zurück und der Browser greift auf die im Cache liegende Datei zurück.

Caching ohne Cache-Control

Das klingt etwas verwirrend. Hat man keine Möglichkeit das Caching mittels ETag zu steuern, ist man erstmal etwas hilflos. Der Browser entscheidet selbst, ob und wie lange er die Datei aus dem Cache liest, bevor er sie wieder erneut vom Server anfragt. Prinzipiell ist sowas nicht kritisch, doch gerade wenn man einen Bugfix online stellt, der möglichst schnell bei jedem User ankommen soll oder wenn ein neues Feature bereitgestellt wird, wo sich die Templates geändert haben und das alte CSS nicht mehr zu den neuen Templates passt, da würde man gerne forcieren, dass der Browser des Users die Datei neu lädt.

Nun, der Hash-Wert einer Datei ändert sich immer, wenn sich auch die Datei ändert – das können wir uns zu Nutze mache.

Statt:
<link rel="stylesheet" type="text/css" href="standard.css" />

Binden wir folgendes ein (am Beispiel mittels PHP):
<link rel="stylesheet" type="text/css" href="standard-<?php echo hash_file("md5", "standard.css"); ?>.css" />

Die Funktion hash_file() ist seit PHP 5.1.2 verfügbar. Was bewirkt das nun? Auf dem Server liegt nach wie vor nur die Datei standard.css, jedoch lassen wir den Browser glauben, dass wir z.B. die Datei
standard-bfa0b1fd14b9d8e0a6dcf4bd0ab623e1.css
einbinden. Der Hash-Wert einer Datei bleibt gleich, solange sich an der Datei nichts ändert. Jedoch wird nur eine Kleinigkeit am Inhalt der Datei geändert, so ändert sich auch automatisch der Hash-Wert. Die Hexadezimal-Zahl nach dem Bindestrich ändert sich also jedes Mal, wenn wir eine Änderung an standard.css vornehmen. Da der Browser glaubt, dass eine komplett andere Datei eingebunden wird, wird die Datei definitiv neu vom Server geladen.

So weit so gut, jedoch liegt ja auf dem Server aber immer nur die standard.css-Datei und keine Datei, die den langen Zahlencode im Dateinamen beinhaltet. Damit die Datei trotzdem gefunden wird bemühen wir das Apache-Modul mod_rewrite. Folgenden Code schreiben wir in die .htaccess-Datei:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} ^(.*)-([a-f0-9]+)\.css$
RewriteRule ^(.*)-([a-z0-9]+)\.css$ $1.css

Die erste Zeile schaltet nur die RewriteEngine ein. In der zweiten Zeile wird die Bedingung definiert: Sie lautet, dass der Dateiname mit einer beliebigen Zeichenkette beginnt, dann folgt ein Bindestrich, anschließend eine Zeichenkette, die aus 0-9 und a-f besteht und zum Schluss endet der Dateiname auf .css. Die dritte Zeile ist nun die eigentliche Rewrite Regel: Der Teil des Dateinamens vor dem Bindestrich wird  genommen und serverintern wird eine Datei aufgerufen, die so lautet und auf .css endet.

Bei dieser Methode ist natürlich auch weiterhin direkt standard.css abrufbar, denn darauf passt die Rewrite-Bedingung nicht.

CSS variabel machen

SCSS (Sassy CSS) oder Sass (Syntactically Awesome Stylesheet) ist eine Sprache, die auf CSS aufsetzt und versucht es dynamisch zu machen und bessere Syntax zu verwenden. Dabei gibt es noch eine Unterscheidung zwischen SCSS und Sass – jedes gültige CSS-Dokument ist auch ein gültiges SCSS-Dokument, Sass hingegen verwendet eine veränderte Syntax, vor allem fallen die geschweiften Klammern und das Semikolon weg. Die Hierarchie innerhalb des Dokuments wird durch strikte Einrückung und Zeilenumbrüche gewahrt. Doch fangen wir vorne an. CSS variabel machen weiterlesen

Tabellen scrollbar machen

Eine Tabelle ist gerade in Layouts, die in der Breite begrenzt sind, manchmal problematisch. Leicht zerschießt einem diese mal das Layout, weil sie breiter als der Content-Bereich ist. Hat diese Tabelle dann auch noch in der Vertikalen Kopfbereiche, bringt meist ein umgebendes div-Element, das mit overflow: auto; ausgezeichnet ist, nichts. Doch es gibt eine Lösung dafür. Tabellen scrollbar machen weiterlesen