CSS Conditional Comments
Using Conditional Comments to detect browser versions and avoid those nasty CSS hacks for Internet Explorer or Firefox.
Adverts Blocked Please disable AdBlocking software and allow me to set cookies so that I can continue providing free content and services.
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:
|lte||Less Than or Equal to|
|gte||Greater Than or Equal to|
<!--[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]-->
<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]-->
Last updated on: Friday 8th September 2017
There are no comments for this post. Be the first!