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*/
}
Pingback: lanqy's blog
Pingback: Webdev Weekly #16 | samuli.hakoniemi.net
thanks for the hack
Thanks Estelle!
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
Worked for me, Thanks.