Hack for Webkit: Filter for Chrome and Safari

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);}
}

Put the above code anywhere in your CSS file. The other browsers will read the rest, but only webkit reads the -webkit-min-device-pixel-ratio of the declaration, and therefore only Chrome and Safari will abide by the rules in the CSS code block.

The important stuff to learn:

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /* put webkit CSS here*/
}


This entry was posted in Browsers, CSS (including hacks). Bookmark the permalink.

6 Responses to Hack for Webkit: Filter for Chrome and Safari

  1. Pingback: lanqy's blog

  2. Pingback: Webdev Weekly #16 | samuli.hakoniemi.net

  3. stefan says:

    thanks for the hack

  4. Andrew says:

    Thanks Estelle!

  5. jazz009 says:

    Thanks Estelle, saved my life, I was close to commit suicide trying to fix for hours a problem that appears only on Chrome and Safari.
    Cheers

  6. Jan Peter K├Ânig says:

    Worked for me, Thanks.

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>