WordPress初心者の方も、愛用者の方も、
楽しく学べるフォローサイト!

WP-Master.club ヘッダーロゴ

ベンダープレフィックスって面倒だよね!ということで省略ツールをご紹介。

ベンダープレフィックスとは

CSS3がまだ今ほど普及してない時代に、各ブラウザ(Chrome、Firefox、Safari、IE、Operaなど)がそれぞれに先行してCSS3を実装ていました。この際に、1つのCSSを実装するのに、各ブラウザに対して何行もプレフィックスを付けて書かなければいけない状況が発生しています。こんな感じ。

ちなみにプレフィックスとは、「接頭辞」という意味です。この5行は、下記の表を見るとそれぞれの意味合いが分かります。

プレフィックス ブラウザ
-webkit Chrome、Safari
-moz Firefox
-ms IE
-o Opera
※プレフィックスなしも記入する

つまり、例えばtransitionというCSS3からのプロパティを設定するのに、各ブラウザに対応するために5行も書いています。手間は5倍、ミスタイプも増える可能性ありで、何とかならんのか・・・という感情が沸々と湧いてきます。

-prefix-freeの設定方法

そこで今回ご紹介するのが「-prefix-free」(https://leaverou.github.io/prefixfree/

CSS3のベンダープレフィックスを省略するツール bender-prefix

『CSSプレフィックス地獄から抜け出せ!』と書いてありますね^^

その触れ込みのとおり、このツールを使うと、各ベンダープレフィックスを省略することができます。

実装方法は簡単。

上記サイトから「prexfree.min.js」というファイルをダウンロードし、ライブラリ用のフォルダ(例:lib)に入れます。

そして、<head>~</head>内でスクリプトファイルとして読み込むだけです。

これでOK。Prefix地獄から抜け出せます。

まとめ

ブラウザの方もCSS3への対応がかなり進んできており、普通にベンダープレフィックスなしでいけるプロパティも出てきました。(例えば角丸のborder-radiusなど)
(対応状況を調べるにはこちら http://caniuse.com/

しかし、まだ対応していないプロパティも多いため、今回ご紹介したツールを付けておくのが無難と言えるでしょう。