head 要素の内容を CSS で表示させてみたが

CSS のお話です。興味のない人は読み飛ばして、あしたの記事に期待してください。

head 要素の内容は CSS のプロパティで display: block にすると表示されるようになるのは知っていて、IE では表示されない、ということも知ってはいたのですが、実際に試してみるまでは信じられるか というわけで、実際に試してみました。

その結果、確かに IE では表示されないのですね。なぜか border プロパティで設定した枠が出てきたのですが。おそらく、IE8 では head 要素の内容は表示できるのだと思います。しかし link 要素は空要素のため、link::before という擬似要素を使って content プロパティで title 属性値を表示させていたため、before 擬似属性に対応していない IE8 で内容が表示されなかったのではないかと思います。

Firefox では href 属性のある要素はリンクアンカーがつくようですが、Opera など他のブラウザではただ content プロパティで付加した文字列が表示されるだけのようですね。

CSS の content プロパティで要素を生成できればいろいろと面白いと思うのですが、それは構造に手を加えることになってしまうので XSLT とか、他のスタイルシートの役目になってしまいますね。かといってわざわざ XSL で内容を加えるのも……。ん? ああ、なるほど。XSL も悪くないかもしれません。できますね、確かに。面白そうなので、あとでちょこっと書いてみます。