1 files changed, 1 insertions, 0 deletions

diff --git a/old/published/Webmonkey/cssbrowserhacks.txt b/old/published/Webmonkey/cssbrowserhacks.txt
new file mode 100644
index 0000000..acadb8a
--- /dev/null
+++ b/old/published/Webmonkey/cssbrowserhacks.txt
@@ -0,0 +1 @@
+Browser-specific CSS hacks have become a taboo among standards-aware web designers, and for good reason -- theoretically you shouldn't need them. However, as long as Internet 6 continues to hold significant market share there will likely remain some cases where you need to target CCS rules to just IE.

There are also times when you might need to target other browsers as well, which is why we've put together this comprehensive list of ways target specific browsers.

Because these hacks clutter your stylesheet and greatly complicate the process of maintaining your code, we strongly recommend that only use these techniques as a last resort. There's also a good chance that many of the hacks will stop working at some point since several of them exploit bugs in the browsers.

Still, for the times you need them, here is our list of browser-specific hacks.

== Internet Explorer ==

The easiest and best way to target CSS rules to only Internet Explorer is to use conditional comments to load an extra IE-specific stylesheet. That way all your IE-specific rules are in one file and separate from your standards compliant CSS rules.

To target IE using conditional comments, just add this  line to the headtags of your HTML file:

<pre>
<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->
</pre>

The conditional comment will be ignored by every other browser so only IE 6 and IE 7 respectively will load these stylesheets. Now all you need to do is create the files on your server and override whatever CSS rules are messing with IE's head.

In fact this method works so well we aren't even going to mention the star-html hack or other older methods because there's just no reason to use them any more.

== Firefox ==

Firefox does a pretty good job of rendering web pages the way they are supposed to look, but every once in a while you'll find that some of the older versions do something a bit wonky. 

To target a rule at Firefox 1.5 and 2, use this hack:

<pre>
body:empty #my-id { 
    /* Firefox-specific rules go here */ 
} 
</pre>

The trick to this hack is the proposed CSS 3 <code>:empty</code> pseudo-class. The purpose of the <code>:empty</code> pseudo class is to allow you target any element that has no child elements. However, Firefox 1.5 and 2.0 (and others based on those versions of Gecko) select the body even when the body has content. In other words this hack exploits a bug (that was fixed in Firefox 3).

The big downside to using this hack is that it's invalid CSS 2 (and may not even make CSS 3) so your stylesheets won't validate.

What if you need to target all versions of Firefox? To do that you can use a trick borrowed from Firefox extensions:

<pre>
@-moz-document url-prefix() { 
    #my-id { font-size: 100%; } 
} 
</pre>

The -moz prefix (which is also used for some of the cutting edge CSS support in Firefox 3 link to that tutorial about CSS 3) is combined with the -document url-prefix() selector which is how Firefox add-ons define their styles. 

The result is a rule the only Firefox will apply.

If you're looking to target only Firefox 3, you're out of luck. As of this time we are not aware of any hacks that target only Firefox 3. If you know of a way to do that, be sure to add it.

== Safari ==

As with Firefox 3, we're not aware of any hacks to target specific versions of Safari, but there is a very ugly trick you can use to apply rules to only Safari 1 and 2:

<pre>
#my-id { color:red; }
#my-id { color:black;# }
</pre>

The first rule will set the font to red in all browsers. The second rule will set the font to black in every browser except Safari 1 & 2. This hack works because the first two releases of  Safari had a bug where a hash mark after the semicolon caused Safari to choke. 

This is probably the ugliest hack in this tutorial so use it sparingly, if at all. Also note that Safari v1 and v2 will choke on ''every'' rule after the "#" so put these at the bottom of your stylesheet.

If you need to target Safari in general (regardless of which version) using the same prefix trick we used above with Firefox.

In Safari's case (or any other webkit browser), the rule looks like this:

<pre>
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #my-id { height: 100%; } 
} 
</pre>

The downside to this hack is that it also applies to Opera 9+. However you can retain the Safari-only aspect by combining it with the Opera-only rule below  to achieve a kind of Safari-only targeting.

== Opera ==

Generally speaking Opera doesn't require many CSS hack since it's perhaps the most standards compliant of all the browsers. In fact, if you find something is  rendering poorly in Opera, there's a good chance the error is on your end, not the browser's.

But, should you ever need to target Opera we have a way. This one comes courtesy of [http://www.nealgrosskopf.com/tech/thread.asp?pid=20 Neal Grosskopf] (who also has a comprehensive list of browser hack, including some conditional comment hacks we try to avoid, but if you need them, Grosskopf has the details).

To target Opera, use this rule:

<pre>
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
    #my-id { clear:right; } 
} 
</pre>

As Gosskopf notes in his write up, this is one of the weakest hacks since it isn't really targeting Opera, it's targeting all browsers that support -min-device-pixel-ratio that aren't webkit. At the moment that means Opera, but eventually Firefox will likely add support for -min-device-pixel-ratio which means it too will be affected by this hack.

== Conclusion ==

CSS hacks are just that -- hacks. In general you should make every effort to avoid using them (except for the IE conditional comment hack which is pretty safe). 

But for those times when you've tried everything and already pulled all the hair out of your head, hack away.
\ No newline at end of file