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

Wagner NULL

4.94/5 (6 votes)

1 Feb 2017CPOL

49.4K

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:

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):

CSS

@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):

CSS

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

Now, test in GOOGLE CHROME:

Styles for Mozilla Firefox (51.0.1):

HTML

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

Test in MOZILLA 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)