Posts Tagged “HTML”

Jan 08 2008

Use conditional comment to create CSS style sheets for multiple browsers

Posted by: WebDevJunkie in CSS, HTML, tags: , , , , ,

A handy trick I have been using since IE 7 came out and all of sudden my css was being read a tad differently across each of these browsers: IE6, IE7 and Firefox.

Typically I first design a stylesheet for Internet Explorer, then use a conditional statement to add a second stylesheet where I only include those css items that need to be modified for non-IE browsers – namely Firefox, then I place the two stylesheet calls in the <head> like this:

<link href=”style.css” rel=”stylesheet” type=”text/css” />
<![if !IE]>
<link href=”not-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]>

I list them in that order because only IE reads these codes so in IE it only reads the “style.css”, but in Firefox it reads the “style.css” first then writes over what ever styles are renamed in “non-ie.css”

Here are other conditional comments you can use and what they stand for if you need to get more exact on which browser you are targeting:

<!–[if IE]>
If browser is Internet Explorer<br />
<![endif]–>
<!–[if IE 5]>
If browser is Internet Explorer 5<br />
<![endif]–>
<!–[if IE 5.0]>
If browser is Internet Explorer 5.0<br />
<![endif]–>
<!–[if IE 5.5]>
If browser is Internet Explorer 5.5<br />
<![endif]–>
<!–[if IE 6]>
If browser is Internet Explorer 6<br />
<![endif]–>
<!–[if IE 7]>
If browser is Internet Explorer 7<br />
<![endif]–>
<!–[if gte IE 5]>
If browser is Internet Explorer 5 and up<br />
<![endif]–>
<!–[if lt IE 6]>
If browser is Internet Explorer lower than 6<br />
<![endif]–>
<!–[if lte IE 5.5]>
If browser is Internet Explorer lower or equal to 5.5<br />
<![endif]–>
<!–[if gt IE 6]>
If browser is Internet Explorer greater than 6<br />
<![endif]–>
<![if (IE 6)|(IE 7)]>
If browser is Internet Explorer 6 OR 7 ( | is the OR operator )
<![endif]–>
<![if (gt IE 5)&(lt IE 7)]>
If browser is Internet Explorer 5, 5.5 OR 7 ( & is an AND operator but with the gte and lt it is used as a BETWEEN method )
<![endif]–>

Conditional comments are preferable to weightier browser detection scripts and are cross-browser friendly, so don’t forget that you can use these conditional comments to also include or exclude whatever code you want – not just stylesheets.

Comments 1 Comment »