Browser-specific CSS for Internet Explorer, Firefox, Chrome, Safari and Edge
Tags: html, css, webdev
Published: 2019-11-02 14:38:39

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] (#internet-explorer)
[Microsoft Edge] (#edge)
[Chrome] (#chrome)
[Safari] (#safari)
[Firefox] (#firefox)
[Opera] (#opera)

####  #Internet Explorer <a name="internet-explorer"></a>

```javascript
/* 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 <a name="edge"></a>
```javascript
@supports (-ms-ime-align:auto) {
    selector {
        property: value;
    }
}
```

#### #Chrome <a name="chrome"></a>
```javascript

/* 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 <a name="safari"></a>
```javascript

/* 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 <a name="firefox"></a>
```javascript
@-moz-document url-prefix() {
  selector {
    property:value;
  }
}

Or

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

```

#### #Opera <a name="opera"></a>
```javascript
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       selector {css rule}
 }

```