CSS3 もだいぶ普及し、もう CSS といえば CSS3 のことを指すようになって久しいが、実は CSS3 にはまだ未勧告の面白い機能がたくさんある。本稿では、CSS Counter Styles Level 3 について紹介する。

何はともあれ、デモページ を作ったのでまずはこちらを見てほしい。手元の環境の中だと、 macOS の Firefox で閲覧するのがブラウザサポート & システムのフォント的に一番見栄えが良くなった。

CSS Counter Styles Level 3 は、端的に言えば <ul> や <ol> などの箇条書きタグでカウンタをどのように表示するか？ということを定めるための規格である。デフォルトでは、 <ul> は黒丸が、 <ol> では 1, 2, 3 … と十進法が用いられる。規格はざっくりと 2 つのパートに分かれており、前半では自前でカウンタを実装するための@-ルールが、後半ではデフォルトで使えるカウンタ指定子が定義されている。

自前でカウンタを実装するための@-ルール

@counter-style ルールを用いて、自分の好きなようにカウンタを実装できる。以下は 3 進法カウンタの実装例。

@counter-style ternary {
    system: numeric;
    symbols: '0' '1' '2';
}

このカウンタを <ul> に適用すると、1, 2, 10, 11, 12, … といった具合にカウントされる。system には位取り記数法を示す numeric 以外にも 様々なルール を指定できる。また、 prefix や range など、見た目を制御するための機構がたくさん入っているので、かなり自由度は高い。

デフォルトで使えるカウンタ指定子

Internationalization Working Group が 様々な言語向けの counter-style ルールを公開 している。以下は公開されている 128 種の指定子の一覧。

arabic-indic, arabic-abjad, maghrebi-abjad, persian, persian-abjad, persian-alphabetic, armenian, lower-armenian, upper-armenian, bengali, lower-belorussian, lower-bulgarian, lower-macedonian, lower-russian, lower-russian-full, lower-serbo-croatian, lower-ukrainian, lower-ukrainian-full, upper-belorussian, upper-bulgarian, upper-macedonian, upper-russian, upper-russian-full, upper-serbo-croatian, upper-ukrainian, upper-ukrainian-full, devanagari, hindi, afar, agaw, ari, blin, dizi, gedeo, gumuz, hadiyya, harari, kaffa, kebena, kembata, konso, kunama, meen, oromo, saho, sidama, silti, tigre, wolaita, yemsa, georgian, greek-lower-modern, greek-upper-modern, greek-lower-ancient, greek-upper-ancient, lower-greek, gujarati, gurmukhi, hebrew, cjk-decimal, cjk-earthly-branch, cjk-heavenly-stem, japanese-informal, japanese-formal, korean-hanja-informal, korean-hanja-formal, circled-ideograph, parenthesized-ideograph, hiragana, hiragana-iroha, katakana, katakana-iroha, circled-katakana, kannada, cambodian, khmer, khmer-consonant, circled-korean-consonant, circled-korean-syllable, korean-consonant, korean-hangul-formal, korean-syllable, parenthesized-hangul-consonant, parenthesized-hangul-syllable, lao, fullwidth-lower-alpha, fullwidth-upper-alpha, lower-alpha, lower-alpha-symbolic, lower-oromo-qubee, upper-alpha, upper-alpha-symbolic, upper-oromo-qubee, parenthesized-lower-latin, lepcha, malayalam, mongolian, myanmar, shan, oriya, ancient-tamil, tamil, telugu, thai, thai-alphabetic, tibetan, binary, circled-decimal, circled-lower-latin, circled-upper-latin, decimal, decimal-leading-zero, dotted-decimal, double-circled-decimal, filled-circled-decimal, fullwidth-decimal, fullwidth-lower-roman, fullwidth-upper-roman, lower-hexadecimal, lower-roman, new-base-60, octal, parenthesized-decimal, simple-lower-roman, simple-upper-roman, super-decimal, upper-hexadecimal, upper-roman

このうち、CSS Working Group では CSS3 の規格として

decimal, decimal-leading-zero, arabic-indic, armenian, upper-armenian, lower-armenian, bengali, cambodian, khmer, cjk-decimal, devanagari, georgian, gujarati, gurmukhi, hebrew, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, lower-roman, upper-roman, tamil, telugu, thai, tibetan, lower-alpha, lower-latin, upper-alpha, upper-latin, cjk-earthly-branch, cjk-heavenly-stem, lower-greek, hiragana, hiragana-iroha, katakana, katakana-iroha

の 39 種類と、言語に依らない disc, circle, square, disclosure-open, disclosure-closed の合計 44 種類を定めており、これらの値はブラウザにより実装される。

また、CSS3 の規格に入っていない 89 種類についてはブラウザによる実装が保証されないが、Internationalization Working Group が公開しているコードを直接コピーして使用することが許可されている。ブラウザによってはこの 89 種類のうちいくつかが独自に実装されているケースもある。