Nifty Cornersについて考える

元記事であるNifty CornersはWeb標準にHTMLをcleanに保つことについても配慮しており、最終的には、HTMLに余計なマークアップを加えることをせず、角を丸くするのに必要な要素はクライアントサイド(ブラウザ側)でDOM(Javascript)を用いて加えるという手法をとっています。

But we love webstandards and semantic markup and we'd like to maintain the HTML clean and light.

しかしながら日本語で紹介される過程で、DOMを使う部分が抜け落ち、HTML + CSSだけの部分が広まっていたようでした。そのためか、批判的意見でもDOMを使う点についてはあまり言及されていないように見えます。

個人的には「HTML文書には余計なマークアップを加えず、ブラウザが標準技術に非対応な場合はJavascriptで補う」という試みを何度かしてきたことがあったので、Nifty Cornersの手法には共感できるところがありました。純粋にCSSのみで角を丸く手法(CSS3のborder-radius、或いはMozillaの-moz-border-radiusのような独自実装)が普及するまでの過渡的手段としては、考慮の余地があるように思います。既にCSSによる角丸が実装されているブラウザに対してはそれを用い、CSS実装は無いけどDOMで何とかできそうなブラウザにはこの手法を使用、そして将来CSS3の実装が実現した時には、スクリプト・スタイルシートを変更して対応……というのも一つの選択であるような。

* * *

それはそれとして、丸くするために追加する要素について全てdisplay:blockしているのであればdiv要素でよいのでは……とか思ってましたが、よく読むと「ほとんどの場合で妥当なマークアップを維持するため」という記述がありました。そこでようやくp要素やh1～h6要素等、インライン要素しか含むことができない要素について角を丸くする場合に思い至って納得。

I needed an inline element to obtain the rounded corners, since it could be nested in almost every kind of tag mainting the markup valid.

とは言ってもb要素を使うのは賛成できかねるところ。

So the choice fell on b because it doesn't have semantical meaning and it's shorter than span,

と元記事にはありますが、b要素には太字という意味があるわけで、字が入ってないのに太字ってどうなのさ。スクリプトで追加する分には書く手間はかからないのだし、やはり特定の意味を持たないspan要素の方がよいように思う。

* * *

角を丸めず頭を丸めよより。

「画像を一切使はない」こと自体に何か価値があるのか。使へばいいぢやないか画像。

現状のCSS2.1では背景画像は一つの要素に一つしか使えないため、背景画像を使って四隅を丸くするとなると、丸くするためだけに要素を追加することになり、結局は同じような手法になりそうです。加えて、Nifty CornersにはCSSでスクリプト側の指定で色を切り替えられるという利点があります。

* * *

void GraphicWizardsLair( void ); // 3月19日より

どうしてああいうバッドノウハウで角丸を実現すると、CSS的に嘆かわしいのか。

CSS的にではなくHTML的におかしい、ということでは。特に意味を持たない要素が表示のみのために追加されるわけなので。

* * *

※追記: ろばＱさんの突っ込みを受け、要素を「クライアントサイド(ブラウザ側)で」加えるというところを補足しました。(2005年3月21日)

※追記: 角を丸めず頭を丸めよへの言及で「CSSで色を切り替えられる」と書いていましたが、Nifty Cornersの実装では色の指定はJavascriptの関数で行われているため、訂正しました。(2005年3月21日)