<< Back Home
Stokely CSS Hack for Safari
CSS Safari Hack Color Test
This test below shows how the CSS Hack works with different browsers and their versions. It works well with all versions of Safari to date:
If you see blue text, you are using Macintosh Safari Only (versions 1 through 3+).
If you see black text, you are using a newer Standarized browser like Opera or Mozilla.
If you see red text, you are using an older version of Mozilla (< version 1.01).
If you see purple text, you are using Internet Explorer 7!
If you see green text, you are using Internet Explorer 6!
If you see orange text, you are using Internet Explorer 5!
Safari Stokely CSS Hack Update! (02/15/2008)
This Safari CSS Hack now can be used to isolate individual CSS style rules in the following browsers:
- Safari 1.2-2.0+
- Firefox 1.1-2.0+/Netscape/Mozilla
- Internet Explorer 5
- Internet Explorer 6
- Internet Explorer 7
- (*unknown)
Note that the CSS Hack even works in IE7! With this one browser CSS hack, you can attack a variety of Cascading Style Sheet issues in a variety of browsers, old and new! The link above will show you how that is done, and provides a test case for you to try the hack in your web browser.
Stokely CSS Hack Update! (08/12/06)!!! The Stokely CSS Hack for Macintosh Safari Browser (or Stokely Safari Hack) still works in new Safari version 2.0. That means you guys can keep relying on the Css hack for issues that need to be addressed in your style sheets for your websites, while removing styles from those hacks that Safari has fixed. Of course, that depends on what version of Safari you are concerned about, I know. But this does give you some power over targeting all versions of Macintosh's Safari Browser as needed!
STOKELY SAFARI HACK
I am not a big fan of hacks, for various reasons, but when using some features in css web design, Ive found its sometimes necessary. This one is not very elegant, but should get the job done. It might be especially helpful for those of you trying to figure out how to apply height:100% in Safari, as it does not support min-height. This new Safari Hack should be hidden from Mozilla, Netscape for PC, Ie4-6 PC, IE 4-5 Mac, Netscape for MAC, and Opera. It uses a hack to narrow the agents focus, then relies on a difference in how IE, Safari, and Gecko browsers parse properties using brackets [].
(Please Note: My Stokely Safari CSS Hack is comprehensive, and allows you to not only fix Safari issues, but isolate and address CSS rules for Internet Explorer 7, Safari 3.0, Firefox 2.0, and many others. This makes it a great solution for that site area where you may have allot of complicated cross-browser issues, and need to address them differently in a wide range of browsers, old and new. I use this CSS fix to specifically address "min-height" issues in my web sites, which is where IE6, IE5, and Safari differ from IE7 and Gecko browsers like Firefox. - Mitchell Stokely)
Stokely CSS HACK
------------------------------
#test1 {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:black;
}
/*end*/
/*\*/
html*#test1 {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}
/*\*/
* html #test1 {
color:green;
}
/*end*/
Now, add this HTML to show the result in your web page:
<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 Macintosh Safari Only (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 Stokely CSS HACK - EXPLAINED BELOW IN FULL:
#test1 {
font-weight:bold;
font-size:14px;
color:orange;/*IE 5 for PC only*/
voice-family:"\"}\"";
voice-family:inherit;
color:black;/*all non-IE 5 browsers*/
}
/*end*/
/*\*/
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 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 Safari on MAC, 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 for MAC sees 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!*/
}
/**/
