CSS Hack for Google Chrome and Safari 4

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.

This entry was posted in Best Practices, CSS (including hacks), Web Development. Bookmark the permalink.

33 Responses to CSS Hack for Google Chrome and Safari 4

  1. Dennison Uy says:

    Looks great on Chrome!

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

  3. Lymorn says:

    Work’s in Opera 9.52 too :/

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

  5. Ben says:

    This doesn’t work in Chrome.

  6. knight-rider says:

    Hi ben, your’re wrong, this work in chrome wery good

  7. Stefa says:

    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.

  8. spirytus says:

    all good but it works on opera too so its more of safari/chrome/opera hack

  9. prabhuu says:

    Hey guys, general question are you still hacking for IE6?

  10. Estelle Weyl says:

    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.

  11. Casey Jones says:

    This hack is obsolete with Firefox 3.5, which also supports this pseudo-class. Any new ideas for targeting only Chrome & Safari?

  12. Ali says:

    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?

  13. Congrinero Lewis says:

    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?

  14. Nanculito says:

    @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 …

  15. vijay says:

    Hi you are wrong.This is working in IE-6 also

  16. Cindy says:

    Works for me in Chrome, but not in Safari.

  17. chudo says:

    doesn’t work in chrome, but works in the latest firefox and opera 10 =(

    strange hack, i can say…

  18. Lavakumar says:

    Hi Friends, Can any give the example for the given above. I am little bit confusion

  19. lamar says:

    Work’s in Opera 9.5+

  20. lamar says:

    works in opera 10, chrome 4.0, Safari 4.0

  21. Estelle Weyl says:

    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.

  22. raj says:

    it’s good and i’m really happy this this code, thanks

  23. Sladja says:

    Works great! Thanks a lot. Does anyone knows something about chrome padding issue?

  24. Pingback: Cross Browser CSS Fixes, Tools, and Hacks | Ajax Khan

  25. desphic says:

    thats a pretty neat hack their ,worked nice for me ,thnx
    a lot for saving my time n energy.

  26. LeoBaraldi says:

    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

  27. dinesh lama says:

    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?

  28. Estelle Weyl says:

    @dinesh

    You have a space in your declaration before the PX, which may be causing the issue.

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

  30. Matt says:

    Works great in newest Chrome. Does not work at all in newest Opera (11.x).

  31. eMi--Goth says:

    For Chrome only
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    CODE HERE }

    It’s work!!!

    THANKS ALOT!!!!!

  32. Wink says:

    Ah Finally! Thank you!

    As @matt asked Does it work with opera 11.x?

    Have got it running smoothly with chrome!

  33. Rahul says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>