Wednesday, 7 December 2011

CSS Only for Webkit

What? Why would you do that? Well, sometimes cross-browser issues can be a pain, and fixing an issue in one browser could mean causing issues in other browsers. This is the time when you should consider creating CSS only for a certain browser, in my case Chrome and Safari.

Here's what I've done (thanks to this blog):
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #my_id .my_form_row.my_embed_label input[type=password] {
        float: left;
    }
}

It is basically a media query supported by CSS3, which says that for "screen" media type that supports webkit, use the CSS code within the bracket. I would only use this technique if you run out of options, since this is kind of a hack for webkit browsers only.
blog comments powered by Disqus