Targetting Safari and Chrome CSS by with the @media hack

After completing a couple of other demos for loading Safari-specific styles, I came across a relatively clean method to accomplish the task with no Javascript using the hack found here: http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/

The background of this box will appear orange in most browsers, but green in Safari and Chrome.

Here are the contents of the Safari-only stylesheet. It gets loaded by all browsers, but the styles are only used by webkit-based browsers

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* only webkit-based browsers will read the following styles */
			#testbox { background: lime; }
}

So now I have three two methods to accomplish this useless task!!! Method 1 (ugly hack)(no longer works), Method 2 (Javascript), and this one, Method 3 (@media hack). I think this one is probably the best.

Originally tested in Safari/Win 3.2.1 and Chrome 0.4.154.29 in February 2009. Re-tested: still works January 2010 with Safari/Win 4.0.4 and Chrome 3.0.195.38