カスタムカウンタースタイルについて知らないかもしれないこと

Juanは最近、ルールの年鑑エントリにスタイルリスト（特にリストマーカー）について非常に興味深いことを明らかにしました。あなたはすでに@counter-stylepseudo-elementについて学んだかもしれません。おそらく、::markerおよびcounter-resetカスタムカウンターを使用してみました。あるいは、あなたのアプローチは、counter-increment（これを行うように注意してください！）をクリアし、リスト項目のlist-stylepseudo-elementのマークを手動でスクロールすることです。 ::before

しかし、あなたは試しました

？それは多くの重い仕事をしており、リストとリストタグを使用する新しい方法を開きます。 @counter-style 1つのリスト項目のみでマーキングスタイルを設定します

これは、特定のプロジェクトに設定された「固定」システムと呼ばれます。

特定のタグに文字を割り当てます

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "?";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

「蓄積」システムを使用する場合、どのシンボルがリスト項目に属するかを定義できます。

システムがループの端に到達すると、パターンの最初の項目に基づいて新しいシーケンスを繰り返して起動することに注意してください。たとえば、典型的なサイコロには6つの側面があり、7番目のリスト項目で2つのダイスを巻き始めます。

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

リストタグにプレフィックスと接尾辞を追加

ずっと前、クリスはリスト項目の擬似要素を使用して、リストマークの最後に句読点を挿入する方法を示しました：

::before使用が簡単です

今：

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

@counter-styles複数のリスト項目のスタイルを設定します

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

10個のアイテムのリストがあると仮定しますが、1〜3個のアイテムをスタイリングしたいだけです。これの範囲を設定できます：

以前に自分のサイコロの例を拡大することもできます：

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

もう1つの方法は、最初の値として

キーワードを使用することです。

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

infiniteと言えば、2番目の値に設定できます。これは、持っているリスト項目の数に基づいて無制限にカウントされます。

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: infinite 3;
}

li {
  list-style: single-range;
}

たぶん、2つの範囲を一度にスタイルし、アイテム6〜9を含めたいと思うかもしれません。なぜこれをやりたいのかわかりませんが、あなた（またはあなたのカバ）には正当な理由があると思います。

infinite

パディングを追加してマーカーをリストします

リストマークの不均一なアライメントに遭遇したことがありますか？これは通常、1桁から2桁です。コンテンツを揃えるために、マークを追加文字で埋めることができます。

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends dice;
  suffix: ".";
  range: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

今では、マークは常に整列します...まあ、最大999のアイテム。

要約

/* 为列表项标记添加前导零 */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

これらは、CSSのリストタグを使用する非常に興味深い方法であると思います。そして、2023年9月のベースライン「新たに利用可能な」機能になると、ブラウザでは十分にサポートされています。

@counter-style

以上がカスタムカウンタースタイルについて知らないかもしれないことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。