Skip to content

The BIG Reason

Music, opinions, and portfolio of Mark Eagleton, musician and web developer in Northern CA.

Hiding styles from Internet Explorer
Creative use of IE conditional comments empowers you to hide entire CSS files from all versions of Internet Explorer

How To Hide Any or All CSS From Any or All Versions of Internet Explorer

Boy have I had a fun day with Internet Explorer 8! Faruk AteÅŸ has too. He posted a comprehensive piece about IE 8’s X-UA-Compatible header mechanic. I got down to the paragraph on the blacklist and quickly paused my reading to figure out the necessary IE conditional comment syntax to hide style sheets from all versions of Microsoft Internet Explorer. Come inside. I will share.

Faruk Ateş’s article about IE 8’s X-UA-Compatible header mojo alarmed me. Specifically the part where he describes the blacklist Microsoft keeps of sites they deem insufficient to be rendered with IE 8’s default rendering mode. What’s more, IE 8 users can submit sites to this blacklist by setting a preference for the compatibility button that lives next to the address bar.

While I do think the compatibility button is a handy tool, I find the whole idea of keeping a blacklist to override a web author’s and end user’s control of the way a web site is rendered offensive and destructive to the progress of the web.

Well, if Microsoft wants to blacklist you, you can blacklist them right back! Using Internet Explorer conditional comments, you can prevent all versions of IE from seeing a style sheet and optionally serve a specific style sheet to IE users only. Here’s how:

<!--[if !IE]>
	--> 
		<link rel="stylesheet" href="your-css-file.css" type="text/css" media="screen" charset="utf-8" /> 
	<!--
<![endif]-->

The content between the first <!-- on line 1 and the --> on line 2 is ignored by all non IE browsers. The --> on line 2 closes the comment just before the style sheet to non IE browsers, allowing them to see the link to the style sheet. Reopening the comment just after the link to the style sheet hides the rest of the conditional comments from non IE browsers.

IE processes all the content between <!--[if !IE]> on line 1 and <![endif]--> on line 5. The placement of the exclamation mark before the IE in the opening of the conditional statement tells all versions of IE to ignore the content between <!--[if !IE]> on line 1 and <![endif]--> on line 5. Omitting this exclamation mark would tell all versions IE to process the information inside the conditional statement.

If you would like to give all versions of IE something extra, the following syntax will do the job:

<!--[if IE]>
	<link rel="stylesheet" href="your-ie-css-file.css" type="text/css" media="screen" charset="utf-8" /> 
<![endif]-->

If you aren’t quite irked enough to yank all CSS from every version of IE, but the ability to hide a style sheet from one or two versions of IE would be useful to you, the following is what you are looking for:

<!--[if !IE 6]>
	<link rel="stylesheet" href="your-css-file.css" type="text/css" media="screen" charset="utf-8" /> 
<![endif]-->

<!--[if !IE]>
	-->
		<link rel="stylesheet" href="your-css-file.css" type="text/css" media="screen" charset="utf-8" /> 
	<!--
<![endif]-->

In the example above, we are first serving our CSS file to all versions of IE excluding 6. The second conditional statement serves our style sheet to all non IE browsers. Because IE processes all the content between the opening and closing of conditional statements, it is necessary to include two separate links to the same style sheet. Using the following syntax results in validation errors and an extraneous --> in versions of IE not targeted by the conditional:

<!--[if !IE 6]>
	-->
		<link rel="stylesheet" href="your-css-file.css" type="text/css" media="screen" charset="utf-8" /> 
	<!--
<![endif]-->

These uses of IE conditional comments (excluding the last example) are all perfectly valid, W3C approved markup. Microsoft and Internet Explorer users can still blacklist you, but doing so will have no effect if you serve the same or no style sheet to all versions of Internet Explorer.