CSSとDomスクリプティングの関係を理解するポイント

@media 2006のブログで、コンファレンスの講演が毎週一つずつ公開されています。iTunesに登録して帰りの電車で聞いていたら、この講演はかなり面白かった。

@media 2006 | News & Discussion | Jeremy Keith: “Using DOM Scripting To Plug The Holes In CSS” Podcast

HTMLとCSSの役割分担は、かなり明確になってきているけれど、CSSとJavascript（というよりDomスクリプティング）の関係が、この講演を聴いてかなりスッキリした感じ。全文とプレゼン資料を、Jeremy Keithさんのブログで見ることができます。以下、なるほどと思ったポイントを備忘録的に書いてみる。

Adactio: Articles - Using DOM Scripting to Plug the Holes in CSS

Dom構造を、IDで選んで処理するために、CSSはSelectorを使い、DOMではMethodを使うけど、やっていることはかなり近い。

• CSS
  • #ID { }
• DOM
  • document.getElementById("ID")

ただし、Domスクリプティングは、自分でMethodを作成、追加することができる（getElementsByClassNameがないので、自分で作ろうとか）。このあたりの解説は、フムフムという感じ。

そのあとの話のつながりが流石で、CSS3では新しいSelectorが追加されて、例えば「テーブルの２行目だけに背景色をつける」というような指定ができるようになる。しかし、今はまだ殆どのブラウザでCSS3はサポートされない。であるならば、その部分を、今ある現実の課題としてDomプログラミングで補うべきだ、と。

例えば、角丸コーナーを実現するためには、div タグを追加する（Another attempt at CSS rounded-corner dialogs using the sliding doors technique）のケースが多い。ただしこれだと、HTMLの中に、デザインを実現するためだけの無駄なタグが入ってしまう。CSS3だと、ちゃんと背景に複数の画像を指定できるようになるのに。それなら今は、Javascriptで角丸にしたいdiv の前後に装飾用のdivを、 element.appendChild(div); で追加してしまえと。そしてのそのDivへの背景画像の設定はCSSでおこなおう。有名なNifty Cornersは、このアプローチになるのかな？

あと、DOMとBOMの違いはちゃんと認識しといてね！ブラウザ依存のeventとか、レイアウトが変わるとかはBOMの話だから。とか、スッキリとCSS/Domの関係を把握するためのポイントを教えてくれます。講演での話し方とかもとても分かりやすいので、JeremyさんのブログをRSSリーダーに即効登録。