Learning never exhausts the mind

By

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.

 

Sharing is caring!

If you enjoyed this post, please share it with others. Click one of the social media buttons below to share on Facebook, Twitter, LinkedIn, Pinterest or email to a friend.

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.