content プロパティに関するいくつかのメモ

content プロパティに、任意の文字列と HTML の属性値を混在させる

:before 擬似要素 / :after 擬似要素の活用例で紹介したように、 hxxk.jp では CSS を用いて引用元の明示や削除・追記の時間の明示を行っています。

先日 IRC チャンネル #hxxk で Code-404 | Hatena::Diary::Code-404 のシンヤさんと話していたところ、 content プロパティの値に " が余分に書かれているんじゃないかということが分かりました。

blockquote[title]::before {
  display :         block ;
  content :         ""attr(title)" \003088 \00308a \005f15 \007528" ;
  border-bottom :   3px double #333 ;
  margin-bottom :   0.2em ;
  padding-top :     0.2em ;
  padding-bottom :  0.2em ;
  padding-left :    1em ;
  font-size :       80% ;
  font-weight :     bold ;
  font-family :     "Trebuchet MS",sans-serif ;
  }

これが元々 hxxk.jp で用いていた記述で、次に示すのが指摘を受けて修正した記述です。

blockquote[title]::before {
  display :         block;
  content :         attr(title)" \003088 \00308a \005f15 \007528" ;
  border-bottom :   3px double #333 ;
  margin-bottom :   0.2em ;
  padding-top :     0.2em ;
  padding-bottom :  0.2em ;
  padding-left :    1em ;
  font-size :       80% ;
  font-weight :     bold ;
  font-family :     "Trebuchet MS",sans-serif ;
  }

どう違うのかというと、 content プロパティの値に任意の文字列と HTML の属性値を混在させて指定する場合は、 attr(X) の値を " で括らなければいけないと私が勝手に思い込んで、結果として " による括りが過剰になってしまっていたのです。 おそらく、こういった指定をあれこれ試していた際にこの過剰な括りが生じたのだと思いますが、今となっては何故そうしたのか思い出せません……。 とりあえず、今後同じミスをしないようにここにメモしておきます。

擬似要素を記述する際の Tips

今回の CSS のコードサンプルでは blockquote[title]::before のような書き方をしています。 何故 : を 2 つ連続して書いているか、たまにその理由を聞かれますが、いつも参考にしたページを見失うことを思い出したので合わせてメモ。

元々は Lucky bag::blog: 疑似要素の表記法で知ったのですが、 CSS3 のセレクタの Last Call ( 2005 年 12 月 15 日現在 ) の Selectors - Pseudo-elements によると、

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

のように示されており、 Lucky bag::blog: 疑似要素の表記法にて主なブラウザの大部分はその記述に対応していることまで検証されているので、 hxxk.jp でも取り入れています。

なお、 Lucky bag::blog: 疑似要素の表記法では Candidate Recommendation と書かれていますが、 CSS: under construction によると 2005-12-15 Last call: Selectors と、まだ Last call であるようです。 ( Last call や Candidate Recommendation などの用語については W3C勧告プロセスの概要 - W3C勧告までの過程を参照してください。 )

content プロパティで文字列を追加する際は Safari のバグに注意 ( 再掲 )

Safari と content プロパティでも触れましたが、 Safari には content プロパティに指定した日本語文字が文字化けして表示されるというバグが存在します。

そのバグを回避するために、日本語文字を使用する場合は content : attr(title)" \003088 \00308a \005f15 \007528" ; のようにバックスラッシュでエスケープする必要があります。 ( この例は、 attr(title)" より引用" という記述をエスケープしたものです。 )

バックスラッシュでエスケープする際は、数値文字参照用変換スクリプトを使うと非常に簡単にエスケープできますので、改めて紹介しておきます。

Safari は attr(X) に未対応 ?

仕様を読み返したついでに、手元のスタイルシートサンプルブックも確認していたら、気になる記述がありました。

CSS で追加する内容は content プロパティで指定します。 そして、それを要素の前に追加したい場合はセレクタの最後に「:before」を、後に追加したい場合には「:after」をつけます。

仕様上は様々な内容を追加できるのですが、 N6 ～ 7 と Opera6 ～ 7 で共通して対応しているのは、文字列と HTML で指定してある属性の値です（Safari は属性の値には対応していません）。

これって、 Safari は content プロパティの値に attr(X) が指定されていても、それに対応していないということなのでしょうか……。 私は Windows 環境しかありませんので確認はできませんが、もしそれが本当なら blockquote 要素による引用部分はことごとく より引用 とだけしか表示されていないということになるのかなあ。