[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free

Post on:2011年10月14日

Prefix freeの機能

ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。
「-moz-」「-webkit-」「-o-」「-ms-」などがあります。

例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。

.download {
   background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
}

Prefix freeを使用すると、ベンダープレフィックスは自動で付与するので、下記のようにシンプルなスタイルシートでいけます。

.download {
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
}

Prefixを使用する大きな利点は、必要なベンダープレフィックスのみ付与することです。Webkit系ブラウザには「-webkit-」のみ付与し、他のものは付与しません。
これはCSS3の数が多いほど、ファイルサイズに差がでるでしょう。

Prefix freeの主な特徴

5KBの超軽量スクリプト。
jQueryなど他のスクリプトは必要ありません。
link要素でもstyle要素でも全てのスタイルシートに対して、必要なベンダープレフィックスを自動で加えます。
※@importしたスタイルシートはサポートしていません。
スタイルの属性を持っているエレメントに対して、必要なベンダープレフィックスを自動で加えます。
後から加えられたlink要素とstyle要素にも対応します。
後から加えられたエレメントにも対応します。
setAttribute()で変更したスタイルにも対応します。
既にベンダープレフィックスを使用しているプロパティには、適用されません。

[ad#ad-2]

対応ブラウザ

IE9+
※IE8はCSS3をほとんどサポートしていないため、Prefix freeを使うことはないでしょう。
Opera 10+
Firefox 3.5+
Safari 4+
Chrome

Prefix freeの使用方法

使用するページに、当スクリプトを外部ファイルとして指定するだけです。

<script src="prefixfree.js"></script>

使用するページで新しいスタイルシートを加えたり、エレメントのスタイルの属性を変更しないのであれば、下記のスクリプトでパフォーマンスを向上させることができます。

document.removeEventListener('DOMNodeInserted', PrefixFree.events.DOMNodeInserted, false);
document.removeEventListener('DOMAttrModified', PrefixFree.events.DOMAttrModified, false);