Share via

MIME types and stylesheets

  • Article

Web servers send a HTTP response header named "Content-Type" that specifies the MIME-type of the file that is being sent. For security and standards-compliance reasons, style sheets should be delivered with the "text/css" MIME type.

  • Starting with IE9 Standards mode, style sheets will be ignored (not applied) unless they are delivered with a "text/css" MIME type.
  • In all document modes, style sheets will be ignored if the style sheet is delivered with the "X-Content-Type-Options: nosniff" header and the style sheet is not delivered with the "text/css" MIME type.
  • In all document modes (and in legacy browser versions) style sheets delivered from a cross-origin context (for example, example.com uses a style sheet from microsoft.com) will be ignored unless the style sheet is delivered with the "text/css" MIME type.

If a style sheet is ignored due to an incorrect MIME type, your site may fail to render as expected. Text, images, or other features may lack the desired styling.

If a style sheet is ignored because it does not bear the correct MIME type, a notification will be logged in the Windows Internet Explorer 9 F12 Developer Tools console.

Ensure that all style sheets are delivered with the proper HTTP response header: "Content-Type: text/css".

If you find any sites that are sending improper MIME types and behave incorrectly in Windows Internet Explorer, please file a bug on Connect.

The following sample demonstrates this behavior by using an external stylesheet to declare a style to be applied to a span element. When the test passes, the span element is hidden by a style rule declared in the external file.

<!doctype html>
<html>
<head>
  <title>External CSS Mime Type Test</title>
  <link rel="stylesheet" type="text/css" href="./styles.txt">
</head>
<body>

<h1>External Stylesheet MIME Type Test</h1>
<p>This tests MIME type support for external stylesheets.  If the word "not" appears in the next line, the test has failed (or has not been set up correctly).</p>

<p>Result: The test did <span id="result">not </span> pass.</p>

</body>
</html>

To properly test the behavior, save the following to a file named "styles.txt" in the same directory as the sample HTML file:

#result {
 display: none;
}

Content updated September 2014.