counters()で悪戦苦闘中
CSSのカウンタで悪戦苦闘中
ol要素のstart属性の代わりに、CSSのcounter-incrementとcounter-resetを使い始めたはいいが、Safariも現時点では対応してないつーじゃん。
SafariはAcid2テストを最初にパスしたと聞いていたので、てっきり対応してるものだとばかり思ってた。
KonquerorのサイトのCSS Support in KHTMLには、KHTML is one of the only browsers to support generated quotes and counters.
と高々と謳っているのに。
これは困ったなぁ...
CSS Hackでも使うしかないのかなぁ?
そしてもう1つ。 こちらの方が本題というかこのところの悩みのタネになっているのが、Operaのcounters()の振る舞い。
テストケースを用意してみた。 テストケース1、テストケース2。
両者の違いはli::before{}における指定のみ。
- テストケース1では、
content : counter(item) '. ';
- テストケース2では、
content : counters(item, '.', decimal) '. ';
そして、テストケース2の時、Opera(8.54&9.0Beta2)は次のような表示になる。
1. One 2. Two 3. Three 3.1. Three - One そして 3.1. 一 3.1.1. 一の一 3.1.1.1. 一の一の一
なぜ2番目のol要素(漢数字の方)が、あたかも最初のol要素の3項目のli要素(Three)の「子」であるかのように番号が振られるのか(3.1.から始まるのか)、どうにも理解しきれずにいる。 バグのような気もするが確信が持てず、Operaの質問箱でも聞いてはみたのだが。
そんな折、A blog? with Σαιτωの6月10日の記述に、
- bugzilla.mozilla.org にあるカウンタ・テストでも Firefox は 0 から数えるっぽい。build 328 は正常にリファレンス通り。
とあった。 bugzilla.mozilla.org にあるカウンタ・テストのcase2も、そこで提示されている画像イメージ通りになっているのでしょうか? 自分でもWindows版のWeeklyを落としてきて表示してみたところ、やっぱり余計な連番が頭にくっついているんですが、これは私だけなの?
「実装」の違いの問題なの? それともバグなの? うちの環境特有な現象なの? あぁ悩ましい...
追記
早速Saitoさんが再検証してくださったようです(感謝)。 CSS - カウンタ 14:28。
なんだかかえって申し訳ないような。
"counters()で悪戦苦闘中"へのTwitter上でのコメントやRT
ツイートを取得できませんでした。