What are CSS Conditional Comments and Conditional Rules?Using CSS Conditional Comments to detect browser versions and avoid those nasty CSS hacks for Internet Explorer or Firefox.
CSS Conditional Comments allow certain code elements to be processed by a given internet browser without JavaScript, hacks, or other methods. This tutorial will show 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 be honest, I haven't used them much until now.
Standard HTML comments look like this:
<!-- Comment content --> A conditional comment uses an expression that evaluates it as true or false. If the expression is true, 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.
Let's suppose you wish to target a specific version of IE; 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:
| Operator | Description |
|---|---|
| lt | Less Than |
| gt | Greater Than |
| lte | Less Than or Equal to |
| gte | Greater 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 to serve CSS content? The message between the comment tags can be anything you want, including Javascript and HTML tags. We can use this to serve Internet Explorer or Firefox user's specific content.
<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. I had a problem with a border in IE7, so I only created another CSS file for IE7.
This method means that anybody using Firefox will only use 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 that no hacks must be used to get the correct page rendering to work.
You can also use conditional comments to target non-IE browsers using !IE will 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.
