Useful CSS hacks for specific browsers

browser specific CSS hack codes

IE-10

// eg: margin-top:10px\9;

CSS hack for IE-11

// eg: @media all and (-ms-high-contrast:none){ }

CSS hack for Chrome

// eg: @media screen and (-webkit-min-device-pixel-ratio:0) { }

CSS hack for Safari


@media screen and (-webkit-min-device-pixel-ratio:0) {
   ::i-block-chrome, .footIcon{
     width:25% !important;
} 
}

Adding browser specific prefix:

Prefix for Mozilla

// eg: -moz-transform: rotate(90deg);


@-moz-document url-prefix() {
  .logo {
     width:300px;
   }
}

CSS hack for Microsoft Edge browser


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

Prefix for Chrome and Safari

// eg: -webkit-transform: rotate(90deg);

Prefix for IE

// eg: -ms-transform: rotate(90deg);

Prefix for Opera

// eg: -o-transform: rotate(90deg);

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *