• かちびと.net

    CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.jsのご紹介。なかなかいいかも、と思ったのでご紹介。将来のメンテも楽かもですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js

スポンサーリンク

久しぶりにかなり便利そうな気がした
ので備忘録。CSS3で各ブラウザに対応
させるために加えるプレフィックスを
自動で付けてくれるライブラリです。
将来的にCSS3のプレフィックスは付け
る必要が無くなるのでそうなったら
これを外せばいいだけですね。

使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。

cssFx.js


地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。

何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。


Chromeのデベロッパーツールで確認。cssファイルには含まれていないベンダープレフィックスが確認出来ました。

例えば、このキャプチャのIT’S SO FUTURISTIC, BABY!というテキストには以下のようにcssでアニメーションが指定してあります。

h2,h2:hover {
	transition:all 0.5s ease-out
}

これが以下のように自動変換されます。

h2, h2:hover {
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
}

対応プロパティ

現在は以下のプロパティに対応しています。

  1. border-radius
  2. box-shadow
  3. flex-box
  4. gradients
  5. multiple-columns
  6. border-image
  7. transforms
  8. transitions
  9. opacity
  10. ellipsis

他にも何点か対応してるみたいです。

使い方

使い方は超絶シンプル。

<script type="text/javascript" src="cssfx.min.js"></script>

jsファイルを読み込んで、以下のようにcssにclass=”cssfx”と加えるだけ。

<link rel="stylesheet" href="cssfx.css" class="cssfx">

これだけで、プレフィックスを自動で加えてくれます。手軽で軽量で、非依存っていうのはなかなかいいですね。

まだちょっとしか触って無いので問題があるかどうかは把握できていません。時間を見て調べてみようかと思います。以下でデモも確認出来ます。

cssFx.js(via:dothtml5)

URL :
TRB :

Comments & Trackbacks (7)

  1. Timewarp45

    こんにちは。いつも役立つ記事ばかりで参考にさせていただいてます。
    cssFx.jsを実際に利用してみましたが、背景色の指定にrgbaを使った場合にIE9以上で不具合がありました。
    IE9以上では、rgbaの指定に加えfilterの効果も重なって二重の背景色が指定されちゃうみたいです。
    私は恥ずかしながらソースコードをバリバリ弄る知識がないもので、吐き出すfilterのコードにCSSハックを追加して対処しています。
    今のとここの点以外は特に問題もなく使えています。ご参考までにコメントさせていただきました。

    • シロ

      こんにちはー!

      あらら、ホントですか・・それは僕も未確認でした・・
      検証ありがとうです!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services