CSS Cross Browser Compatibility – Conditional Comments/CSS Hacks

CSS Hacks/Conditional Comments

This is going to be a short/quick article. Straight to the point.
The lack of Cross browser support for CSS2 is horrible. CSS3 will soon be standard and implemented across many newer browsers, but until then here are a few suggestions on targeting different browsers.

Using a global reset.css is important, this resets a lot of the properties which may be different across browsers and gives you a good baseline starting point. A global reset can iron out many browser inconsistencies.

CSS Reset.css

This was taken from http://stylizedweb.com/2008/02/14/10-best-css-hacks/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

Conditional Comments

Conditional comments
Implemented by IE to fix their retarded browsers, conditional comments can help you target different versions of IE.

<!--[if IE 6]>
Any instructions in this comment will be parsed by IE 6.
<![endif]-->

<!--[if IE 7]>
Any instructions in this comment will be parsed by IE 7.
<![endif]-->

<!--[if lte IE 7]>
Any instructions in browsers less than or equal to IE7 will
parse these comments.
<![endif]-->

Example of using conditional comments:
<!--[if IE 7]>
<link href="styles/ie7styles.css" rel="stylesheet" type="text/css" />
<![endif]-->

CSS Hacks

There are many CSS hacks. However, these are the couple I find most useful.

Star-property Hack

*property: value;

Not sure on the name but I call this the star-property hack. This hack allows you to target IE7 and below.

Underscore-property Hack

_property: value;

This targets IE6 and below. Any styles will be applied to ie 6 and below.

!important Targetting

The !important at the end of a style, tells browsers that this property should override any other declarations of that property regardless of position. For example in this case:
width: 10px !important;
width: 80px;

Even though the 80px declaration comes second, Firefox 3 and IE7/8 will render this style as 10pixels. IE6 does not recognize the !important declaration and will apply an 80pixel width.

I prefer this method when I need to target IE7 and FF with one rule, and IE6 with the other. This is a valid method of feeding one rule to ie7/ff and another for ie6.

CSS Examples
div.test{
margin-top: 10px; //firefox
*margin-top: 15px; //ie7
}

div.test{
margin-top: 10px; //firefox
*margin-top: 5px; //ie7
_margin-top: 2px; //ie6
}

div.test{
margin-top: 10px !important; //ff and ie7
mragin-top: 2px; //ie6
}

NOTE: The star property hack and the underscore property hack are NOT valid css, but sometimes you need to get a little dirty to fix IE7 and IE6 issues. With the release of IE8, hopefully the inconsistencies of cross browser css will finally be ironed out, however people will still insist on using IE7...so knowing how to support it is important.

Hope you enjoyed.