Web Design that taps into the haromny and vision of your dreams.

CSS Conditional Comments

By on in HTML/CSS

653 words, estimated reading time 3 minutes.

Using Conditional Comments to detect browser versions and avoid those nasty CSS hacks for Internet Explorer or Firefox.

Conditional comments allow certain code elements to be processed by a given internet browser, without JavaScript, hacks or any other methods. In this tutorial, we will see how to serve cross-browser CSS content with 100% valid CSS and NO hacks.

Conditional comments are nothing new, they have been around since Internet Explorer 5, but I haven't seen them used much and to he honest I haven't used them much. Until now.

Standard HTML comments look like this:

<!-- Comment content  -->

A conditional comment uses an expression which evaluates to true or false. If the expression is true then the HTML within is rendered, if the expression is false then the HTML is ignored.

<!--[if expression]> HTML <![endif]-->

So how do we use this to detect browsers? Well, we can use the IF IE feature to detect Internet Explorer based browsers like this:

<!--[if IE]> Hello Internet Explorer User! <![endif]-->

If you use this code, any visitor to the page using Internet Explorer will see this hello message, but anybody using Firefox, Opera or Chrome will not see it.

Let's suppose you wish to target a specific version of IE, simply insert the version after IE:

<!--[if IE 6]> Hello Internet Explorer 6 User! <![endif]-->

And if you want to target any version above or below you can use a mathematical operator for comparisons:

OperatorDescription
ltLess Than
gtGreater Than
lteLess Than or Equal to
gteGreater Than or Equal to

Example usage:

<!--[if lte IE 6]> Target IE6 and below <![endif]-->
<!--[if lt IE 7]> Target anything below IE7 but not including <![endif]-->
<!--[if gte IE 6]> Target IE6 and above <![endif]-->

How do we use this for serving CSS content? The message in between the comment tags can be anything you want, including Javascript and HTML tags. We can use this to serve specific content to Internet Explorer users or Firefox users.

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
  <link rel="stylesheet" href="global-styles.css" type="text/css" />
  <!--[if lte IE 6]><link rel="stylesheet" href="ie6-and-below.css" type="text/css" media="all" /><![endif]-->
  <!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="all" /><![endif]-->

In this example, I have created a global CSS document which contains all the styles needed for the website to work. Internet Explorer 6 had some problems with margins and padding, so I created a CSS document which contains margin and padding reset for IE6. Finally, I had a problem with a border in IE7 so I created another CSS for IE7 only.

This method means that anybody using Firefox will only use the one CSS document, while Internet Explorer users will download the main CSS and a "fix" document specific to IE. Using conditional comments also means that every CSS document is valid and no hacks need to be used to get correct page rendering to work.

You can also use conditional comments to target non-IE browsers using !IE to specify all browsers matching "not IE". Very handy for including CSS3 and other features supported by all browsers apart from Internet Explorer.

<!--[if !IE]><link rel="stylesheet" href="css3goodies.css" type="text/css" media="all" /><![endif]-->

Remember: This tip can be used for ANY HTML content, not just CSS. You can send Javascript or any HTML code to specific browsers.

Last updated on: Friday 8th September 2017

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.