おそらくあまり頻繁に使用しない特定のCSS機能があります。 CSSカウンターは私たちのほとんどにとってそのカテゴリに分類されていると思います。

彼らは多くのユースケースを持っていないようです。
それらを書き込むコードは少し複雑です。

私は最近、カウンターのための実用的なユースケースを見たので、カウンターがどのように書かれているかについて簡単なクラッシュコースを提供し、そのユースケースをここで共有すると思いました。

キーテイクアウト

CSSカウンターは、CSSで動的な番號付けを提供し、數(shù)字を手動で調整する必要なく並べ替えることができます。これは、擬似要素とカウンター固有のCSSを使用することで達成されます。

初期の複雑さにもかかわらず、CSSの擬似要素の概念が理解されると、CSSカウンターは維持するのが難しくありません。生成されたコンテンツにはアクセシビリティの懸念があるかもしれませんが、ほとんどのブラウザはそれをサポートし、スクリーンリーダーによって認識されます。
• CSSカウンターの実用的なケースは、W3Cのセレクターレベル4仕様で見られ、コンテンツ內に散在する「問題」と「例」を數(shù)えるために使用されます。これにより、番號を自動的に更新しながら、アイテムを簡単に追加、取り外し、または並べ替えることができます。
CSSカウンターのクラッシュコース
• CSSカウンターでは、順序付けられたリストの仕組みと同様に、ダイナミック番號を使用してCSSのアイテムを數(shù)字にすることができます。しかし、CSSカウンターはまったく異なります。この機能では、いくつかのカウンター固有のCSSと組み合わせた擬似エレメントを使用して、指定された要素のセットに動的な「カウント」を追加/準備します。
ここにコードの例があります。この記事の最後にあるデモで使用するものと同様です。

最初の宣言ブロックは、カウントの範囲を定義します。これが意味するのは、私のカウンターが.containerのクラスを持つ要素內でのみ増分することです。 「問題」と呼ばれるカスタム識別子を選択しました。これは、カウントされる要素にコンテナをリンクするために必要です。

2番目の宣言ブロックは、次のことを使用します：擬似要素の前（代わりに：後に使用できますが、それはカウンターではまれです）と、定義されたコンテンツを準備するコンテンツプロパティ。

コンテンツプロパティの値の一部として、JavaScriptまたはその他のより典型的なプログラミング言語で行われる可能性のあるものと同様に、Counter（）関數(shù)を文字列とともに使用しています。カウンター（）関數(shù)は、2つの引數(shù)を取ります。カウンター識別子（この場合は「問題」）とカウンタースタイルは、リストスタイルタイプのプロパティに使用される任意の任意の値になります。デフォルトは「小數(shù)」で、この例で使用しています。

カウンターがどのように機能するかを混亂させている場合、このミニのインフォグラフィックが役立つかもしれません：

<span><span>.container</span> {
</span>  <span>counter-reset: issues 0;
</span><span>}
</span>
<span><span>.issue:before</span> {
</span>  <span>counter-increment: issues 1;
</span>  <span>content: "Issue " counter(issues, decimal);
</span>  <span>display: block;
</span><span>}</span>

そしてそれだけでは不十分な場合は、私が元々同様のインフォグラフィックを公開した私自身の記事を含む、より多くの情報を含むいくつかの追加のリソースを以下に示します：

• CSSカウンター：カウンターインクリメントと友人（印象的なウェブ）
• CSS生成コンテンツとカウンターから利益を得る方法（Smashing Magazine）
• CSSカウンタースタイルレベル3（W3C仕様）

その最後のリンクは、Counters Specの編集者ドラフトであり、おそらくあまりブラウザーサポートがあり、SPECの將來のバージョンではリスクにさらされている可能性のある新しい反関連機能を紹介します。ただし、この記事で使用している機能は、クロスブラウザーで、IE8に戻ります。 CSSカウンターの値の決定

表面的な視線では、CSSカウンターの実裝について最初に考えるときに2つの大きな問題が発生します。

注文リストはすでにこれを行っているので、なぜアイテムを數(shù)えるためだけにこんなに複雑な機能が必要なのでしょうか？

生成されたコンテンツにアクセスできず、これはコンテンツとプレゼンテーションを混合しています。

