※ 画像は公式サイトデモより

最近のWeb開発は単純なタグ構成をCSSを使って装飾していくという形式が多い。確かに開発側にとっても単純な構造は分かりやすく、CSSで見た目を変更できるのはデザインとシステムの分離ができ、効率的だ。

そしてこのソフトウェアはそれをさらに発展させてくれる。

今回紹介するオープンソース・ソフトウェアはMoreCSS、CSSを拡張するJavaScriptライブラリだ。

JavaScriptでCSSを拡張とはどういうことだろうか。例に出すと、例えばテキストボックスにデフォルトで「Search…」という文字を出したいとする。通常、JavaScriptを使ってonClickなどを定義すると思うが、MoreCSSを使えば「default-value:“Search …";」という定義をCSSに書いて、そのIDを当てはめるだけで良い。

他にも同じサーバ内の文字列を拾ってきて表示することや、文字列の前後に指定した文字を追加する、新しいウィンドウを開くと言ったアクションが全てCSS内の定義だけでできてしまう。一部の文字だけを表示することもできたり、結果の行ごとに色を変えると言ったこともできるので、様々な場面で役に立ちそうだ。

これは一度見ておくと、色々な場面で役立つことが分かるはずだ。デザイナーの人にとっては、複雑なJavaScriptやプログラマに負担をかけることなくCSSだけで様々なアクションができるようになるし、プログラマも複雑なJavaScriptをくむ必要がなくなる。

外部の文字列表示などは、SSI的な利用も考えられる。そうなればログイン前と後のキャッシュを共通化できる、なんて便利な使い方も考えられそうだ。これは開発者にとって要注目のライブラリと言えそうだ。

via [JS]スタイルシートを機能拡張するスクリプト [MoreCSS | コリス]

yellowgreen designbüro - MoreCSS
http://yellowgreen.de/morecss