CSSの@counter-styleでリストのマーカーを自由に生成する

Result

@counter-styleっていうのを昨日知ったのでメモ。リストのマーカーを独自定義できる、というもの。便利そうなので使い方を覚えておこうと思います。

ざっくり、使い方は以下のような感じ

@counter-style hogehoge { 
system: numeric;/*マーカーの内容*/
symbols:1 2 3;/*実際に表示されるもの。文字でも画像でもOK*/
prefix:"【";/*接頭語*/
suffix: "】 ";/*接尾語*/
 }

ul{ list-style-type: hogehoge;}/*@counter-styleで決めた名前を指定*/

他にもいろいろ詳細を定義できるようになってるみたいです。

上部動作サンプルなら以下のように。

css

@counter-style custom-counter-style {
  system: cyclic;
  symbols: "❤️" "✨" "🔥" "😊" "😂" "🥺" "❤️‍🔥" "👍" "🥰" "🐻" "🍔" "⚽" "💨"
    "🎨" " 🐶";
  suffix: ":  ";
  prefix: " ";
  fallback: disc;
}

ul {
  list-style-type: custom-counter-style;
}

html

<ul>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wedesday</li>
      <li>Thursday</li>
      <li>Friday</li>
      <li>Saturday</li>
      <li>Sunday</li>
      <li>January</li>
      <li>February</li>
      <li>March</li>
      <li>April</li>
      <li>May</li>
      <li>June</li>
      <li>July</li>
      <li>August</li>
      <li>September</li>
      <li>October</li>
      <li>November</li>
      <li>December </li>
    </ul>

can i use

各ブラウザの対応状況です。完璧ではないものの、期待は出来そうです。しかし、Safariが。

ここ数年、Safariだけ足並みが揃わない印象が強いです。iOSのbackground-attachment:fixed;や他の報告されているバグも未だに対応する気配がないですし。

個人的に今のSafariは昔のIEのようで正直困っています。シェア率を考えると無視するわけにも行きません。Chrome系がシェアの大半を占めており、Firefoxも低迷する中、割と多くのユーザーを抱えるSafariには頑張ってもらいたい所ですが・・

via

Counter style with @counter-style