css ブラウザハック

Posted 2021-05-13

【ie】
.sample{
  background: #cccccc\9; /* IE10以下 */
}

@media all and (-ms-high-contrast: none){
  .sample{
    background: #cccccc; /* IE10以上 */
  }
}

【Firefox】
@-moz-document url-prefix(){
  .sample{
    background: #cccccc;
  }
}

【Chrome】
@media screen and (-webkit-min-device-pixel-ratio:0){
  .sample{
    background: #cccccc;
  }
}

【Safari】
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .sample {
        background-color: cornflowerblue;
    }
}