DEV Community

krantikr
krantikr

Posted on

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

Enter fullscreen mode Exit fullscreen mode

#Microsoft Edge

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

#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; } 
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

#Firefox

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

Or

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

Enter fullscreen mode Exit fullscreen mode

#Opera

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

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ivanoliveiraweb profile image
Ivan Oliveira

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