CSSカウンターとそのユースケースの理解-IT業界-php.cn

CSSカウンターとそのユースケースの理解

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

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

キーテイクアウト

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

CSSカウンターの実用的なケースは、W3Cのセレクターレベル4仕様で見られ、コンテンツ内に散在する「問題」と「例」を数えるために使用されます。これにより、番号を自動的に更新しながら、アイテムを簡単に追加、取り外し、または並べ替えることができます。
CSSカウンターでは、順序付けられたリストの仕組みと同様に、ダイナミック番号を使用してCSSのアイテムを数字にすることができます。しかし、CSSカウンターはまったく異なります。この機能では、いくつかのカウンター固有のCSSと組み合わせた擬似エレメントを使用して、指定された要素のセットに動的な「カウント」を追加/準備します。

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

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

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

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

<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つの大きな問題が発生します。

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

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

要素を備えた
1. アクセシビリティに関連するもう1つの問題は、過去ほど大きな問題ではないようです。レオニー・ワトソンによる記事は、
「[g]エネルギーコンテンツは、ほとんどのブラウザでサポートされており、それに応じてスクリーンリーダーによって認識されます。
ただし、サポートは100％ではないので、コンテンツを生成して擬似要素を使用する場合、「コンテンツ」は装飾的な価値であり、その理解や機能に重要ではないはずです。そのバランスの取れたアプローチを念頭に置いて、それが含まれています。以下のような特定のケースでカウンターを使用することは問題ありません。
単純なユースケース

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

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

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

W3Cの例を再作成して、カウンターの仕組みをいじることができるだけでなく、HTMLとCSSだけを備えていない非隣接アイテムからこの方法で動的リストを作成するのがどれほど簡単かを確認できます。 CodepenのSitePoint（@SitePoint）によるPEN 20FE8F19AE48C210DA6C5DF78C0CF6F8を参照してください
デモでは、jqueryuiのソート可能な機能を使用して、「問題」や「例」ボックスなど、ページ上の段落をドラッグして再注文できます。アイテムがドラッグされる場所に応じて数値がどのように変化するかに注意してください（ただし、数字の動作はドラッグ中に少し風変わりであるように見えます）。また、W3Cのページのように、下部に重複した「問題リスト」も含めました。
結論

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

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

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

CSSカウンターは、「カウンターリセット」プロパティを使用してリセットできます。このプロパティは、任意の番号にカウンターを設定します。たとえば、「カウンターリセット：セクション;」は「セクション」カウンターをゼロにリセットします。また、「セクション」カウンターを5にリセットする「カウンターリセット：セクション5;」など、カウンターを別の数値に設定することもできます。
はい、CSSカウンターはリストで使用できます。これは、リスト項目の番号付けをカスタマイズする場合に特に便利です。「カウンターレセット」と「カウンターインクリメント」プロパティを使用して、番号付けを制御し、「コンテンツ」プロパティをカウンターの値を表示することができます。
CSSカウンターによって生成された数値は、CSSの他のテキストと同様にスタイルを整えることができます。「色」、「フォントサイズ」、「フォントウェイト」などのプロパティを使用して、数字をスタイルできます。スタイルは、「コンテンツ」プロパティによって生成されると、数値に適用されます。
CSSカウンターを使用してテーブルを番号にすることはできますか？。これは、「テーブル」要素上の「カウンターレセット」プロパティ、「TR」要素の「カウンターインクリメント」プロパティ、および「前」または「後」の「コンテンツ」プロパティを使用することで実行できます。 - 'tr'要素内のエレメント
CSSカウンターを備えたマルチレベルカウンターを作成するにはどうすればよいですか？ CSS。この関数は、レベル間のセパレーターとして使用されるカウンターの名前と文字列の2つの引数を取ります。たとえば、content：counters（ "。”）;はい、CSSカウンターは、「前」と「後の」擬似要素でよく使用されます。カウンターの値を表示するために使用される「コンテンツ」プロパティは、これらの擬似要素でのみ使用できます。「カウンターインクリメント」プロパティを使用して増加します。このプロパティは、呼び出されるたびにカウンターの値を1つ増やします。たとえば、「カウンターインクリメント：セクション;」は「セクション」カウンターを1つ増やします。。これは、「カウンターリセット」または「カウンターインクリメント」プロパティを負の数に設定することで実行できます。たとえば、「カウンターレセット：セクション-1;」は「セクション」カウンターを負のカウンターに設定します。
他のCSSプロパティでCSSカウンターを使用できますか？

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