この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
SCSS使っていますか？
とても便利なSCSSですが、大きな疑問があります。
Internet Explorer（以下IE）への対応です。
CSS3が少しずつ使えるようになってきている昨今、多くのデメリットがあるにしてもエンドユーザーにIE6利用者が多ければ対応するのが僕たちコーダーです。
SCSSだとIEハックがうまく使えないかもしれない！
という疑問を解決するために、確実に使えるハックを試しながら探してみました。
先日書いたこちらの記事も合わせてどうぞ：
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】
サンプルファイル
サンプルファイルはこちらからダウンロードしてください。
https://github.com/nonakaryuichi/scss_css_hacks
また、動作確認用のHTMLとCSSも用意したのでIEやIETesterなどで確認してみてください。
http://nonakaryuichi.github.com/scss_css_hacks/
前提条件
まず、CSSファイルを極力軽量化するために以下の設定とします。
- エクスクラメーション・マーク「!」付きのコメント以外のすべてのコメントを削除する（Environment: Production）
- 無駄な改行や空白を削除する（Output Style: Compressed）
SCSSのエクスクラメーション・マーク「!」付きのコメントとは
SCSSには主に3つのコメント記述方法があります。
- 単一行コメント
- 複数行コメント
- エクスクラメーション・マーク「!」付きコメント
//単一行コメント
/*
複数行コメント
*/
/*!
エクスクラメーション・マーク「!」付きコメント
*/コンパイルしてみると・・・
付けたエクスクラメーション・マーク「!」が消えていますが、コメントはしっかり残っています。
/*
エクスクラメーション・マーク「!」付きコメント
*/注意点
エクスクラメーション・マークを付ければコメント系のハックも使える！と思ってしまいますが実は注意点があります。
コメントの場所によってエクスクラメーション・マークを付けても削除される場合があります。
- valueの前のコメントはエクスクラメーションマークを付けたコメントでも削除される。
- セレクタ部分に入れた場合も削除される。
- propertyの後ろに入れたコメント削除されない。
それでは、実際に試した使えるCSSハックをIEのバージョン別に紹介していきます。
SCSSで使えるIE6向けCSSハック
Star Hack
/*!
* Star Hack
* target: IE6
* Validator: Valid
*/
#starHack
{
background: #ccc;
}
* html #starHack
{
background: #cc0000;
}UnderScore Hack
/*!
* UnderScore Hack
* target: IE6
* Validator: Error
*/
#underScoreHack
{
background: #ccc;
_background: #cc0000;
}Star2 Hack
/*!
* Star2 Hack
* target: IE6
* Validator: Error
*/
#star2Hack
{
background: #ccc;
}
* html*#star2Hack
{
background: #cc0000;
}Important Hack
/*!
* Important Hack
* target: IE6
* Validator: Valid
*/
#importantHack
{
background: #ccc!important;
background: #cc0000;
}The Owen Hack
/*!
* The Owen Hack
* target: IE6
* Validator: Valid
*/
#theOwenHack
{
background: #cc0000;
}
head:first-child+body #theOwenHack
{
background: #ccc;
}IE6 Selector Hack
/*!
* IE6 Selector Hack
* target: IE6
* Validator: Valid
*/
#ie6SelectorHack
{
background: #cc0000;
}
html>body #ie6SelectorHack
{
background: #ccc;
}
html+body #ie6SelectorHack
{
background: #ccc;
}Attr Selector Hack(除外系)
/*!
* Attr Selector Hack(Exclusion)
* target: IE6
* Validator: Success
*/
#attrSelectorHack
{
background: #cc0000;
}
html[xmlns]>/**/body #attrSelectorHack
{
background: #ccc;
}
html[lang='\ja'] #attrSelectorHack
{
background: #ccc;
}SCSSで使えるIE6,7向けCSSハック
Hash Hack
/*!
* Hash Hack
* target: IE 6,7
* Validator: Error
*/
#hashHack
{
background: #ccc;
#background: #cc0000;
}Asterisk Hack
/*!
* Asterisk Hack
* target: IE 6,7
* Validator: Error
*/
#asteriskHack
{
background: #ccc;
*background: #cc0000;
}IE67 Star Hack
/*!
* IE67 Star Hack
* target: IE 6,7
* Validator: Error
*/
#ie67StarkHack
{
background: #ccc;
}
html*#ie67StarHack
{
background: #cc0000;
}SCSSで使えるIE7向けCSSハック
Star Plus Hack
/*!
* Star Plus Hack
* target: IE7
* Validator: Valid
*/
#starPlusHack
{
background: #ccc;
}
*+html #starPlusHack
{
background: #cc0000;
}IE7 Star Hack
/*!
* IE7 Star Hack
* target: IE7
* Validator: Valid
*/
#ie7StarHack
{
background: #ccc;
}
*:first-child+html #ie7StarHack
{
background: #cc0000;
}SCSSで使えるIE6,7,8向けCSSハック
Selector Hack(除外系)
/*!
* Selector Hack(Exclusion)
* target: IE6,7,8
* Validator: Valid
*/
#selectorHack
{
background: #cc0000;
}
:root #selectorHack
{
background: #ccc;
}SCSSで使えるIE6,7,8,9向けCSSハック
BackSlash 9 Hack
/*!
* BackSlash 9 Hack
* target: IE6,7,8,9
* Validator:
*/
#backslash9Hack
{
background: #ccc;
background: #cc0000\9;
}SCSSで使えるIE9向けCSSハック
IE9 BackSlash 9 Hack
/*!
* IE9 BackSlash 9 Hack
* target: IE9
* Validator:
*/
#ie9Backslash9Hack
{
background: #ccc;
}
:not(:target) #ie9Backslash9Hack
{
background: #cc0000\9;
}まとめ
ここで紹介したハックは動作確認もしたのでSCSS, Compassを利用しても問題なく使えるCSSハックです。
その他にもオススメのSCSS対応CSSハックがあればコメントで教えて頂けるとうれしいです。
これで心配せずにSCSSを使ってIE対応できますね。