img
要素とbefore
/after
擬似要素の関係
初回投稿日時: 2008年07月20日01時43分15秒
最終更新日時: 2008年07月20日02時37分46秒
カテゴリ: CSS
固定リンク: id=2008072000
SNS:
(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のレンダリング結果はこの記述と重大な矛盾が発生してしまうと思います。