ifMozilla ifSafari とか

CSSもブラウザ別に処理させたいこともきっとあります。

ifIE.scss

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

ifEdgeHTML.scss

@mixin ifEdgeHTML() {
	@supports (-ms-ime-align: auto) {
		@content;
	}
}

ifedge.scss

@mixin ifEdgeHTML() {
	@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
		@content;
	}
}

ifwebkit.scss

/* Webkit Chrome, Opera, Safari */
@mixin ifWebkit() {
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		@content;
	}
}

ifchrome.scss

/* Chrome, Opera */
@mixin ifChrome() {
	@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
		@content;
    }
}

ifmozilla.scss

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

ifsafari.scss

/* Safari まだ未完成 */
@mixin ifSafari() {
	@supports (paint-order: fill) and (-webkit-marquee-speed: 0) {
		@content;
	}
}

ifsafari 以外は動きます

メジャーなブラウザだけをサポートするという前提で
safari用のCSSを記述するには、以下のようにします

// @include ifSafari() { //コメントアウトが書いてあることが大事
     safariのCSS
//}

   @include ifMozilla() {
     mozillaのCSS
   }

   @include ifwebkit() {
     webkitのCSS
   }

   @include ifEdgeHTML() {
     edgeHTMLのCSS
   }