Safariだけに効くCSSハック【Safariハック・Scss記法も】

WEBサイト開発時に Mac の Safari でだけ表示が崩れて困る、というケースはちょくちょくありますが、そういう場合に使える CSS の Safari 向けハックと、Scss 形式での書き方をメモしておきます。

ちなみに、この件で検索するとまず最初に見つかるであろう「::i-block-chrome」を使った Safari 向けハックは、手元の環境で検証してみたところ Safari 7.0.4 では効かない事が分かったので、それとは違う書き方を探してみました。

というわけで、Safari のみに CSS を適用する Safari 向けハックはこんな感じになりました。

// Hack for Safari 7.1-8.0
_::-webkit-full-page-media, _:future, :root .css-selector {
	css-property: css-value;
}

// Hack for Safari 6.1-7.0
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-color-index:0) {
	.css-selector {
		(; css-property: css-value ;)
	}
}

これをこのまま SCSS コンパイラに通すと Safari 6.1～7.0 向けハックの方はエラーになってしまうので、Sass の Interpolation #{} を使ってこんな感じに書き換えてみました。

// Hack for Safari 6.1-7.0
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-color-index:0) {
	.css-selsctor {
		#{"(; "}css-property: css-value#{" ;)"}
	}
}

余談ですが、Sass の文法確認には SassMeister が便利です。

• SassMeister | The Sass Playground!

この他、メディアクエリ「@media」が2回も出てくるせいで Sass コンパイラではエラーになってしまいますが、CSS を直書きしているなら、次の書き方でも Safari 向けハックになるようです。（こちらは動作未確認）

/* Safari 6.1-8.0 (6.1+) */

@media screen and (min-color-index:0)
   and(-webkit-min-device-pixel-ratio:0) { @media {
    .css-selector { css-property:css-value; }
}}

本当はこちらが Scss でも使えると良いのですが、僕には頑張っても書き方が分かりませんでした。分かる方がみえたらコメント欄で教えていただきたいです。

あと、Safari 7.0.4 では動かなかったのですが、いちおう、Safari 向けのCSSハックで検索するとまず最初に出てくるであろう有名な方法も、メモとしてここに残しておきます。

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .css-selector {
		css-property: css-value;
	}
}

これを見ていると、Chrome と Safari の判別が苦労するポイントなんですね…

参考情報：

• Chrome and Safari CSS Hacks Collection (Includes Opera) | Jeff Clayton