Prefix free CSS3のベンダープレフィックス自働付与するすご～いスクリプト
CSS3のベンダープレフィックス自働付与するPrefix freeっていうスクリプトがすごい
css3のベンダープレフィックスってめんどうですよね
え？ベンダープレフィックスが何か？ですって。アレですよ、そこのお兄さん お姉さん。
ベンダープレフィックスがしがし書いたCSS3のボタンのcss例
たとえば以下は
css3 Button Generatorで作成したcss3のグラデーションとか角丸とかベンダープレフィックスガシガシ書いたcss3のコード。ちょっとグラデーションしたり、角を丸くするだけで超絶ながいソースコードになりますね。
先頭に付ける-moz-や-webkit-など、各ブラウザに対応させるために記述するこれがベンダープレフィックスです。
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient( top, #42aaff 0%, #003366);
background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #003366;
-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5);
webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5);
box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3);
}
もちろん、今や定番のSassでベンダープレフィックスを付与する方法もありますが、Prefix freeというJavascriptファイルを好きなところに読み込むだけでベンダープレフィックスを付与する方法も大変便利です。
-prefix-free
使い方
使い方はとっても簡単。ベンダープレフィックスをしたいページにダウンロードしたprefixfree.min.jsを読み込むだけ。特に他にプラグインやライブラリも必要なく、スクリプトもわずか２KBです。
読み込む場所についても 配布元のサイトでanywhere in your page.
と言っているので本当にどこでもよさそうです。
このプラグインを使うとCSS3の書き方はこうなる
たとえばシャドウ。非常にシンプルですね。
box-shadow: 5px 5px 10px -5px black;
制約事項
- import cssには非対応
- ChromeやOperaブラウザではローカルでは使えないみたいです
Prefixの処理を除外したい時
自働でプレフィックスの処理をしてほしくないスタイルシートのファイルがある場合は以下のようにすればいいみたいです。
jQueryのcss()メソッドでも対応させたい時
jQueryのcss()メソッドでも対応させたい場合があると思います。その際は以下のjQueryプラグインを別途呼び出す必要があるそうです。
私も次回フロントエンド周りをやる際にはぜひ使いたいと思います！