IE 7, Chrome, Safari, and Old FireFox hacks

A few or I think it was last year, anyway I was working on a project, all was well, it worked fine both IE7 and IE6 and FireFox. The rest of the other browsers well, there was no need for them at the moment but this particular project called for Chrome and Safari as well. Now, that really hit a snag, it has always been my SOP not to hack the CSS yet, as much as possible no hacks, because it gets kind of hairy when you have to come back on it later to adjust for newer and more standardized version of the browsers. You'll get stuck working on it like you started from scratch, and sometimes or most of the time you don't exactly remember what you did. So I found this site that shows you how to hack Chrome and Safari.

Here is a sample of the CSS code:

/*\*/  html*#test1 {
[color:red;/*Affects older Firefox and Netscape browsers only. Seen also by IE5-6 and Safari for Macintosh, which is addressed below.*/
color:blue;/*Affects Google Chrome amd Safari for Macintosh only (v1-3). See also by IE5-6, but thats addressed below. Also hidden from older Firefox and Netscape browsers.*/
]color:green;/*Affects IE 7 only. Seen by IE5-6 but thats addressed below. Hidden from Safari and all Firefox and Netscape browsers.*/  }/**/


.dummyend[id]{
clear:both/*end hack using dummy attribute selector for IE5 mac, else error in CSS occurs!*/
}  


/*The above rule is hidden from IE for MAC,
and read only by older Firefox and Netscape 6-7 and IE5-7 for PC, and Chrome/Safari, in general.*/


/*Newer Firefox and Netscape agents reads rule, but does not read any properties set within [],
so is unaffected by it, probably because it sees these as part of an attribute selector.
Those will be hidden.*/


/*IE 7 on PC will correctly read all rules as it will ignore many characters before a property*/


/*Safari, as well as Chrome, see each [] as a character and not part of a selector,
if one falls before a property.
These cause the property name following the character to not be read,
but next line without "[]" property is  parsed.*/


/*use of [] will break all css selectors following the rule,
if all are not closed, as Mozilla-Netscape read the [] as part of a selector rule,
so make sure they are all closed, using dummy selector.*/  


/*\*/
* html #test1 {
color:green;/*Finally, be sure to reapply a fix that affects IE 5-6 only here.
IE for Mac and IE 7 for PC are not affected here,
which means purple above should work only in IE 7 above!*/
}  /**/  

And this is the html code:
<div id="test1">
If you see black, you are using a newer Standarized browser like Opera or Mozilla.
If you see red, you are using an older version of Mozilla (< version 1.01).
If you see blue, you are using Google Chrome and Macintosh/PC Safari (versions 1 through 3).
If you see purple, you are using Internet Explorer 7!
If you see green, you are using Internet Explorer 6!
If you see orange, you are using a Internet Explorer 5!.
</div>


The code above worked pretty well if I had searched for it earlier I guess I wouldn't have had wasted time by trying not to hack. But I still avoid hacks, I only use the hack above as a last resort. These days I test my CSS against IE7, IE6, IE8, FireFox, Safari and Chrome. Okay so no opera, well Opera is quite similar to FireFox and I usually do not find any errors with Opera.

MANY THANKS TO GiantIsland for this hack.
CREDITS: http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx