restyle.jsを使ったCSS処理

Andrea Giammarchi氏が開発しているrestyle.jsはJavaScriptベースのCSSプリプロセッサであり、サーバ(Node.js)でもブラウザでも動作する。 "シンプルなCSSアプローチ"と自称するこのツールはCSSのルールとプロパティのプレフィックス付きのバリエーションを生成し、DOMに挿入できる。

既存のCSSには機能的な不足はないものの、Andrea氏はサーバとクライアントの両方で動作する軽量なものがない、という。

"yet another CSS preprocessor"を探しているなら、次のことを教えます。私が何人かの著名なCSS開発者やウェブ開発者に話を聞いたところ、そのようなスクリプトは存在しなかったです。"なんで誰も作っていないんだろう"、と思うでしょう。私の考えでは、誰かがすでに作っているものの、圧縮して0.8KBでサーバとIE6まで含んだクライアントと互換性のあるものがないんです。つまりrestyleのことです。

このライブラリは、restyle()というメソッドを公開し、ふたつの引数をとる。ひとつはJavaScriptのオブジェクトでCSSやDOMスタイルの編集に似た文法を持つ。

 restyle({
    'body > div.my-div': {
        backgroundColor: 'goldenrod',
        backgroundImage: 'url(mybg.png)'
    }
}); 

これによって、次のCSSが出来上がる。

 body > div.my-div {
    background-color: goldenrod;
    background-url: url(mybg.png);
} 

異なる方法でJavaScriptオブジェクトを定義し、出力結果を得ることもできる。

 restyle({
    'body > div.my-div': {
        background: {
            color: 'goldenrod',
            image: 'url(mybg.png)'
        }
    }
}); 

もちろん、特別なことはしていない。マークアップの記述の減量もわずかだ。しかし、restyle.jsは標準的なCSSでは冗漫になってしまうときにはrestyle.jsは効果的だ。例えば、ベンダプレフィックスを使うとき、ふたつ目の引数を使ってベンダプレフィックスを定義すればいい。例えば、

 restyle({
    '.my-div': {
        transition: 'background-color 500ms ease';
        backgroundColor: '#00f';
    }
}, ['moz', 'webkit']); 

出力結果は以下の通り。

 .my-div {
    -webkit-transition: background-color 500ms ease;
    -moz-transition: background-color 500ms ease;
    transition: background-color 500ms ease;
    background-color: #00f;
} 

これは、アニメーションのロールを記述とき、とても使いやすい。2、3のコードがベンダプレフィックスがついたCSSの属性に変換される。サーバでは、第2引数を省略すればプレフィックスなしになる。ブラウザで動作しているrestyle.jsでは、ブラウザの種類に関わらず、すべてのベンダプレフィックスを生成する。

restyle()関数は環境によって異なる結果を返す。Node.jsでは、結果のCSSを含む文字列を返す。ブラウザでは、CSSは自動的にDOMに挿入され即座に反映される。返却値は属性ノード(スタイルエレメント)、css(CSSを含む文字列)、remove()メソッドを含むオブジェクトを返す。removeメソッドは挿入したスタイルをDOMから削除する。

サンプルページはここで確認できる。実際にrestyle.jsを使って動作を確認できる。Andrea氏の記事へのコメントが指摘するように、restyle.jsはAbsurdJSと同じアイディアでできている。大きさは10分の1だが、Arestyleは軽量で触ってみる価値はある。readmeを読んでみるのもいいだろう。