韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

AutoPrefixerを使ってみました

昨日、Flexboxのハンズオンに参加し、Flexboxについてしっかり勉強してきました。
私も、一度ピアノ教室のホームページを作った時に、タブメニューのタブ部分を可変にしたくて、flexboxを使ったことがある程度で、ちゃんと知らなかったので、すごく勉強になりました。
IE9以外では普通に使えると聞いて、もっと利用しようと思いました。

その中で、自動でベンダープレフィックスを付与してくれる、AutoPrefixerの話が出ました。
GulpでAutoPrefixerを使う方法を紹介していただいたのですが、私はGulpの知識が全くないので勉強しなくちゃ・・・と思っていたところ、Sublime Text2にはプラグインがあると聞いて、早速使ってみました。(私は普段エディターはSublime Text2を使っているので、ラッキーです!)

インストール方法や使い方は、こちらのサイトに書いてあったので、参考にさせていただきました。
「Sublime Textで自動的にベンダープレフィックスを追加してくれるAutoPrefixerが便利」

いつもは、SassとCompassを使っていて、Compassの@includeでborder-radiusとかを書いていたのですが、試しにborder-radiusにAutoPrefixerを使ったら、何も反応しない!? あれ?ちゃんとインストールされてるのかな?と思って、 border-radiusを調べたら、とっくにベンダープレフィックスは不要だったんですね。今まで無駄なコードを書いていました。
(ちなみに、box-shadowもベンダープレフィックスいらないんですね。)

でも、試しにdisplay:flex;をAutoPrefixerにかけたら、ちゃんとベンダープレフィックスが付与されました!!
すごく便利!!!!
無駄なコードを書くこともないし、いちいち調べる手間もかからないし、本当に便利です。

今度はGulpも勉強してみようと思います。

スポンサーリンク