2006年11月26日(日) [過去の今日]
#2 CSSのドロップシャドウ
blogやCMSが中心になったここ数年のウェブ界隈では、すごくまともなHTMLが増えた。それ以前はtableで無理矢理レイアウトしたひどい代物が溢れてて、ただでさえ遅い回線、遅いCPUに負担をかけまくっていた。最近のblog/CMSの出力は標準にほとんど準拠してるので、けっこう軽快だし、アクセシビリティも高い。
が、まだ呆れる話が無いわけじゃない。 ふと見つけた CSSだけで文字にドロップシャドウを付ける方法 という記事。
呆れてものが言えない。まるっきり スタイルシートWebデザイン CSS2完全解説 のP160にある、CSS適用の悪例そのまんまじゃないか。1998年に発行された本だぞ、これ。Google創業当時の出版物に「悪例」として書かれるような手法を、何今ごろになって「かっくいい」とか言っちゃってるのよ。
その前世紀の本にも書かれてる通り、
<h1><span>Lorem Ipsum</span>Lorem Ipsum</h1>
なんて書いちゃったら、CSS未適用時に
Lorem IpsumLorem Ipsum
という見出しになる。H1要素の中身がこれなんだからしょうがない。今こういう時代になって「HTMLを読むのは人間だけとは限らない」がどんどん現実になってるが、ソーシャルブックマークのようなサービスがH1要素をリンク名に使ったりすることを想像してないのだろうか。
ついでに言うと、こういうドロップシャドウは、text-shadowというプロパティがCSS2で定義されてて、それで実現できる。ただ、実装があまり追い付いてなく、今のところSafariくらいしか実装してるブラウザは無かったと思う。Firefoxは3あたりで対応してくれるだろうか。
もひとつついでに、20世紀の本で言われてることだが、画像を使うべきときは画像を使うべきだ。HTMLとCSSの仕様を飛び越えた事をするくらいなら、画像を使って表現すべきである。もちろん、alt属性はきちんとつけてね。
(@861)