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

Wagner NULL

Rate me:

4.94/5 (6 votes)

1 Feb 2017CPOL

48.7K

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:

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)

Written By

Wagner NULL

Brazil

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

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

Introduction

Development

Conclusion

License

Comments and Discussions