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 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 be 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 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:
| 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 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 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.
