ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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

ピクチャ 1.png

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

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

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

ピクチャ 2.png

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

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

ピクチャ 3.png

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

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

yellowgreen designbüro - MoreCSS

http://yellowgreen.de/morecss

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2