hypeway

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...}