【ハウツー】クリエイターのためのWebテク講座 -煩わしいベンダープリフィックスからの解放。 | クリエイティブ

【ハウツー】

クリエイターのためのWebテク講座 -煩わしいベンダープリフィックスからの解放。

　 [2012/07/09]

印刷

前回、W3Cで未だ確定していないプロパティを、各ブラウザベンダーが独自に実装したプロパティに対して「ベンダープリフィックス」を記述する必要があると解説しました。

しかし、いちいち同じ記述をブラウザ毎に記述するのも面倒ですし、コードの可読性も悪くなります。

そこで、ベンダープリフィックスを記述しなくて済むようになる便利なライブラリ、「prefixfree.js」を紹介します。

「prefixfree.js」を使うと、アニメーションのプロパティだけでなく、シャドウやグラデーションなど、ベンダープリフィックスが必要なプロパティ全てで有効になります。

「prefixfree.js」の導入

サンプルを見る

今回は、オブジェクトの位置を移動するというアニメーションを付けてみました。

このサンプルは、CSS3の「transitionプロパティ」に対応した「Firefox」、「Chrome」、「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。

早速記述を見てみます。

<style>
#box
{
    cursor:pointer;

    width:80px;
    height:80px;
    background:#CCC;
    color:#FFFFFF;
    overflow:hidden;

    transition-property:transform;
    transition-duration:500ms;
    transition-timing-function:ease-out;
}
#box p
{
    margin:0;
    padding-top:30px;
    text-align:center;
}
</style>
</head>
<body>
    <div id="box">
        <p>クリック</p>
    </div>
</body>
</html>

ご覧のとおり、ベンダープリフィックスは、一切記述されていません。前回の記述より、かなりすっきりしましたね。これを実現してくれるのが、「prefixfree.js」です。

では早速導入したいと思います。

Prefix free: Break free from CSS vendor prefix hell!

上記サイトにアクセスし、左上のボタン「Only 2KB gzipped」から、ソースをダウンロードします。次に、メニューの「Plugins」に入り、下の方の「prefixfree.jquery.js」をダウンロードします。

この、「prefixfree.jquery.js」は何をするのかというと、「prefixfree.js」は、ページのロード時にはベンダープリフィックスを補完してくれますが、jQuery等でに動的にCSSを書き換える場合などでは補完できません。

そういう訳で、この講座ではｊQueryを標準的に使用しているので、「prefixfree.jquery.js」も一緒に読み込みましょう。

ではJavaScriptの記述を見てみましょう。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="prefixfree.min.js"></script>
<script type="text/javascript" src="prefixfree.jquery.js"></script>

<script>
$(function ()
{
    $("#box").toggle(
        function()
        {
            $("#box").css("transform", "translate(200px,200px)");
        },
        function()
        {
            $("#box").css("transform", "translate(0px,0px)");
        }
    );
});
</script>

まずはダウンロードしてきたJavaScriptファイルを読み込みます。順番としては、「prefixfree.jquery.js」は、jQueryとprefixfree.jsの読み込みの後に記述します。

そして、今回もjQueryの「toggle」メソッドを使います。楽ですからね。ここでは前回と違って、「transformプロパティ」を使っています。「transformプロパティ」についてはまた後日解説するとして、ここで重要なのは「transformプロパティ」はベンダープリフィックスが必要なプロパティということです。

試しに、「prefixfree.jquery.js」の読み込みの記述を消して実行してみると、アニメーションが走らなくなります。

この様に、「prefixfree.js」と「prefixfree.jquery.js」を使うと、CSS3のプロパティをもっと手軽に扱うことが出来るのです。「prefixfree.js」と「prefixfree.jquery.js」はともにMITライセンスという、非常に制限の緩いラインセンス形態で配布されており、ソースコード内の著作権表記のコメントを消さない限り、自由に商用利用可能ですので、積極的に利用していきましょう。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。