CSS3なライブラリxcss.jsを作ってみました

js css

デモの結果はオリジナルと同じでよく分からないかもしれませんが、CSSが違います。xcss.jsを読み込むとベンダープリフィックスは記述不要です。

つまり、どういうことかというと

.rotate10 {
  transform: rotate(-10deg);
}

とCSSで書いておき、xcss.jsを読み込むと、

.rotate10 {
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
}

というCSSを動的に追加するライブラリです（実際はブラウザの対応状況見て追加する感じです）。

特徴

  • xcss.js読み込んだら、勝手に実行されます。
    • 全てのCSSの後にscriptタグは置いてください。
  • グローバル変数はxcssしか汚染しないです。
    • jQueryとかと共存できます。
  • セレクタの面倒は見ません。
    • 子供セレクタとか使えるようにはならないです。
  • HTMLノードを改変しません。
    • デザイン用の要素を突っ込んだりはしません。
  • document.styleSheets[N].addRuleとかで頑張って、CSSを追加します。
    • 逆にこっちをJSで弄ると干渉します。
  • CSSハックと割と共存します。
    • というか無視します。つまり、現状のウェブサイトに読み込ませたら、ベンダープリフィックスが抜けている要素も勝手に追加してくれます。

これ読みこめば、ベンダープリフィックスいらない！勝つる！って気分になります（ぇ　現行のモダンブラウザのレベルに足を引っ張っているIなんとかってブラウザを引き上げる！的なライブラリではなく、未来に登場するCSS3をフルサポートしたブラウザXのレベルに、無理することなく現行のブラウザを引き上げる感じのライブラリです。

ライブラリがやっていること

  1. ブラウザとは別の枠組みでCSSをかき集める。
    • cssTextは改変されているので。
  2. ブラウザとは別の枠組みでCSSをパースする。
    • 未知のプロパティーとかrulesに追加されていないので。
  3. サポートしていないプロパティーを変換する。
    • 変換する必要のないプロパティーは無視します。
  4. 変換したプロパティーをそのCSSの先頭に挿入する。
    • セレクタの優先順位は出来る限り壊さないようになっています。

TODO

  • @mediaとか@pageがまだ対応していないので作る。
  • jQueryのプラグインとして、cssメソッド的な奴をベンダープリフィックスをつけなくても読み込めるような拡張を作る。
  • グラデーション関連が適当なので直す。

まとめ

CSSがすごくスッキリします。こういうJavaScriptすら使わない環境が登場すると楽しいでしょうね。