あれこれポップアップとCSS生成内容

CSS生成内容による属性値の表示とあれこれポップアップを組み合わせて使っている場合の問題点と、解決方法について述べてみます。

CSS2では、:before擬似要素や:after疑似要素とcontentプロパティを使うことにより、HTML文書の本文に無い内容を生成することができます。例えば、引用文のマークアップ(blockquote, q要素)について、title属性で示した引用元を表示させたりすることが可能です。

CSS生成内容表示サンプル

※ Firefox, OperaなどCSS2生成内容に対応したブラウザでご覧ください。CSSはHTML文書内にstyle要素として記述しています(以下のサンプルも同様)。

このようにCSSによりtitle属性の値を表示させている文書で、あれこれポップアップを同時に使用していると問題が起ります。マウスカーソルを該当の要素の上に移動させると、生成内容のうちtitle属性値にあたる部分が消えてしまうのです。

あれこれポップアップ + CSS生成内容表示サンプル(1)

※ あれこれポップアップはSatoshi UeyamaさんのOpera 9対応版を使用しました。

これは、あれこれポップアップによりtitle属性の値が消され、その値がap:ec-title属性(あれこれポップアップによる拡張属性)に移されることにより発生する現象です。ちなみにあれこれポップアップにより処理された後のマークアップはこんな感じです。

<blockquote ap:preloaded="true" ap:evacuated="true"
  ap:ec-title="(title属性の値)" xmlns:ap="http://www.remus.dti.ne.jp/~a-satomi/ap"
  cite="..." title="">
...
</blockquote>

title属性の値を消しているのは、おそらくブラウザの機能により表示されるツールチップとあれこれポップアップによる「ポップアップ」とが同時に表示されることを避けるためかと思います。

対処方法ですが、あれこれポップアップを適用している場合、title属性とap:ec-title属性は必ずどちらか一方のみに値が入るので、contentプロパティで両方をならべることで常にtitle属性の値を表示できます。

あれこれポップアップ + CSS生成内容表示サンプル(2)(HTML)

blockquote:before {
  content: "(" attr(title) attr(ap\:ec-title) "より引用)";
  ...
}

しかしながら、この方法では application/xhtml+xml で提供されたXHTML文書で通用しません。先ほどは説明を省略したのですが、じつは ap:ec-title属性というのは実際には「http://www.remus.dti.ne.jp/~a-satomi/ap というXML名前空間に属するec-title属性」となるためです。HTML文書においては名前空間が扱われないので先ほどのようなCSSの書き方でよかったのですが、application/xhtml+xmlなXHTML文書ではそのへんも厳密に扱われるため、CSSでもきちんと名前空間の指定をしておく必要があります。

あれこれポップアップ + CSS生成内容表示サンプル(2)(XHTML)

@namespace ap url(http://www.remus.dti.ne.jp/~a-satomi/ap);

...

blockquote:before {
  content: "(" attr(title) attr(ap|ec-title) "より引用)";
  ...
}

重要な註: しかしながらこの方法はOpera 9では通用しません(エラーコンソールでは"Declaration syntax error"となります)。CSS support in Opera 9では分からなかったのですが、どうも attr(n|e) という値に対応していないようです。Opera 9.01で確認。

HTML文書・XHTML文書両方に対応したCSSにするのであれば、CSSの先頭の方で @namespace ap url(http://www.remus.dti.ne.jp/~a-satomi/ap);という名前空間宣言をした上で、contentプロパティでは attr(title)、attr(ap\:ec-title)、attr(ap|ec-title) を並べておけばよい、ということになります。

@namespace ap url(http://www.remus.dti.ne.jp/~a-satomi/ap);

...

blockquote:before {
  content: "(" attr(title) attr(ap\:ec-title) attr(ap|ec-title) "より引用)";
  ...
}

ちなみに、@namespaceを入れる位置は、@charsetと@importの後、かつ他のスタイル規則の前である必要があるようです。参照: CSS Namespace Enhancements (Proposal)

* * *

本文書は hxxk.jp - txqz への先読みと質問に触発されて書きました。関連していわゆる「闇黒式引用」にもここで挙げた現象についての言及があります。

あれこれポップアップとCSS生成内容

案内