This Site Will Probably Break On Shitty Browsers

I apologize but I refuse to fix it. Dealing with Shitty Browsers is a very unpleasant part of my day job, and unpleasantness simply isn’t allowed here.

After all, I’m merely using perfectly valid CSS 2.0, which became W3C recommendation more than 10 fuckin’ years ago. They all have workarounds; some are easy, some are really ugly, but every single one of them are annoying and seriously cramp my style.

When I stopped caring about IE6, currently the shittiest browser (IE7 isn’t far behind) that lots of people still use, here are some of the things I can do—

Parent > Child Selectors

This is how a lot of your selectors should actually look like. Most of the time, you really only want to target the immediate children, not all of the element’s descendants. Go ahead and check your styles—how many times did you have to override styles inadvertently inherited from ancestor element(s)?

Chained Selectors

#id.class1.class2 really just means .class2 in IE6. There is no clean way to work around this other than skirting around its usage. The alternative is to nest extra, likely semantically meaningless elements, or add class names like class1-class2 to the HTML. Both are ugly as sin, and get messy very quickly.

:hover On Any Element

No more li.hover and using JavaScript to add otherwise useless hooks, or using <a>s in strange ways. Use li:hover like a real (wo)man! Gotta admit though, Firebug’s support for pseudo-classes is still lacking, which could make this a bit of a pain to debug.

Other Pseudo-classes

It has become such a habit for me to add a first class name in PHP that I’ve almost forgotten about the first-child pseudo-class. Squeaky clean code is definitely The Future.

24-bit PNGs

This one’s famous. Think of all the fun stuff you can do with partial alphas without having to fuck around with AlphaImageLoader bollocks or settle for lesser, degraded PNG8s.

Don’t even get me started on JavaScript/DOM on shitty browsers.