ベンダープレフィックスって面倒だよね!ということで省略ツールをご紹介。楽しく学べるフォローサイト!ベンダープレフィックスって面倒だよね!ということで省略ツールをご紹介。まとめベンダープレフィックスとはCSS3がまだ今ほど普及してない時代に、各ブラウザ(Chrome、Firefox、Safari、IE、Operaなど)がそれぞれに先行してCSS3を実装ていました。この際に、1つのCSSを実装するのに、各ブラウザに対して何行もプレフィックスを付けて書かなければいけない状況が発生しています。ease-in-out;}ちなみにプレフィックスとは、「接頭辞」という意味です。この5行は、下記の表を見るとそれぞれの意味合いが分かります。※プレフィックスなしも記入するつまり、例えばtransitionというCSS3からのプロパティを設定するのに、各ブラウザに対応するために5行も書いています。手間は5倍、ミスタイプも増える可能性ありで、何とかならんのか・・・という感情が沸々と湧いてきます。-prefix-freeの設定方法そこで今回ご紹介するのが「-prefix-free」(https://leaverou.github.io/prefixfree/)『CSSプレフィックス地獄から抜け出せ!』と書いてありますね^^その触れ込みのとおり、このツールを使うと、各ベンダープレフィックスを省略することができます。上記サイトから「prexfree.min.js」というファイルをダウンロードし、ライブラリ用のフォルダ(例:lib)に入れます。<head>~</head>内でスクリプトファイルとして読み込むだけです。src="lib/prexfree.min.js"></script>~</head>これでOK。Prefix地獄から抜け出せます。まとめブラウザの方もCSS3への対応がかなり進んできており、普通にベンダープレフィックスなしでいけるプロパティも出てきました。http://caniuse.com/)しかし、まだ対応していないプロパティも多いため、今回ご紹介したツールを付けておくのが無難と言えるでしょう。最近見慣れない疑似クラスと疑似要素が多くなってきたからこの際まとめてみた。なつっこいがんばり屋さん・・・なゾウです。【好きな食べ物】ナポリタンスパゲッティ【得意分野】Web関連全般。最近は更にWordPressを知るために、オライリー社の書籍を片手に研究中。