もずはっく日記(2008年7月)

img要素とbefore/after擬似要素の関係
初回投稿日時: 2008年07月20日01時43分15秒
最終更新日時: 2008年07月20日02時37分46秒
カテゴリ: CSS
SNS: Tweet (list)

ZDNetのcontentプロパティでコンテンツを追加する（2）：FirefoxとSafariのCSSにalt属性の値を画像のキャプションとして表示するという記事がありますがCSS仕様の解釈が間違っていると思います。私も昔、同様に考えていたのですがIan Hicksonにこの考え方は間違いであると説明されたことがあります。

まず、before、after擬似要素とはどんなものかを正確に知らなくてはいけません。これらの擬似要素は、その要素の前後ではなく、内容の前後に新たな内容を追加するものです。つまり、

foo:before {
  content: "before ";
}

foo:after {
  content: " after";
}

<foo>content of foo element</foo>

このような例の場合、CSSによって擬似的に作られるHTMLのコードは

<foo>
  <foo:before>before </foo:before>
  content of foo element
  <foo:after> after</foo:after>
</foo>

となります。つまり、これらの擬似要素は、指定した要素の擬似的な子要素となります。

そして、img要素やinput要素のような置換要素は、その要素の内容を画像等で置き換えるものです。つまり、これらの要素の内容である擬似要素も置換されてしまわなくてはいけません。

ただ、手元で少しだけテストしてみると、Geckoでも画像が無い場合(alt属性値がレンダリングされる時)にその前後にこれらの擬似要素が表示されてしまいました。これは修正されるべきではないかと思います。なぜなら、img要素の代替内容は置換されたものであって、img要素の本来の内容ではないからです(img要素は常に空要素)。画像が表示できない時のimg要素の内容をalt属性値のものにするのであれば、CSS3では(画像が読み込めなかった場合を示すセレクタはありませんが)、img { content: attr(alt); }と記述することが出来ます(この解説は正確ではありません。#2の内容を見てください)。ですが、現在のGeckoのレンダリング結果はこの記述と重大な矛盾が発生してしまうと思います。