CSS Hack for Google Chrome and Safari 3.1 September 2, 2008
Valid CSS filter targeting Google Chrome and Safari 3.1
Non-compliant selectors can be used and a valid way to target individual browsers. Chrome supports every selector, just like Safari 3.1. My recommendation is to use the body:first-of-type hack, the CSS hack/filter for Safari as a filter for Safari 3+ and Chrome. There should be no reason to target Chrome with the exclusion of Safari 3.1, but if you want to target both, filtering out Safari 3.0, I would try using:
body:nth-of-type(1) p{
color: #333333;
}
Only the Google Chrome and Safari 3.1 browsers will show paragraphs as grey. The logic is:
- web pages only have one body element
- only those two browsers support the pseudo-class of
:nth-of-type() - body:nth-of-type(1) will match the first, and only, body element.
Use it as a predecessor to more specific selectors targeting the body’s children.
Looks great on Chrome!
i’m willing to try it out just to see if it works more efficiently than FireFox… if it’s faster than Firefox and isn’t IE, then i’ll use it
Work’s in Opera 9.52 too :/
try this,
selector:not(:root:link) {css property}
it would be better, support even to
html:not(:root:link)
till now, only safari/chrome support a sequence of simple selectors in the :not() argument such as, h1#header, div.inner, a:hover
:root:link would not exist
This doesn’t work in Chrome.
Hi ben, your’re wrong, this work in chrome wery good
Super a kada zelis da odvojis Safari od Chrome duno si ga jer ne odvaja i ne rednderuju isto. Ja sam imao problem koga ovaj post nije mogao da resi.
all good but it works on opera too so its more of safari/chrome/opera hack
Hey guys, general question are you still hacking for IE6?
It’s “gals”, but yes, i am still hacking for IE6. IE6 still has a fairly large share of the market. The two most common hacks I use are _height: 300px right after min-height: 300px to create the equivalent of min-height for IE6, and using the _background-image: url(not_a_png.gif); to serve a transparent gif instead of a png for background iamges: though you can use PNG-8 on IE6 - it just won’t show the semi-transparent pixels in IE6.
This hack is obsolete with Firefox 3.5, which also supports this pseudo-class. Any new ideas for targeting only Chrome & Safari?