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