hogashi.*

日記から何から

CSSのcounters()で箇条書きの数字をカスタマイズできておもしろい

 CSS に counters() というのがあって、 1.1 とかをカスタマイズできておもしろい。 counters() - CSS: Cascading Style Sheets | MDN
  というのをシンボルに使うことにして、繋ぎを にするとこうなる。

@counter-style kotonohanoniwa {
  system: fixed;
  symbols: 言 葉 庭;
  suffix: " ";
}

ol {
  counter-reset: kounter;
}
ol li {
  counter-increment: kounter;
  margin-left: 30px;
}
ol li::marker {
  content: counters(kounter, 'の', kotonohanoniwa) ") ";
}

 実際に ol で見るとこう。

  1. 1
    1. 1, 1
      1. 1, 1, 1
      2. 1, 1, 2
      3. 1, 1, 3
    2. 1, 2
      1. 1, 2, 1
      2. 1, 2, 2
      3. 1, 2, 3
    3. 1, 3
      1. 1, 3, 1
      2. 1, 3, 2
      3. 1, 3, 3
  2. 2
    1. 2, 1
      1. 2, 1, 1
      2. 2, 1, 2
      3. 2, 1, 3
    2. 2, 2
      1. 2, 2, 1
      2. 2, 2, 2
      3. 2, 2, 3
    3. 2, 3
      1. 2, 3, 1
      2. 2, 3, 2
      3. 2, 3, 3
  3. 3
    1. 3, 1
      1. 3, 1, 1
      2. 3, 1, 2
      3. 3, 1, 3
    2. 3, 2
      1. 3, 2, 1
      2. 3, 2, 2
      3. 3, 2, 3
    3. 3, 3
      1. 3, 3, 1
      2. 3, 3, 2
      3. 3, 3, 3

 数字は何個目の箇条かを書いただけで、 MDN の例に倣うとこれも counters() で出せるっぽい。というか今は marker の contents として counters してるというだけで、どこに出してもいいわけだから、なんかおもしろい使い方ができそう。

 追記) ブコメに書いてもらってて気づいたけど、 Safari だと @counter-style が未実装でただの数字に見える。 MDN とかをよく見ると Chrome などでもまだ完全な実装ではないっぽい。 @counter-style - CSS: Cascading Style Sheets | MDN

Does not support as a value for the symbols descriptor.

https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style

 というかいずれ画像も使えるようになるのか、便利そう……。