CSS browser selectors

Theoretically, one should be able to design a site in FF, Safari, Opera, and IE7 without using hacks (IE7 being the questionable one, of course). And I’m usually able to do that, but when matching designs down to the pixel, even those browsers sometimes behave a little differently. I mentioned before how I usually approach that issue, but I think I may have found a new solution.

This is relatively old, but somehow I’ve missed it completely: CSS Browser Selector (source). It’s a smidgen of javascript that allows you to use CSS selectors (such as .ie7, .webkit, .gecko, etc) to target the imperfections among various browsers (and versions thereof). For instance:

.ie        #hdr { background-color: #111; }
.ie7       #hdr { background-color: #333; }
.webkit    #hdr { background-color: #555; }
.gecko     #hdr { background-color: #777; } 
.win.gecko #hdr { background-color: #999; }

I think the selectors are pretty self-explanatory. I’ve tested this out to some degree, and it seems to work incredibly well. I’m actually using it on a project at work. No more conditional comments! It’s pretty slick, I think.

Of course, then there are those who will say, “What if javascript is turned off?” Fine. You got me. My feeling there is, a person who browses without javascript won’t notice a few unaligned pixels, anyway. Plus, you’ve gotta draw the line somewhere, and that case is probably a foot or two past my line.