More than 3 years have passed since last update.

【CSS】特定のブラウザに反映させる

Posted at 2021-04-07

特定のブラウザのみにスタイルシートを適用したい時に使用します。
@mixinでまとめて、このコードを呼び出したい時は@includeで書きます。

#IE

style.scss

@mixin IE11 {
  @media all and (-ms-high-contrast: none) {
    @content;
  }
}

↓

style.css

@include IE11 {
ここIEに反映させたいcssコードを書きます。
}

以下も@includeの書き方は同じ。

#Firefox

style.scss

@mixin firefox {
  @-moz-document url-prefix() {
    @content;
 }
}

#Chrome

style.scss

@mixin chrome {
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @content;
  }
}