Put browser specific condition in CSS selector

Question

I have following css selector

 body
 {
   margin: 0;
   font-family: "Arial" ;
   font-size: 18px;
   line-height: 25px;

  }

I want to write condition that if the browser is IE then change the line-height to 10px

I searched one similar question here but when i add the condition like mentioned in the question it throws syntax error Missing property name before colon(:). I followed question and modified code like

    .bodyClass
    {
      margin: 0;
     font-family: "Arial";
     font-size: 18px;
     line-height: 25px;

     <!--[if IE 6]>
       line-height: 10px;     
     <![endif]-->

   }

How to write the conditional statement inside css selector? I dont want to create different style sheets for IE and rest of browsers

Jon · Answer 1 · 2013-10-10T09:37:04.753

7

If you don't want to create separate stylesheets then you have two alternatives.

IE conditional comments

Use conditional comments to give classes to the <html> tag, for example:

<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

This way you can then use nice self-describing selectors like this in your CSS:

html.ie6 .bodyClass { line-height: 10px}

CSS hacks

Another option is to use appropriate CSS hacks to target the browsers you are interested in. The advantage of this approach is that it can be done without touching the HTML/DOM at all. One specific hack that targets only IE 6 while still being syntactically valid CSS is:

.bodyClass { _line-height: 10px; /* hack targeting IE 6 only */ }

If you do decide to use CSS hacks, please make sure to accompany them with comments that describe what they do to help future maintainers.

edited Oct 10 '13 at 09:37

answered Oct 10 '13 at 09:31

Jon

428,835
81
738
806

I'd add that there's no guarantee whatsoever that hacks target *only* the intended browser. It just happens to be that way which people figured out over time, but this may change with future browser development. – deceze Oct 10 '13 at 09:42
I tried using your statements but whatever i write inside those if conditions it shows as comment in my html – James Oct 10 '13 at 09:56
1

@Happy: They *are* HTML comments, so that's normal: it's what they look like. But they make a difference to IE. – Jon Oct 10 '13 at 10:04
Is it possible to show demo? I will really appreciate it. if possible can you modify this fiddle http://jsfiddle.net/84pQM/4/ – James Oct 10 '13 at 10:11
@Happy: [Here's one](http://jsfiddle.net/ryRR8/), but of course you 'll need IE6 to see anything. – Jon Oct 10 '13 at 10:33
@Jon but i dont see any difference in output in IE and chrome. I am using IE 10 but i need this for IE9 and above – James Oct 10 '13 at 10:41
@Happy: Please read the answer carefully. Your example specifically targeted IE6, so that's what mine does too. To target IE9 and above you will have to do things in reverse: use a universally applicable style and "undo" it with another that only applies to IE <= 8. – Jon Oct 10 '13 at 11:40
Please show me how to apply for only IE9 and above. I really request you – James Oct 10 '13 at 12:03
Also my example was not for IE6. It was for IE9. – James Oct 10 '13 at 12:08
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38969/discussion-between-happy-and-jon) – James Oct 10 '13 at 12:08
@Happy: You example certainly was for IE6; it still is: `[if IE 6]`. For the IE9 version I have already explained how to do it. – Jon Oct 10 '13 at 12:12
@Jon I really have not understand what you meant for IE9? – James Oct 10 '13 at 13:20
@Jon this is my updated fiddle http://jsfiddle.net/ryRR8/10/ you can see i have added condition at top if IE greater 9. But still nothing prints inside that if condition and nor i get green background color. What is wrong here now? – James Oct 11 '13 at 09:02
@Happy: Please think longer about what you are doing. Your HTML starts with ` – Jon Oct 11 '13 at 09:57
@Jon but i use IE 10.so that means it will look same in both in IE and chrome because IE 10 doesnt support conditional comments. So then how could i solve my issue then – James Oct 11 '13 at 10:01
@Happy: I have no idea what your issue is, and can't spend more time on this right now. – Jon Oct 11 '13 at 10:03
@Jon Also i updated your fiddle again to see what is being printed. But nothing gets printed in both IE 10 and chrome http://jsfiddle.net/KA24H/3/ I am really sorry if you are annoyed with me – James Oct 11 '13 at 10:03
@Jon i certainly think you will help me out. My issue is quite simple that i need different styles for IE 10 and chrome – James Oct 11 '13 at 10:05
@Happy: That fiddle was wrong, I edited the link in the meantime. See the new one. – Jon Oct 11 '13 at 10:05
@Jon Please paste in new fiddle. I think you forgot – James Oct 11 '13 at 10:07
@Jon Many thanks for putting so much efforts on me. I accepted Kishori's answer as workaround untill i figure out how to use your solution. Can you put the new fiddle which you said you have modified. Dont be upset with me please. – James Oct 11 '13 at 12:39

score 5 · Accepted Answer · answered Oct 10 '13 at 09:32

5

Try this out:

*line-height:10px;  //* is hack for IE7
line-height:10px\0/;  //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers 
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    line-height:10px;
}

answered Oct 10 '13 at 09:32

Kishori

1,065
6
12

I have tried using line-height: 25px\9; but it gives syntax error – James Oct 10 '13 at 09:47
`CSS` validator will show error but will work while loading in IE9 – Kishori Oct 10 '13 at 09:50
I used but nothing changes – James Oct 10 '13 at 09:56
using the hack media screen and (-webkit-min-device-pixel-ratio:0) worked for me. I also used hack for IE 10 i.e media screen and (min-width:0\0) . Although it is not good solution but is currently working. I will try to see if i can implement solution give by . Many thanks Kishori – James Oct 11 '13 at 12:37

score 1 · Answer 3 · answered Oct 10 '13 at 09:32

You can write them inside headers and there join a stylesheet such as

<!--[if IE 6]>
    <link href="~/folder/file.css" rel="stylesheet" type="text/css" />
 <![endif]-->

Else if you can use a serverside such as ASP.NET and by Using Request.Browser check whether if its IE and change the style.

Vinay Pratap Singh Bhadauria · Answer 4 · 2013-10-10T09:53:06.607

0

#testdiv
{
height:300px;
width:100%;
line-height:50px;
line-height:100px\9;    
}

Demo Fiddle

edited Oct 10 '13 at 09:53

answered Oct 10 '13 at 09:33

Vinay Pratap Singh Bhadauria

9,829
3
28
49

I have tried using line-height: 25px\9; but it gives syntax error – James Oct 10 '13 at 09:47
@Happy check the fiddle on IE – Vinay Pratap Singh Bhadauria Oct 10 '13 at 09:53
I modified your fiddle http://jsfiddle.net/84pQM/4/ but i get same result. The fiddle i created is same as my actual code – James Oct 10 '13 at 10:06

Lt_Shade · Answer 5 · 2013-10-10T09:48:36.577

0

Try <!--[if lte IE 6]>

Or you could try the opposite and add the line height as 10 then use

 do something; IE will ignore this, other browsers parse it 

to set the line height for other browsers.

Below is a link to Supporting IE with CSS

http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/

Another Useful site is http://css3please.com/ which shows you the different CSS for IE, Chrome and Firefox. It also allows you to edit the site in real time.

edited Oct 10 '13 at 09:48

answered Oct 10 '13 at 09:41

Lt_Shade

590
1
7
18

The link to dev.opera.com is broken. It's backed up at https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/supporting-ie-with-conditional-comments/index.html – FelixM May 10 '17 at 13:31

Put browser specific condition in CSS selector

5 Answers5

IE conditional comments

CSS hacks