擬似要素とか置換要素とか

2016年3月16日 著

フロントエンド開発者のためのメールマガジン、Frontend WeeklyのVol.61が今日配信されたのですけど、その中で少し前に自分がスルーした（読んだけれど敢えてDiigoにブックマークしなかった）記事「Styling Broken Images」が紹介されていました。気になったのが付記されていたコメントで、曰く擬似要素が置換要素にのみ表示されるという特性を上手く利用していると。いやいやいや、置換要素で::before/::after擬似要素は使えないですよ、つい先日も某案件でうっかりinput要素に擬似要素（のボーダー）で矢印の修飾を付けようとした（でもできなかった）し......と思い、改めてCSS 2仕様を確認したところ：

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Oh ... 画像（img要素）については完全に仕様が定められていたわけでは無かったのですか。であれば、元記事（「Styling Broken Images」）を読んだ時に感じた違和感、もとい「これハックじゃないの？」感は自分の思い過ごしか！！と思ったのですけど、じゃあその後詳細が定められたかというと、そうでもないっぽい。最新の（策定途中の）CSS 2.2仕様においても、全く同じ注意書きがそのまま残っていたりする。よくわからないなぁ、などとTwitterでぼやいていたところ、この辺りに大変お詳しいもんどさんから特に何も変わってないのでわと教えていただきました。ありがとうございます。

閑話休題、元記事の紹介しているテクニックというのは（敢えてハック呼ばわりしないにせよ）どうも気味が悪い。表示されるべき画像が表示されないという、本来であれば全力で回避すべき状況を前提としている点もそうだし、img要素の::before/::after擬似要素が将来、画像の有無に関わらず表示されるようになったらどうするのだろう？　画像が表示されているのに「ごめんね、壊れてるんだ」なんて謝るわけ？　という点も然り。まぁ、今更そんなこと（＝仕様としてimg要素の::before/::after擬似要素の表示が是とされる）は起こらないと思いますけど。

いずれにしても。Frontend Weeklyの擬似要素が置換要素にのみ表示されるという記述は間違っていると思いました。ともあれ、今回の件に関連して2008年の記事、img要素とbefore/after擬似要素の関係 - WebStudioを拝見するなどして勉強になったので、ええと、ありがとうございます（謎無し）。