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には頑張ってもらいたい所ですが・・
