Wieso Browser externe CSS Dateien ignoriert ..

Zum wiederholten Mal tappe ich nun in diese Falle. Ich lagere dynamisch erzeugten in eine HTML-Seite zwischen style>-Tags eingebetteten CSS-Code in ein separates PHP-Skript aus. Verweise korrekt via link-Tag auf dieses Skript. Die Datei wird laut Firebug gefunden und der CSS-Code eingebunden, aber die enthaltenen Formatierungen werden ignoriert.

Die Ursache ist letztendlich simpel. Der Verweis auf die externe CSS-Datei hat folgende Form:

<link rel="stylesheet" href="style.php" type="text/css" />

Entscheidend ist, dass im Verweis über das Attribut type der zu erwartende MIME-Type des gelinkten Dokuments übergeben wird, hier also text/css, siehe W3C Html-Spezifikation.

Der Content-Type wird im HTTP-Header übertragen und ist für PHP-Skripte meist mit text/html vorbelegt. Rufe ich den HTTP-Header der gelinkten CSS-Datei ab, dies ist per Browser über den Dienst HTTP::HEAD möglich, bestätigt sich dieser Verdacht.

Da der Browser eine Datei mit MIME-Type text/css erwartet, aber eine vom Typ text/html erhält, werden die Formatierungen in der Datei ignoriert.

Abhilfe schafft das Setzen des entsprechenden Content-Types im Skript:

<?php header('Content-type:text/css; charset=utf-8'); ?>

Nach dieser Änderung werden die Formatierungen wie erwartet umgesetzt. Auch, wenn es sich bei der externen Datei nicht um ein PHP-Skript handelt, kann dieses Problem auftreten, wenn der Webserver für Dateitypen den Content-Type falsch setzt. Ein peinlicher, aber menschlicher Fehler. Vielleicht erspart dieser Artikel dem einen oder anderen ja etwas unnötiges Grübeln… 🙂

Veröffentlicht von

www.mabraham.de

Kommt noch.