Browser selectors in CSS - Signal vs. Noise (by 37signals) (original) (raw)

Rails must be spoiling me. Every time I have to write ugly code, I wonder: could the language be different?

I wondered just that about CSS while making some Backpack Calendar styles work across browsers. Hacks are ugly. What if I could just type a special selector, based on the name of the current browser?

@Firefox div.trash { padding-top: 5px; }

@IE6 div.trash { height: 1%; }

Sam had a great idea: “you could write some javascript that sets a class name on, say, the element based on the current browser.”

html.firefox div.trash { padding-top: 5px; }

html.ie6 div.trash { height: 1%; }

Much prettier! If only we had the time to try it out.

Update: Rafael Lima has provided the Javascript. Thanks!