Valid CSS filter targeting Google Chrome and Safari 4
To target only webkit, which includes Google and Safari, encompass all the CSS that you want to use just to target Webkit in the following @media block:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }
#myId {color: #0000FF;}
p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
The rest of this post is outdated.
NOTE: WHAT IS BELOW IS OLD, AND NOW TARGETS Opera, Firefox, Safari and Chrome.
NOTE: This was written in 2008 for Safari 3.1 and the original release of Chrome. This is NO LONGER VALID as a filter, since, like all forward thinking filters, it now targets all the modern browsers that support CSS3 Selectors.
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.
Note: as more browsers become more standards compliant, they will understand this code as well. IE6, IE7, IE8 will never understand it. Newer versions of Safari, Chrome and Firefox will.
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?
Yep, I’m getting the same results in Firefox 3.5. Unfortunate … Is it possible to target only Chrome using javasript? Or is that a path best avoided in your opinion?
I second the above – the hack no longer differnentiates between the latest Firefox (3.5) and Chrome (and Safari). Any ideas for an alternative hack?
@media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari FIX */
#testBox {
background:#c00;
}
}
It works for safari but unfortunately it isn’t valid css …
Hi you are wrong.This is working in IE-6 also
Works for me in Chrome, but not in Safari.
doesn’t work in chrome, but works in the latest firefox and opera 10 =(
strange hack, i can say…
Hi Friends, Can any give the example for the given above. I am little bit confusion
Work’s in Opera 9.5+
works in opera 10, chrome 4.0, Safari 4.0
This now works in Opera, Firefox, Chrome and Safari, so use it as a hack to filter for any CSS3 properties that are well supported in modern browsers, or as a way to exclude FF3.0, FF2, IE6, IE7 and IE8. Useless as a webkit hack at this point.
it’s good and i’m really happy this this code, thanks
Works great! Thanks a lot. Does anyone knows something about chrome padding issue?
Pingback: Cross Browser CSS Fixes, Tools, and Hacks | Ajax Khan
thats a pretty neat hack their ,worked nice for me ,thnx
a lot for saving my time n energy.
no es solo aplicable a chrome, ya que firefox usa el mismo motor por lo tanto en las nuevas versiones de firefox también se ve afectado a igual que safari
this trick works on chrome but it also hampers firefox.
when i tried
.sth {
margin: 10px 10px 10 px 15px;
}
it works on firefox but doesnt work on chrome but after using this trick
body:nth-of-type(1) .sth {
margin: 10px 10px 10px 20px;
}
.. it works on chrome but doesnt work on firefox…. plz tell me how to solve?
@dinesh
You have a space in your declaration before the PX, which may be causing the issue.
It seems like your code snippet is missing a closing curly brace at the end of line 4. Broke my layout in FF4. Adding the curly brace fixed it. The media block does target Chrome and Safari as intended. Sweet! Many thanks.
Works great in newest Chrome. Does not work at all in newest Opera (11.x).
For Chrome only
@media screen and (-webkit-min-device-pixel-ratio:0) {
CODE HERE }
It’s work!!!
THANKS ALOT!!!!!
Ah Finally! Thank you!
As @matt asked Does it work with opera 11.x?
Have got it running smoothly with chrome!
I want hack only for safari and I use this code
@media screen and (-webkit-min-device-pixel-ratio:0){
.opensource {width:1000px;}
}
but it affect on both chrome and safari ….