Browser specific styling

How to apply style to specific browsers only?

To apply style for Mozilla browser,

@-moz-document url-prefix(){
    body {
        color: #000;
    }
    div{
       margin:-4px;
    }
}

To apply style for safari and chrome,

Sometimes in safari, its default styles may appear. So to override that, we can use this method.

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        color: #90f;
    }
}

Use this styling only in necessary conditions.

Leave a comment

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