WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > SOCIAL CHAT > Resources > [IE Hacks] CSS Conditional comments

Reply
  Thread Tools Display Modes
Old 5th August 07, 01:00 PM   #1
Jen
WLC Admin
 
Jen's Avatar
 
Join Date: Mar 2006
Posts: 489
Default [IE Hacks] CSS Conditional comments

Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

Conditional comments work as follows:

Code:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
1. Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
2. Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
3. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

Example

Below I added a lot of conditional comments that print out messages according to your Internet Explorer version.

Note however, that if you use multiple Explorers on one computer, the conditional comments will render as if all these Explorer versions are the highest Explorer version available on your machine (usually Explorer 6.0).

Test

Below are a few conditional comments that reveal the Internet Explorer version you're using. If you don't see any, you're not using Internet Explorer.

Code

The syntax I use is:

Code:
<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>
Note the special syntax:

* gt: greater than
* lte: less than or equal to

Originally by http://www.quirksmode.org/css/condcom.html
Jen is offline   Reply With Quote
Old 24th August 07, 02:15 PM   #2
Game Makker
WLC Lover
 
Game Makker's Avatar
 
Join Date: Jul 2006
Location: United Kingdom, Hertfordshire
Posts: 266
Default Re: [IE Hacks] CSS Conditional comments

It always hopes to know hoe to use them but these should be a last resort. Whatever it is that isn't displaying or working well, you should always attempt to fix the problem without hacks . There are however occasions this can be almost impossible.
__________________
**
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
**
Simple articles to help anyone get started.
Game Makker is offline   Reply With Quote
Old 31st August 07, 07:01 PM   #3
csshuckster
WLC Lover
 
csshuckster's Avatar
 
Join Date: Jul 2006
Location: North Conway, New Hampshire, USA
Posts: 70
Default Re: [IE Hacks] CSS Conditional comments

I use conditional comments all the time. They should be the first thing you do when styling for IE. Conditional commenting is not a hack, it calls the separate stylesheet for IE to be read by IE or the specific version of IE that the conditional comment is naming.

Conditional commenting has saved my business a lot of time and hours. Nice post Jen.
__________________
"Quotes are nothing but inspiration for the uninspired." --Richard Kemph
csshuckster is offline   Reply With Quote
Old 31st July 08, 07:33 AM   #4
jurik
WLC Member
 
Join Date: Jul 2008
Location: Tallinn
Posts: 2
Default Re: [IE Hacks] CSS Conditional comments

There's no need to use them in 99,8% of all cases. Try to write a correct code.
jurik is offline   Reply With Quote
Old 31st July 08, 08:57 AM   #5
Afty
WLC Lover
 
Afty's Avatar
 
Join Date: Jul 2008
Location: Norwich, UK
Posts: 61
Default Re: [IE Hacks] CSS Conditional comments

Quote:
Originally Posted by jurik View Post
There's no need to use them in 99,8% of all cases. Try to write a correct code.
I am a Clientside Developer for a large design studio in the uk. I use conditional comments to pull in stylesheets all the time, you can write fully clean and accessible code and still get completely different outcomes across the 3 latest IE versions.

unless you start using * html hacks (which you shouldn't) i can't believe that you would ever get the exact same results across all the browsers.

Assuming any sort of complicated design that is.

Last edited by Afty; 31st July 08 at 09:03 AM. Reason: clarity
Afty is offline   Reply With Quote
Old 5th August 08, 12:04 AM   #6
VIPStephan
WLC Lover
 
Join Date: Aug 2007
Posts: 63
Default Re: [IE Hacks] CSS Conditional comments

Assuming that IE 6 is the lowest version that’s currently in major use and the developer cares to code for, I can second jurik’s post absolutely. If you’re a good developer in 99,8% of all cases you don’t need any conditional comments at all (depending on the complexity of the layout, of course). If you’re using them “all the time” then you’re either too lazy to do it properly right from the beginning or you’re doing something wrong because you don’t know it better.

Before using any IE hack it helps to understand the concept of hasLayout as this is the source of all evil in 90% of all cases where IE does something differently. And you can help yourself without any conditional comments in most cases.

Of course there are cases where you just need them like transparent PNGs and fallback options for even older IEs (which I really neglect by now due to decreasing usage).
__________________
Don’t click this
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
.
VIPStephan is offline   Reply With Quote
Old 5th August 08, 12:11 PM   #7
Afty
WLC Lover
 
Afty's Avatar
 
Join Date: Jul 2008
Location: Norwich, UK
Posts: 61
Default Re: [IE Hacks] CSS Conditional comments

Transparent Pngs
Clearfix IE rules
Haslayout Fixes

These are the basics of what goes into my IE6 stylesheets.

If you aren't fixing them there, then you are fixing them in your main stylesheet which not only can lead to more complications but also bloats the size of the main stylesheet. Which means that you are "punishing" users with good browsers by making them download larger files.

Conditional stylesheets all the way baby (also i'm pretty much offended by the implication that i'm not a good developer )
Afty is offline   Reply With Quote
Old 5th August 08, 06:44 PM   #8
VIPStephan
WLC Lover
 
Join Date: Aug 2007
Posts: 63
Default Re: [IE Hacks] CSS Conditional comments

Many hasLayout and clearing issues can be overcome with regular CSS in the regular stylesheet without bloating it or mixing „good“ code with „bad“ code.

For example, rather than the :after clearing method one could go the containing floats way which works in all browsers, or we can apply the “overflow clearing” (for which IE needs layout that can be applied by assigning dimensions). All neat, clean, and valid solutions that can live without conditional comments and don’t really pollute the stylesheet.
In the same way, “layout” can be applied to elements in most cases without compromising tidiness of our stylesheets.

Of course, it all depends on the complexity of the layouts, and I do endorse the use of conditional comments but this also seduces to overuse it in that way that when a tiny little difference appears, immediately “hacks” are applied without investigating the true (and often very simple) reasons for the issue and fixing it properly without CCs at first. I’ve seen it all and it’s a PITA to edit sites where developers applied alleged fixes over fixes and eventually they just made it more complicated.

Sorry for the comment on professionalism. I tend to be very direct with my opinion at times. If you don’t see yourself included then just ignore it. In the end it’s at everybody’s own discretion when to use conditional comments. I’m just appealing to everybody to see conditional comments as last resort and try to fix issues without them first (using “legal” CSS, of course).
__________________
Don’t click this
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
.
VIPStephan is offline   Reply With Quote
Old 25th November 08, 12:29 PM   #9
liam.smart
WLC Lover
 
Join Date: Jun 2008
Posts: 79
Default Re: [IE Hacks] CSS Conditional comments

** ignore - duplicate entry **
__________________
Many Thanks,
Liam

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
liam.smart is offline   Reply With Quote
Old 25th November 08, 12:29 PM   #10
liam.smart
WLC Lover
 
Join Date: Jun 2008
Posts: 79
Default Re: [IE Hacks] CSS Conditional comments

Nope, conditional statements arent needed unless its for transparent png's.

There is no reason why FF, IE6 & 7 cant look identical using the same CSS.

It cracks me up when i see IE conditional statements and then IE6 underneath them. Thats clearly someone writing poor CSS and taking the quick option to fix it.
__________________
Many Thanks,
Liam

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
liam.smart is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:43 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.