prefixfree.jsを使って、各ブラウザ用のCSS3 ベンダープレフィックスを自動追加

CSS3で採用されるプロパティを記述する際に、先行実装したブラウザ用としてベンダープレフィックス（プロパティに加える接頭辞）を使用することになります。主なブラウザ用は、「-webkit-」、「-moz-」、「-o-」、「-ms-」となり、これにベンダープレフィックス無しのものを加えて計5種類のCSSを記述することになります。機械的に書いていけばよいとはいえ、けっこう面倒な作業です。この煩わしさから解放してくれるのが、「prefixfree.js」です。これを利用すると、アクセスしてきたブラウザを判別して、それ用のベンダープレフィックスのみを、必要なプロパティ部分に自動で追加してくれます。

「prefixfree.js」をテストするため用意したのは、「HTML5で廃止された<marquee>タグのかわりにCSS3でマーキー」ページで使用したCSS3 animationで動くマーキーのサンプル３と同じものです。

次のソースはマーキーのCSSで、上側がすべてのブラウザ用のベンダープレフィックス付き、下側がベンダープレフィックスを省いたもので、実際にこのページに記載しているものです。どれだけ軽量になったかが一目で分かります。IEの動作は、CSS3自体に対応しているIE9からです。MacのSafariの場合は、4世代前のSafari4でも動きます。

.marquee p {
      margin:0; padding-left:600px; display:inline-block; white-space:nowrap;
      -webkit-animation-name:marquee; -webkit-animation-timing-function:linear;
      -webkit-animation-duration:15s; -webkit-animation-iteration-count:infinite;
      -moz-animation-name:marquee; -moz-animation-timing-function:linear;
      -moz-animation-duration:15s; -moz-animation-iteration-count:infinite;
      -ms-animation-name:marquee; -ms-animation-timing-function:linear;
      -ms-animation-duration:15s; -ms-animation-iteration-count:infinite;
      -o-animation-name:marquee; -o-animation-timing-function:linear;
      -o-animation-duration:15s; -o-animation-iteration-count:infinite;
      animation-name:marquee; animation-timing-function:linear;
      animation-duration:15s; animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
      from   { -webkit-transform: translate(0%);}
      99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
      from   { -moz-transform: translate(0%);}
      99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
      from   { -ms-transform: translate(0%);}
      99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
      from   { -o-transform: translate(0%);}
      99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
      from   { transform: translate(0%);}
      99%,to { transform: translate(-100%);}
}

.marquee p {
      margin:0; padding-left:600px; display:inline-block; white-space:nowrap;
      animation-name:marquee; animation-timing-function:linear;
      animation-duration:15s; animation-iteration-count:infinite;
}
@keyframes marquee {
      from   { transform: translate(0%);}
      99%,to { transform: translate(-100%);}
}