I went looking for a rails gem to detect browser types, and stumbled across this great little snip it of javascript code, inspired by 37 signals. It allows you to create CSS rules for specific browsers, versions, and even platform. I don't think I will ever see CSS the same way again.

From http://rafael.adm.br/css_browser_selector/

.ie .example {background-color: yellow}
.ie6 .example {background-color: #A02601}
.ie7 .example {background-color: #993d53}
.gecko .example {background-color: gray}
.win.gecko .example {background-color: red}
.linux.gecko .example {background-color: pink}
.opera .example {background-color: green}
.konqueror .example {background-color: blue}
.webkit .example {background-color: black}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

If you dont have it yet you can download it here. Go ahead. I'll wait.

If you haven't had a chance to use it yet, i can tell you that is has added years to my life by reducing stress and frustration. No more wondering why things don't line up, or what CSS classes are affecting that text. Just click inspect, click on the HTML element you want to find out about, and up comes the HTML and CSS for that DOM element. It shows what styles are applied to that element, and even the line number in the CSS file. You can even see what css style are being overwritten or edit the HTML and CSS in place.



Beyond that, it lets you view all http requests and responses, making Ajax debugging a breeze.



One of my new best friends is the net tab. It lest you see every http request and how long it takes to load in a nice time line. It then breaks things down into request for JS, CSS, images, HTML, flash files. I cant tell you how much time and money has been wasted trying to optimize code and database calls. Looking at one of our larger, and slower sites, I can see the the HTML is taking ~300ms, while it is taking close to 10 seconds to load the whole page. Where does that time come from? 3 seconds come from loading 11 CSS files, and 5 seconds are spent loading javascript files. that, combined with the flash and images on the site equals one sluggish site. I have made some modification to the the Drupal system as well as the default template so as to load all CSS and javascript files in line with the HTML. This bumped up the time to load the HTML page to ~350 ms, but dropped the time to load JS and CSS to under 1 sec! Now thats some low hanging performance fruit. I saved second of time on every page load with having to set up memcached, or MySQL replication. *Shutter*