src属性のないimg要素と擬似要素

img要素は置換要素なので、現在の安定仕様では明記されてはいないものの歴史的な事情により::before/::after擬似要素による挿入は行えない。しかしChrome 41で遊んだところ、src属性がない場合は挿入することができるようだ。Internet Explorer 11やFirefox 36、Mobile Safari 8では行えない。

View Demo: img element w/o src attribute and pseudo element

Chrome 41ではalt属性の値である“img without src”という文字列の前に::before擬似要素で仕込んだ“pseudo element for img!”という文字列が挿入されていることがわかる。Chrome 43でも同様だった。

src属性がないとimg要素がパース・エラーで不明な要素にでもなるのかなと想像したが、alt属性がちゃんと展開されているのでそうではなさそうだ。alt属性が展開されるようなケースが特別扱いされているということなのだろうか。


イシューを立てようかと思ったのだけど、仕様上は挿入してはならないことにはなっておらず、立てづらかったため保留した。CSS 2.1では「将来的には決めるつもりだけど、まだ決まってない」となっている。それを決めるはずのCSS3 Generated and Replaced Content ModuleのReplaced contentの項では::outside::before等を使えということになっているが2003年のWorking Draftで根拠にはしづらい。

意図的に行わないと再現しそうにないため、誤爆するということもなさそうなので、ここに記録するに留めておこう。