亜細亜ノ蛾 - Weblog

CSS ハックって……

さて、CSS の迷宮に入り込んだアナタは「CSS ハック」なるもの──呪文と出会うわけです。

ブラウザ判定といえば、他の言語だと、こんなコードになります:

if ($ie <= 6) {
  $color = '#ff0000';
  /* etc... */
} elseif ($ie = 7) {
  $color = '#0000ff';
  /* etc... */
} elseif ...

──とまぁ、「にんげんさま」でも、なんとか意味が わかる感じ。

しかし これが CSS だと:

* html body {
  color: #ff0000;
  /* etc... */
}

*+html body {
  color: #0000ff;
  /* etc... */
}

── !? 「ie」とかバージョン数とかは、どこ？

ref.: Lucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめ

まぁ、「Perl の $ とか @ みたいなもの」──とか言うと Perl Mongers に怒られそう（笑）だけど、

Perl の $/ と $\の初期値は何？

みたいに、「じゅうばこのすみ」知識を、普段から意識してコードを書くような もどかしさ！

デザイン中は、ブラウザには常にCSSバグリスト＠CSSバグ辞典スレッドや構造のマークアップなしでフロートをクリアする方法などが開いている──。というような人、多いのでは？

CSS はプログラム言語か？

いい加減、「CSS はプログラム言語ではないので、同列に並べて論じるのは無意味」という声が聞こえてきそうですが──

まさにその通り！ CSS を「Web デザインに関して何でもできる魔法の言葉」と思っていると、けっこう つまづきます。

──ひょっとして、「Web デザイン = CSS」というのは、ちょっと違うのでは、と今は感じています。

CSS で できないこと

たとえば、下記の (X)HTML に書いてあるような色づけは、CSS では できない（よね？）。

<p>CSS で「このカッコの中を赤く」、
ココからココまでを青く、できる？</p>

けっきょく、下記のように (X)HTML を書き換える ことになる。

<p>CSS で「<span class="red">このカッコの中を赤く</span>」、
<span class="blue">ココからココ</span>までを青く、できる？</p>

──すると、矢のように「red や blue などという class は云々」とツッコミが飛んでくる（笑）

そこで、red を attention にしたり blue を cold にしたり（ADP: class="red"）、あるいは他のクラス名にしたりするワケですが──

(X)HTML に手を加えている、という点では差がない。

それ JS

で、けっきょく何が言いたいかというと──

(X)HTML に手を加えなくても、上記の色づけだったら JavaScript で できる。正規表現や XPath を駆使すれば、もっと複雑な処理もできる。

もちろん、どんどん複雑怪奇な JavaScript コードに なっていくのが、それでも、(X)HTML には必要最低限の記述だけ済む。

──ひょっとして、真に「デザインと構造を分離」できるのは、JavaScript じゃね？

ということで、Web デザインと言えば「(X)HTML + CSS」で FA だったわけだが、

2008 年は「(X)HTML + JavaScript（オンリィ）」で Web デザイン！

──というのは どうだろう。

あ、オレはパスだけど（エエー）。

『ADP』のデザインテンプレートに注目

──みたいなネタを思いついたのは、大好きなブログ『ADP』から。

ADP: Web Konetaアーカイブ

2005 年から、ずっと取り組んでいるテンプレートの話（ADP: デザインテンプレート1124）があって、影ながら応援というか注目してました。

何度も書いているが、デザインテンプレート1124でやりたいことは、1段組、2段組レイアウトの切り替えだ。Firefox, Opera, Safariでは、ウインドウの横幅がある程度あれば幅固定の2段組レイアウトのように見えるけれど、ウインドウの横幅を狭くすると1段組に切り替わる。

ADP: デザインテンプレート1124

何か自分に手伝えることがないかなー、と自分なりに試行錯誤して、それで CSS スキルを磨きました。Momomo さんに感謝！

最近、ADP: dt1124がうまくいったよという記事があって、実際にモバイル端末で意図したとおりの表示をするものに出会って、そろそろまじめに取り組まなければならない、と締めていました。あ、アツいぜ！ 熱すぎるぜ！

──と思う 一方、「CSS だけで実現する、というのは あまりにも大変だな」と思いました。

なので、よっぽどの「CSS マニア」以外は、CSS だけでデザインするよりも、「CSS + JavaScript」も視野に入れたほうが良いのでは？

IE7.js

というようなことは、自分がわざわざ書かなくても、IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナルという記事が、『はてなブックマーク』で 500 近いブックマークが付いていることから、

(X)HTML + CSS だけでなんとかする、というのはゴメンだ！

──という人が多いことを示しているような。

で、ADP: IE7.js を見てガッカリする、と……。

けっきょく、CSS だけの Web デザインで、各ブラウザ間の差異を完全になくすのは（ごく単純なデザイン以外）無理なのかな……。そこが、一生懸命 CSS を勉強するコストと割が合わなく感じます。

まとめ

──まとまるのか？ と思っていたら、ちょうど良い具合に、弾さんのインタビューで良い言葉を発見しました。

Q44　なんちゃってプログラマーってどんな人を指しますか？

PHP使ってる人？　なんちゃってでいいところがPHPのいいところでもあり、存在理由でもあるのだけど。これはPHPをディスっているわけでも何でもなく、使いどころを間違えなければPHPもいいもの。ただ、PHPでプログラミングの奥義を究めたいと言い出すと、「それは違うだろう」と思う。（……）

New Generation Chronicle：小飼弾――35歳からのプログラミングこそ無上の至悦 (5/9) - ITmedia エンタープライズ

まさに、プログラム言語界の PHP の位置に あたるのが、Web デザイン界の CSS という気がします。基本的なレイアウトは CSS で、そこから先のブラッシュアップは JavaScript の出番、というのが良いような。