マックスは1KB。限られたリソースの中でWebサイトを多彩にアレンジする「CSS1K」
CSS1Kは1KBのCSSでどこまでWebサイトを表現できるかをチャレンジするプロジェクト。
CSS1KはCSS製のオープンソース・ソフトウェア。昨今のWebサイト開発ではCSSの存在を欠かすことができない。優れたWebデザイナーの作るCSSはとても美しく、分かりやすい。しかしCSS自体がとても冗長的なマークアップ言語であるために長くなりがちだ。
一例
idやclassの付け方、HTML自体の入れ子の深さによってもCSSはどんどん長くなる。しかし、そんなCSSの現状に甘んじることなくチャレンジするのがCSS1Kだ。
CSS1Kはその名の通り、1KBのCSSでどこまで表現できるかをチャレンジするプロジェクトだ。ルールは幾つかあるが、まず1024 bytesまでに収まることが大前提だ。さらに@font-faceや@importを使って外部CSSを読み込むのも禁止だ。
全く違うサイトに見える
元になるHTMLは決まっており、header、article、footerタグに分かれている。ほぼclass指定なしの素のHTMLだ。現在20を越えるCSSが登録されている。それらはまとめて見ることができる。同じHTMLをベースにしているのだが、CSSによって全く別な見え方になるのが面白い。
[s2If current_user_can(access_s2member_level1)]
シンプルに（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
Android風（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
これも1KB（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
こんな変わり種も（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
ここまで高度な表現も（プレミアム限定）
[/s2If]
MOONGIFTはこう見る
CPUやメモリ、HDD、ネットワークといったリソースが溢れている現在ではリソースを節約して使う意味は殆どないかも知れない。だがデスクトップ以外でもリソースの少ないスマートフォンに対応する場合や、さらに組み込み系のWebブラウザなどになればさらにリソースは限られる。
同じ表現をする時にでも省リソースで済めばより高速に動作する。CSS1Kはそんなチャレンジ心溢れるプロジェクトだ。HTML5で向上した表現力を試すのも面白そうだ。たった1024 bytesでどれだけの表現ができるか、ぜひ見てほしい。