CSS Hack to Target Browsers

CSS browser hack

Sometimes we need a css hack to target only a browser like firefox only or chrome only just because sometimes a css works only in firefox, sometimes only works in chrome or webkit browsers like safari. This rule is really useful to target a browser if we want to show only on firefox or in other browser like chrome only.

CSS Hack to Target Safari & Chrome

1
2
3
4
5
6
7
8
9
10
11
12
/**
* This hack targets the Webkit browser engine
* which includes Safari and Chrome.
*/
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    div.class{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
    }
}

CSS Hack to Target Firefox

1
2
3
4
5
6
7
8
9
10
11
@-moz-document url-prefix(){
    h1, h2, h3, h4, h5, h6 {
    color:black;
    }
 
    div.class {
    color: #fff;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 30px;
    }
}

 

Shares