CSS über den HTTP-Header ausspielen

Keywords: #css #http

Jeder kennt das Problem: Man hat stundenlang an einem Stylesheet auf dem Staging-Server rumgebastelt, will es nun auf den Live-Server kopieren und die Änderung ist nicht sichtbar. Die Fehlersuche beginnt. Man prüft den Cache. Vom Browser. Vom Server. Ist man überhaupt auf dem richtigen Server? Hat der Upload geklappt? Und so weiter. Eric Meyer hat das ganze Dilemma 2009 treffend beschrieben und auch eine Lösung mitgeliefert, von der ich noch nicht gehört habe:

Nutze doch einfach die HTTP-Header um deine Staging- und Live-Umgebung eindeutig voneinander zu unterscheiden. Der Link-Parameter im HTTP-Header nämlich auch die Angabe von Style-Sheet-Dateien. Und das sieht dann so aus:

Header add Link "</staging.css>;rel=stylesheet;type=text/css;media=all"

In nginx kann man das folgendermaßen im Server-Block implementieren:

add_header Link "</wp-content/themes/nickyreinert/style.header.css>;rel=stylesheet;type=text/css;media=all";

Wer Apache nutzt, setzt den “CSS-Header” folgendermaßen:

Header add Link "</wp-content/themes/nickyreinert/style.header.css>;rel=stylesheet;type=text/css;media=all"

Natürlich habe ich die Spielerei gleich bei mir eingebaut:

CSS-Datei im HTTP-Header ausgeliefert

Damit lässt sich grundsätzlich auch das Stylesheet deines Wordpress-Themes ausliefern: Da WordPress aber die style.css nutzt, um Theme-Informationen zu verarbeiten, musst du auf dieses kleine Feature dann verzichten. Außerdem wird CSS im Link-Header nicht von jedem Browser unterstützt.