Source Mapsに対応したAutoprefixer

昨年秋頃からAutoprefixerIssue #37をチェックしていたのですが、2013年12月21日にAutoprefixer 1.0がリリースされ、Source Maps(ソースマップ)に対応しました。このバージョンアップにより、Sass 3.3.0等でコンパイルして出力したSource Mapsを読み込み、よしなに調整して出力してくれるようにもなり、「Autoprefixerを通すことでマッピングがずれてしまう」という問題は解消されました。

Autoprefixerの通し方はいくつかありますが、普段の業務で使うことを考えると、まず思いつくのはGruntを使う方法でしょうか。Gruntプラグインであるgrunt-autoprefixerがAutoprefixerに追従して2013年12月25日に0.6にバージョンアップし、Source Mapsに対応しました。編集の都度、CSSをAutoprefixerに通してブラウザで表示を確認することが容易に可能となります。

grunt-autoprefixerの設定方法

設定は簡単で、autoprefixerタスクのOptions内にmap: trueを指定するだけです。この設定で、AutoprefixerはSassが出力したSource Mapsを読み込み、それをベースにしたSource Mapsを出力してくれます。

  autoprefixer:
    options:
      map: true
    dist:
      src: '../htdocs/common/css/basic.css' 

sassやwatchタスクとの連携は、GitHubに置いているgenerator-skywardのGruntfile.coffeeをご覧下さい。

動作検証

CSSにベンダープリフィックスが付いたプロパティが並んでいますが、Chrome Developer Toolsで.btn-01 a:hoverの記述位置を見ると、Sassファイルの41行目に記述してあると表示されており、正しい位置が示されています。

※検証用に適当に書いたので、細かいことはツッコミなしでお願いしたく。この他にも、ベンダープリフィックスが不要なborder-radiusを、わざとベンダープリフィックス付きで書いたりしてテストをしました。

Sass(.scss)ファイル
ベンダープリフィックス付けず記述しているSassファイルの画面
コンパイル後Autoprefixerを通したCSS
コンパイル後Autoprefixerを通して、ベンダープリフィックスが付いたプロパティも存在するCSSファイルの画面
Chrome Developer Toolsの表示
Chrome Developer Toolsで、ベンダープリフィックスが付いたプロパティを含むセレクタの後に定義されたスタイルを確認している画面

この例だとSource Maps対応の効果が分かりにくいかもしれませんが、古いgrunt-autoprefixerと結果を比較してみるときっとお分かりいただけると思います。少しの記述でもわずかにマッピングがずれていきますので。

補足

Autoprefixerを使い始めてからは、ベンダープリフィックスを付けないでプロパティを記述し、Autoprefixerに必要に応じてベンダープリフィックスを付けてもらう方式をとっています。Compassのミックスインは古いので...。

Sass 3.3.0はまだ正式にリリースされていないため、gem install sass --preでインストールします。

Autoprefixerをご存じない方は、2013年末にスライドの研究・練習で書いた「Autoprefixerの紹介」(草稿)や、Autoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentaryを参考にしてみて下さい。

ちなみに、以前からSource Mapsを出力しているのですが、Chrome Developer ToolsでSassファイルの行数を見たことがほとんどなく...。大規模なサイトだと役立つ日が来るのでしょうか。

この記事のタグ