hypeway

Dealing with the differences in CSS implementation by various Browsers is a pain in the neck. So, I’ve become a big fan of utilizing CSS framework to neutralize these differences and to have a standardized foundation to start with any client-side design.

One of the CSS frameworks I’ve been using is YUI’s CSS Reset, CSS Fonts, and CSS Grids. Recently I came across Blueprint CSS, another CSS framework that tries to differ itself from the developer-oriented YUI CSS framework by putting an emphasis on the needs of typographic design.

The interesting thing is how these two frameworks are being compared to each other. In my experience as a client-side designer, I am always looking for better ways to solve the same development problems quicker and easier. And Blueprint CSS framework appears to meet my needs well.

I usually find CSS behaving quite consistent between Firefox and Safari. But today I ran into a situation where a CSS hack or filter is needed in Firefox. I found this useful snippet of CSS working perfectly for my purpose.

blockquote, x:-moz-any-link { /* FireFox 2 hack */
  padding-top: 5px;
} 

blockquote, x:-moz-any-link, x:default { /* FireFox 3 hack */
  padding-top: 5px;
}

Came across 2 great articles on CSS filters and hacks for various browsers. One is available at BTreeHugger’s Blog and another one is available at Mezzoblue, whose author happens to be Dave Shea, the creator of CSS Zen Garden. For anyone who developed IE6-centric CSS for corporate intranets or mainstream audience, the articles presented some great hacks in case you need to target certain CSS rules just for IE7, Firefox, or Safari, and validate CSS 3 at the same time.

To target IE7 only, simply prepend *:first-child+html to your selector as:
*:first-child+html div {...rules...}

To target Firefox/Gecko only, just prepend *> to your selector as:
*>div {...rules...}

To target Safari/Webkit/KHTML only, simply prepend body:last-child:not(:root:root) to your selector as:
body:last-child:not(:root:root) div {...rules...}