Mime Type: Linking To Css W/ A Txt Extension

Firbug Error The stylesheet foo.css.txt was not loaded because its MIME type, 'text/plain', is n

Solution 1:

When you use the type attribute in HTML you are saying "When you fetch this resource, expect to get this type of data." This allows user agents (such as browsers) to avoid requesting resources that they know they can't handle. For CSS you need to set this to text/css.

When the server responds to the request, the HTTP Content-Type header says "This content is of this type". It is canonical and must also be set to text/css for CSS data.

Because you have used a .txt file, the server (in a default configuration) says that the file contains data that is text/plain so it tells the browser that. You cannot override this from the browser.

It works for JavaScript

Browsers, for various reasons, tend to ignore the Content-Type specified by servers for JavaScript. This could be considered a bug in those browsers.

Setting type="css" doesn't show an error in Firebug and the page validates, but the CSS doesn't load properly - I'm pretty sure that's not a valid MIME type though

css is not a registered MIME type, the browser doesn't recognise it as a stylesheet language that it can understand, so it doesn't event try to download it.

I tried to find a list of MIME types off W3C, but as with everything it's difficult to find/understand W3C

The W3C isn't responsible for the MIME type registry, which you can find at http://www.iana.org/assignments/media-types/

Solution 2:

In case anyone still wants to do this, it can be done with JavaScript. Here's a rough jQuery solution:

var sheet = $('<style></style>')
$('head').append(sheet)
sheet.load("./foo.css.txt")

Solution 3:

If you could use .php instead of .txt you could set type from within the file itself.

Solution 4:

Try using a server side extension like .php

In this case you can set the mime-type in the document itself.

Solution 5:

I got this error as I inadvertently left out the style tags.

E.g.

<link rel="stylesheet"  href="lib/mycss.css" />

should be:

<style><linkrel="stylesheet"href="lib/mycss.css" /></style>