メディアクエリを含むSCSSで、CSSハックがすんなり使えなかったのでメモ。
(CSS-Grid を IE10/11 に対応させようとした時にハマった)
まずは解決策
- @media を使ったCSSハックは使えないので、それ以外のものを採用する
- `unquote('') とインターポレーションを使う
- CSSハックの記述は各セレクタごとに必要 (入れ子構造は使えない)
- メディアクエリをブロック中に入れるのはOK
以下、IE10/11 用のCSSハックの記述方法
#{unquote('_:-ms-input-placeholder, :root')} セレクタ1 {
// スタイリング
}
#{unquote('_:-ms-input-placeholder, :root')} セレクタ2 {
// スタイリング
}
解説
IE11のみ読み込ませる CSS Hack
IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEB
CSSハックの記述はここを参考にさせてもらった。
今回は、IE10/IE11用のCSSハックを適用したい。
CSSハックは、以下の２種類に分類される。
- @media を使用したもの
- _:-ms- で始まりカンマを含むセレクタを使用するもの
@media を含むコード には、@media を使うハックは使えない
@media を含まないコードなら@media を使ったCSSハックが問題なく使える。しかし、@mediaを含むコードの場合、@media を入れ子にすると、入れ子にした箇所が変換後に統合されてしまい、その箇所はCSSハックにならなくなる。
// 変換前
@media screen\0 {
.selector {
property: value;
}
@media (max-width: 768px) {
.selector {
property: value;
}
}
}
// 変換後
@media screen\0 {
.selector {
property: value;
}
}
// CSSハックが効かない
@media screen\0 and (max-width: 768px) {
.selector {
property: value;
}
}
よって、@media を含むコードには @media を使うハックは使えない。
@media を含まないCSSハックを採用する。今回は IE10/11に対応する以下コードを使う。
(※ただし、このままでは SCSSでは使えない)
_:-ms-input-placeholder, :root セレクタ {
// スタイリング
}
セレクタ部分にカンマを含む場合、変換で分割されてしまう
上記コードは、Sass 本来の挙動で以下のように変換される
// NG、変換後
_:-ms-input-placeholder セレクタ {
// スタイリング
}
:root セレクタ {
// スタイリング
}
これだともちろん CSSハックにならない。
カンマを含むセレクタ部をそのまま出力させるのに、unquote('') を使う必要がある。
さらにセレクタ部分で使うためにインターポレーションにする(そのまま使うとエラーになる)。
結果、以下のようなコードとなる
#{unquote('_:-ms-input-placeholder, :root')} セレクタ1 {
// スタイリング
}
ネストでCSSハック部分をまとめることはできない
このようにネストで書けたら見通しが良いのだが、それはできない。
// NG
#{unquote('_:-ms-input-placeholder, :root')} {
セレクタ1 {
// スタイリング
}
セレクタ2 {
// スタイリング
}
}
前段落の例のように、カンマで複数セレクタ記述と解され変換で分割される。
なので、一つづつ CSSハックを書いてやる必要がある。
// OK (= 冒頭のコード)
#{unquote('_:-ms-input-placeholder, :root')} セレクタ1 {
// スタイリング
}
#{unquote('_:-ms-input-placeholder, :root')} セレクタ2 {
// スタイリング
}