End to Browser Sniffer Javascript?

Internet Explorer Tricks

Only 3 months ago, on Modcom’s Johnies Wilshire site, we used browser sniffer Javascript to include some IE-only scripts (to handle the PNG transparency bug). Had but I only known at the time that Internet Explorer already has a simpler, better solution right there at the ready in its conditional comments.

What the hell are these conditional comments?

Well, for example, on Pizza I have some CSS that works well for Firefox but not so much with IE which requires a different bit of CSS magic. By including the code below in the Head of all of my pages I’m able to selectively include the IE CSS fix.

  1. <!–[if IE]>
  2. <link rel="stylesheet"
  3.   href="/css/pizza-ie.css" type="text/css" />
  4. <!endif–>

(also available here, for no good reason other than I think pastebin is cool: pizzabytheslice.pastebin.com/426910)

Here’s the detailed, official poop:
About Conditional Comments on Microsoft.com

CSS and IE: some easy hacks

These make use of 2 IE quirks: 1) IE is the only broswer that has anything (DOM-wise) above HTML, and 2) the IE CSS parser will strip leading underscores from attributes.

The first quirk may be exploited by using the universal (anything) selector and making a precedence rule, * html

The second works within a single rule to first give all browsers some value, then immediately give an instruction that only IE will recognize, so width tells everyone a width (including IE), but follow this with _width and all broswers except IE will ignore the new setting. IE, however, will override the earlier rule.

Here it is in action:

  1. /* an entire RULE only IE */
  2. * html div.sample{
  3.   width:200px;
  4. }
  5.  
  6. div.sample{
  7.   width:180px;
  8.   _width:200px;/* just this attribute only IE */
  9. }