Sassで未対応ブラウザへのCSS3使用は警告&自動修正!
はてなブックマーク - Sassで未対応ブラウザへのCSS3使用は警告&自動修正!
Pocket

Sass を使用するといかに便利に早く確実に案件をこなせていけるかは、十分に今までの記事でお分かりになられたかと思います。しかし、まだまだSass の力はこんなものではありません。未対応ブラウザに対する処置はどんなに小さい案件でもつきまとう「無駄な」作業です。これをできる限り自動で対処できるようにしたいと思います。
 

@warnで警告を発生させる!

@warn とは、 @warn が実行されたファイル名と行数や引数の内容をコンパイル時に出力してくれるデバッグ用の機能です。ファイル名と行数が一緒に出力されるのでどこで @warn が実行されたか一目瞭然となります。しかもコンパイル時なので何かトラブルが起こった箇所にエラー処理用として設置しておくと何かと便利です。

対応ブラウザを設定するパラメータを用意する

モダンブラウザを全てパラメータ化しています。それだけです。

エラーの出力頻度を設定するパラメータを用意する

シンプルにするため、1つのプロパティのエラー出力頻度しか記述していませんが、本来は全プロパティに対して書きます。ここのパラメータを変更することで警告文を出さないように設定することができます。

エラーの出力処理

エラーの出力レベルと、エラーメッセージを指定すると @warn を用いた警告文がでる @mixin を作成します。

以下のソースのように使用します。

プロパティをオーバーラップする

今まで、 border-radius や box-shadow などをオーバーラップしてきました。オーバーラップした際の記事は以下になります。
 
「Sassで角丸の矩形を超簡単に記述する方法」
「Sassでbox-shadowを@mixin化する – 可変長引数を使おう」
「Sassを使えばbox-shadowのベンダープレフィックスコピペが要らない!」
 
これらを参考に、ベンダープレフィックスの記述をできる限り省略したテクニックを更に上塗りします。ベンダープレフィックスを省略するテクニックは以下の記事を参考にします。
 
「Sassで使用するベンダープレフィックスだけを出力する – @ifを使う」
 
そして出来上がった @mixin のテンプレートは以下のような形になります。

@if と、既に作成済みの対応ブラウザのパラメータを利用しています。 transition は IE6, IE7, IE8, IE9 には対応していません。もちろん、それ以前のブラウザにも対応していません。そのため、 IE6 が対応必要な案件の場合はプロパティを生成せずにエラーを出力します。

対応していないプロパティを使用した場合警告文を発生

ここで発生させるエラーは「IE6対応案件のため、transitionは無効になりました。」という文面にしたいと思います。このエラー内容は複数箇所で使用しそうなので先に@function化してみましょう。 @function については以下の記事を参考にして頂ければと思います。
 
「Sassの@functionの使い方まとめ – プログラマブルな処理は@function」
 
では、テクニックを流用して以下の @function を作ります。

まだまだ荒削りですが、ひたすらに文字列をコピー&ペーストで書くよりは多少マシでしょう。では最終的に、オーバーラップした @mixin は以下になります。

使ってみる

せっかく作ってみましたので、使ってみようと思います。いつも使っていますjsdo.itにお世話になりましょう。今回は IE9 に対応する案件です。パラメータを未対応で良いブラウザとして設定します。

そして実行結果が以下となります。
 

 
Sass を通常通りコンパイルした場合はファイル名や行番号は正しく表示されます。実際に警告文を見たい方は、私のjsdo.itの投稿をForkし、[ Save ]ボタンを押してみて下さい。確認できるかと思います。

CSSハックを用いたテクニックを流用する

警告文を出力して、プロパティを書き出さないように作りました。しかし、CSS 自体で対処できる問題もあります。それは CSS ハックを用いた方法です。以下のソースを見て下さい。

opacity プロパティの場合は、警告文を出さずとも alpha という IE の独自仕様であるプロパティを利用すればカバーできてしまいます。このようなテクニックはどんどん使うべきです。これこそオーバーラップの本領発揮とも言えるでしょう。
 
いかがだったでしょうか。この調子でオーバーラップを進めればいかに強力なライブラリが出来上がるのか実感していただけたかと思います。なお、現在ライブラリは作成中なので時が来れば公開するかと思います。よろしければ使ってやってください。あと出来れば、こっそり CSSハックを教えて頂けたら嬉しいです。(まだ全然知りません) そのような方がいらっしゃれば、Twitterにて連絡を是非お願いします。