Geek Answers Handbook

CSS Conditional Comments

I am currently developing a theme for a homepage, but have run into several problems. For some reason, I don’t have access to edit the HTML code itself, and I need to write my own .css for IE (in particular, versions lower than IE9).

I have two questions. The first is a double background. Versions lower than IE9 may not seem flawless. If IE skips an element, that’s fine, but since the graphic in this element interacts with another element (to smoothly move through the graph), it makes the other element weird. The graphics in this second element are the background in the div-box. I want this background to be another custom background that only appears if the user uses IE as a browser; and, if possible, I want this to apply only to versions below IE9 (the site renders with a double background, which works great for IE9).

http://patrikarvidsson.com/project/sohelp/illustration.jpg

The CSS looks like this (#mainframe is the part under the title navigation bar). The bottom image is how it displays in IE8. IE7 shows the same thing. The first is FF / Chrome / Safari and IE9.

#mainframe { background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important; }

I searched a lot on the net, also asked friends, and this does not seem to work without writing conditional comments in the html markup. Am I missing something? Is it possible to do this using only .css files?

The site uses jquery. I do not know this, but I thought I mentioned it just in case.

+4
source share
3 answers

You might want to study this article here , which explains how to use conditional comments to set classes in an html element. You can then use this class to target specific browsers in your stylesheet in its purest form.

Your html tag will look something like this:

 <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Edit 2

Because the announcement that IE10 does not support conditional comments, although it would be nice to update this answer. I tested the type of comments that it will support, and it seems that the above will still work, but if you want to target more than 10 or only 10, you will be out of luck . As suggested by Microsoft themselves on their blog (link in @MarcoDemaio's comments), you should use feature detection.

Then you can do something like this in your css:

 .somestyle { background: transparent url('derp.jpg') no-repeat; } /* ie6 fallsback class */ .ie6 .somestyle { background: #eee; }

Read the article and good luck;)

Edit 2

Since IE7 is no longer my main concern, and IE9 is pretty consistent in its behavior, I can get away from just the following code (which will add a class only for versions of IE less than IE9):

 <!--[if lt IE 9]><html lang="en" class="lte9"><![endif]--> <!--[if gt IE 8|!IE]><!--><html lang="en"><!--<![endif]-->

Change 1

Ok, I was able to skip the comment "cant" edit html.

In this case, you can only use browser hacks, I think they are dirty, but hey, if you have no other choice ...

Something like that:

 .someclass { *color: blue; /* IE 7 and below */ _color: blue; /* IE 6 */ } /* IE6, IE7 - star hack */ .someclass { *color: blue; } /* IE8 - winning hack */ .someclass { color: blue\0/; } /* must be last declaration in the selector ruleset */
+9
source

I had this problem in my CMS application, so ...

Create a div container so that it displays the name and version of the browser, which will look like

 <div class="ie_6_0"> <div class="your_custom_elements"> /////// </div> </div>

and you use CSS classes like

 .your_custom_elements{common styles between versions} .ie_6_0 .your_custom_elements{do somthink for old versions} .ie_9_0 .your_custom_elements{do somthink for new versions}

UPDATE 1

or how

 <div id="mainframe" class="ie_6_0"> /// </div>

and CSS for example

 #mainframe{common styles between versions} #mainframe.ie_6_0{do somthink for old versions} #mainframe.ie_9_0{do somthink for new versions}

ie_6_0 : since your name and version of your browser should request it and add it by code.

0
source

For a problem with a double background, you just need to add another containing element.

 <div class="element"> ... </div>

becomes

 <div class="container"> <div class="element"> ... </div> </div>

I'm not sure why you cannot manually edit the HTML, but if you have access to the javascript file and you are using jQuery, you can add a class like this:

 $('.element').wrap('<div class="container" />');

You can use CSS hacks to avoid using conditional comments. CSS hacks are not so commonly used now, as the average user uses a browser that does not require any hacks to display properly, but it is still a completely faithful and reliable way to avoid using conditional HTML operators. Depending on the specifics you want, you have a bunch of different hacks that can only be used for target versions of IE:

 * html .element { color: #fff; /* IE6 only */ } html .element { _color: #333; /* IE7 only */ *+html .element { color: #999; /* IE7 only */ } html .element { *color: #000; /* IE7 and below */ html .element { color: #ccc\9; /* IE8 and below */ }

So:

 #container { background: url(img/bg1.png) repeat-y\9; } #container #mainframe { background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important; background: url('img/bg2.png') no-repeat\9; }
0
source

More articles:


All Articles