Browser-specific CSS for Internet Explorer, Firefox, Chrome, Safari and Edge

If you are working with HTML and CSS then definitely you would have faced lots of browser-specific issues in CSS. I have also faced similar kind of issues at times and sometimes it's really tough to fix these issues. We can fix some of these issues by writing browser-specific CSS.
I would personally recommend avoiding the use of browser-specific CSS because it depends on the browser and their versions, it might fail with the other versions of the same browser.

Table Of Contents

Internet Explorer
Microsoft Edge
Chrome
Safari
Firefox
Opera

#Internet Explorer

/* Using conditional comments with stylesheet */
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

/* Using conditional comments with head section CSS */
<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

/* Using conditional comments with HTML elements */
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

Using media query
/*  IE10+ */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

/*  IE6,7,9,10  */
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

/*  IE6,7  */
 @media screen\9 {
  selector { property:value; }
 }

 /* IE8  */
 @media \0screen {
  selector { property:value; }
 }

/*  IE6,7,8  */
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 /* IE9,10  */
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

#Microsoft Edge

@supports (-ms-ime-align:auto) {
    selector {
        property: value;
    }
}

#Chrome

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    selector{ property:value; } 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  selector { -chrome-:only (; 
     property:value;
  );} 
}

/* Chrome, Safari, and also the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  selector { property:value; } 
}

#Safari

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    selector { 
        property:value; 
    }
}}

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
    selector { 
        property:value; 
    }
}}

/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
@media {
    selector { 
        property:value;
    }
}}

#Firefox

@-moz-document url-prefix() {
  selector {
    property:value;
  }
}

Or

/* By useing @supports */
 @supports (-moz-appearance:none) {
    selector { property:value; } 
}

#Opera

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       selector {css rule}
 }

Comments

[Ivan Oliveira]

Helped me a lot, I needed a CSS rule specific to the Safari browser.