Problem
I spent eight hours yesterday trying to get a webpage for another site working in HTML5. It just didn’t make the slightest bit of sense.
I’d make changes to the CSS file and nothing would happen. I’d refresh and clear the browser cache but it still wouldn’t work.
Yet adding style to the element in the html file worked.
The CSS file was there. You could even see it as a Resource in the Chrome Developer’s Tools.
However, the Developer’s Tools was only showing some of the CSS information.
Cause
It turns out that Chrome ignores your CSS file if it isn’t served with a MIME type of “text/css”; despite being in a tag that says ‘link rel=”stylesheet” type=”text/css” href=…’.
I’m not sure if it is only this fussy when you stick in a <!DOCTYPE html> tag (html5).
Solution
The CSS file was being generated by a PHP script on the server so the solution was to add a line at the top like:
header(‘Content-type: text/css’);
