Firefox 39からlist-style-typeプロパティーで文字列が使えるようになる。今までは文字列を使おうとすると擬似要素経由で行うことになったため、デフォルトで要素の外側に配置されるリスト・マーカーと違和感のないように行うのはなかなか難しかった。そういった点が解決しやすくなったことや、Emojiを利用したリスト・マーカーなど、明快に広がる使い勝手の良さもあるが、他にも横並びのリストの区切りが作りやすくなる。
Demo: list-style-type: "string"
デモでは横並びのリストの区切りにMiddle Dot(·)を使っている。ウェブサイトのフッターにあるリンク・リストなどでよくみる形のものだ。擬似要素でやる場合は、li要素のスタイルのリセットに加えて擬似要素の追加が必要になるが、list-style-typeプロパティーが使える場合はずっと簡単になる。
li {
float: left;
list-style-position: inside;
list-style-type: " · ";
}
li:first-child {
list-style-type: "";
}擬似要素を使う場合と比べて少しシンプルに、そして直観的なコードになっていることと思う。リスト項目と区切りの間の空白も文字列でコントロールすることができるので、文字列ベースの区切りにはもってこいだろう。ただし連続した空白はもちろんまとめられるので、非改行スペース(\a0)をうまく使うときれいに調節することができる。
区切りに使える文字列の自由度はかなり高い。Emojiもそうだが、ユニコードで定義されている多くのシンボル文字を使うことももちろん出来る。サブセット化したアイコン・フォントとも相性が良いと考えられるが、それは素直にSVGにしてlist-style-imageプロパティーで参照した方が良いだろう。
このlist-style-typeプロパティーにおける文字列の利用は、随分前から仕様では定義されていた(2011/05/24付けのWorking Draftからのようだ)が、実装は今月にリリースをひかえるFirefox 39が最初となる。そのため気軽に使えるようになるまではかなりの時間がかかることだろう。このような具体的で実践的な利用例を挙げることで、実装が進むことを期待したい。