これらの2つの問題の最初は、実際にはまったく問題ではありません。番號が付いているアイテムが必要な場合は、順序付けられたリスト（つまり、ネストされた
2. 要素を備えた
   ）を使用することが適切です。ただし、CSSカウンターは、連続したアイテムの番號を付けるためのものではありません。彼らは、彼らがDOMのどこにいても、それぞれに加えられた數(shù)を変更する必要なくそれらを再注文することができるように、彼らが非継続的なアイテムに番號を付けるためのものです。 さらに、カウンターは一見すると少し複雑になる可能性がありますが、CSSの擬似要素の概念を把握すると、変更して維持することはそれほど難しくありません。
   1. アクセシビリティに関連するもう1つの問題は、過去ほど大きな問題ではないようです。レオニー?ワトソンによる記事は、
   と結論付けました

   「[g]エネルギーコンテンツは、ほとんどのブラウザでサポートされており、それに応じてスクリーンリーダーによって認識されます。

   ただし、サポートは100％ではないので、コンテンツを生成して擬似要素を使用する場合、「コンテンツ」は裝飾的な価値であり、その理解や機能に重要ではないはずです。そのバランスの取れたアプローチを念頭に置いて、それが含まれています。以下のような特定のケースでカウンターを使用することは問題ありません。

   単純なユースケース

   最近、私はW3Cのセレクターレベル4仕様を見ていましたが、コンテンツ內に「問題」と「例」が散在していることに注目しました。私はこれを以前に見たことがありますが、それから少し調査することにしました。これらの要素には番號が付けられているので、毎回セット全體を再番號を変更する必要なく、それらをどのように追加および削除できるのか疑問に思いました。私はそれがおそらくスクリプトであるか、そうでなければバックエンドまたはそのようなもので生成されたと思った。

   nope。以下のスクリーンショットに示されているように、彼らはCSSカウンターを使用しています：

   

   ページでは、問題（赤い箱）と番號付き例（黃色の箱）を數(shù)えています。カウントされた各セットのカスタム識別子を使用すると、アイテムを簡単に追加、削除、または再注文することができます。CSSは、正しい番號をアイテムに自動的に追加します。 さらに、これらの仕様ページには、ページの最後に問題インデックスも含まれています。これは、問題と同じカウンター識別子を使用しますが、新しいスコープでカウントを新鮮に開始します。重複する問題リストは、問題を維持するためにもう少し作業(yè)を作成しますが、コンテンツ本體で変更されたものと一致する限り、順序は一般的に維持できます。

   ドラッグアンドドロップデモ

   W3Cの例を再作成して、カウンターの仕組みをいじることができるだけでなく、HTMLとCSSだけを備えていない非隣接アイテムからこの方法で動的リストを作成するのがどれほど簡単かを確認できます。 CodepenのSitePoint（@SitePoint）によるPEN 20FE8F19AE48C210DA6C5DF78C0CF6F8を參照してください

   デモでは、jqueryuiのソート可能な機能を使用して、「問題」や「例」ボックスなど、ページ上の段落をドラッグして再注文できます。アイテムがドラッグされる場所に応じて數(shù)値がどのように変化するかに注意してください（ただし、數(shù)字の動作はドラッグ中に少し風変わりであるように見えます）。また、W3Cのページのように、下部に重複した「問題リスト」も含めました。

   結論

   これにより、CSSカウンターを使用できるものがもう少し明確になります。頻繁に編集されるドキュメントを考えてみてください。おそらく、ユーザーがアイテムを再ソートまたは再注文できる場所で生成したものも考えてください。そして、前述のように、これらの種類のカウンターは、コンテンツの理解に番號付けが不可欠ではなく、アイテムがソース內で隣接していない場合に役立つ可能性が最も高くなります。

   他の便利な方法でCSSカウンターが使用されているのを見たことがある場合は、コメントでお知らせください。 CSSカウンターに関するよくある質問（FAQ）

   さまざまなタイプのCSSカウンターは何ですか？

   CSSカウンターには、「カウンター」と「カウンター」の2つのタイプがあります。 「カウンター」タイプは、ドキュメントの見出しの番號付けなど、単一レベルのカウンターに使用されます。一方、「カウンター」タイプは、セクション內のサブセクションの番號付けなど、マルチレベルカウンターに使用されます。両方のタイプは、CSSの「コンテンツ」プロパティで使用され、カウンターの値を表示します。

   CSSカウンターをリセットするにはどうすればよいですか？

   CSSカウンターは、「カウンターリセット」プロパティを使用してリセットできます。このプロパティは、任意の番號にカウンターを設定します。たとえば、「カウンターリセット：セクション;」は「セクション」カウンターをゼロにリセットします。また、「セクション」カウンターを5にリセットする「カウンターリセット：セクション5;」など、カウンターを別の數(shù)値に設定することもできます。

   はい、CSSカウンターはリストで使用できます。これは、リスト項目の番號付けをカスタマイズする場合に特に便利です。 「カウンターレセット」と「カウンターインクリメント」プロパティを使用して、番號付けを制御し、「コンテンツ」プロパティをカウンターの値を表示することができます。

   CSSカウンターによって生成された數(shù)値は、CSSの他のテキストと同様にスタイルを整えることができます。 「色」、「フォントサイズ」、「フォントウェイト」などのプロパティを使用して、數(shù)字をスタイルできます。スタイルは、「コンテンツ」プロパティによって生成されると、數(shù)値に適用されます。

   CSSカウンターを使用してテーブルを番號にすることはできますか？ 。これは、「テーブル」要素上の「カウンターレセット」プロパティ、「TR」要素の「カウンターインクリメント」プロパティ、および「前」または「後」の「コンテンツ」プロパティを使用することで実行できます。 - 'tr'要素內のエレメント

   CSSカウンターを備えたマルチレベルカウンターを作成するにはどうすればよいですか？ CSS。この関數(shù)は、レベル間のセパレーターとして使用されるカウンターの名前と文字列の2つの引數(shù)を取ります。たとえば、content：counters（ "?！保?はい、CSSカウンターは、「前」と「後の」擬似要素でよく使用されます。カウンターの値を表示するために使用される「コンテンツ」プロパティは、これらの擬似要素でのみ使用できます。 「カウンターインクリメント」プロパティを使用して増加します。このプロパティは、呼び出されるたびにカウンターの値を1つ増やします。たとえば、「カウンターインクリメント：セクション;」は「セクション」カウンターを1つ増やします。 。これは、「カウンターリセット」または「カウンターインクリメント」プロパティを負の數(shù)に設定することで実行できます。たとえば、「カウンターレセット：セクション-1;」は「セクション」カウンターを負のカウンターに設定します。

   他のCSSプロパティでCSSカウンターを使用できますか？

   はい、CSSカウンターは他のCSSプロパティで使用できます。たとえば、「コンテンツ」プロパティを使用して「カウンター」または「カウンター」関數(shù)を使用して、カウンターの値を表示できます。また、任意の要素を使用して「カウンターレセット」および「カウンターインクリメント」プロパティを使用して、カウンターの値を制御することもできます。

以上がCSSカウンターとそのユースケースの理解の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。