CSS Hack to Target Safari & Chrome

« Back To Archive

14

Problem Statement:

It is inevitable that there will be situations where you need a CSS rule to target a specific browser. This hack targets Safari and Chrome (webkit browsers) and works with Safari 5.1.2 and Chrome 17.0.963.56 as of March 03, 2012.

Dependencies:

A webkit browser (Safari or Chrome)

/**
 * This hack targets the Webkit browser engine
 * which includes Safari and Chrome.
 */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    div.foo {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
}
 
  • Khushboo Ashish Jadhav

    Thanks, it’s working !!!

  • http://iconify.it Scott Lewis

    Ok, but did you really need to post “It’s not working” three times? And by the way, “It’s not working” isn’t exactly useful information. I don’t know what you expect me to do with that. I know for a fact that the hack works with the version and build of Safari I explicitly mention in the article. Did you verify that you are using that version of Safari? (I’m guessing you did not). So I guess I can say your comment isn’t exactly useful either.

    • http://canarias-web4you.com/ Matthias E.

      i can promise you… it works perfect in chrome Version 23.0.1271.64 m

      • http://iconify.it Scott Lewis

        Thanks, Mathias.

    • http://iconify.it Scott Lewis

      @Zeeshan_Datalogy:disqus I must have been having a very bad day when I posted this. It’s not exactly my most shining moment. Everything I said was correct, but I could have been a lot more respectful in saying it. I always face up to my mistakes, so I apologize for my lack of civility. Please don’t hold it against me. I’m usually a pretty nice guy who lost my cool, probably about something completely unrelated to your post. Thanks.

  • Warren Laidler

    Perfect! Thanks.

  • lakesidetechies

    Worked like a breeze…

  • http://www.facebook.com/raghib.suleman Raghib Suleman

    Thanks for this post its useful :)

  • http://profile.yahoo.com/QYOOSUZJTHVAHGZ7UZ6BHONRNQ honey_beequeen

    Hi there

    I tried this it worked in one class
     @media screen and (-webkit-min-device-pixel-ratio:0) {.footer-right{
    margin:0px; overflow:hidden;float:right;width:200px;padding:0px;}}

    but i tried adding anchor properties for same class but it didnt work..like this..
    @media
    screen and (-webkit-min-device-pixel-ratio:0) {.footer-right a{
    width:24px; height:24px; display:inline; position:relative; margin:0px
    50px;}}

    also i tried this way…but it didnt work
    @media screen and (-webkit-min-device-pixel-ratio:0) {.footer-right{
    margin:0px; overflow:hidden;float:right;width:200px;padding:0px;} .footer-right a{
    width:24px; height:24px; display:inline; position:relative; margin:0px
    50px;}}

    Please provide me a solution for this…

    • http://iconify.it Scott Lewis

      Weird. Your syntax looks correct. Are you certain you have an “.footer-right a” element that matches the query? The only thing I can think of is if there are no matches for that selector or if there is another rule that is more specific and therefor over-rides this one. You might try adding an ID to one of the elements it should match, then create a matching style rule to test to make sure the media query works. In this way you can narrow down the possible causes for it not working. You could also try adding the !important command at the end of the rules to see if they work. If, after adding the !important command, the rules do work, then the problem is definitely one of specificity. I hope this helps. Post back and let me know.

  • http://www.facebook.com/fconijn Frank Conijn

    Even works in Chrome 10! Thanks! 

    • http://iconify.it Scott Lewis

      Excellent. Thanks for letting me know.

  • Max

    where do i put this code ?

  • http://twitter.com/joeslife Joe S.

    the good stuff…