How to Apply CSS-HACKS for Different Browsers (Chrome, Firefox and Internet Explorer)

Wagner NULL

4.94/5 (6 votes)

Feb 1, 2017

CPOL

49392

This trick is about how to apply specific styles CSS for browsers individually.

Introduction

In this article, we do specific CSS rules for different browsers.

Development

Here is an example of the simple document HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of CSS Hacks for CHROME and INTERNET EXPLORER</title>
<link rel="stylesheet" type="text/css" href="hacks.css">
<style>
    .block{
        height: 400px;
        border: 1px solid #000000;
        width: 400px;
        
    }
</style>
</head>

<body>
<div class="block"></div>
</body>

</html>

Now, we will do apply styles CSS for div with attribute 'class' is equivalent to 'block'.

Styles for INTERNET EXPLORER (Version > 10 and Microsoft Edge):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
  .block{
      background-color: #00FF00;
  }
}

Now, test in Internet Explorer:

Example using IE

Styles for GOOGLE CHROME (Tested in version 55.0.2883.87):

@media screen and (-webkit-min-device-pixel-ratio:0){
  .block{
      background-color: #FF0000;
  }  
}

Now, test in GOOGLE CHROME:

Example using CHROME

Styles for Mozilla Firefox (51.0.1):

@-moz-document url-prefix() {
.block{
      background-color: #0000FF;
  }
}

Test in MOZILLA FIREFOX:

Example using FIREFOX

Thank you for reading this trick.

Conclusion

We made styles for different browsers in the same element HTML. This trick is useful for those who must apply CSS rules for specific browsers.