CSS で楽しいひとときcounters_html/css_WEB-ITnose

CSS カウンターは、「すごいね、CSS でこんなことができるなんて知らなかった」というとても楽しい機能の 1 つです。つまり、CSS を使用すると、JavaScript を使用せずに一定量を継続的に増やすことができます。

シンプルなカウンター

この簡単なページネーションの例から始めます:

表示される数字は HTML にハードコーディングされておらず、次の CSS によって生成されます:

1

2

3

4

5

6

7

8

9

10

11

body {

counter-reset : pages; // カウンタを初期化します

}

a {

counter-increment : pages; // カウンターをインクリメントします

}

a::before {

content : counter (pages) // カウンターを表示します

}

カウント;属性は次のルールに従います「文書出現順序」。最初に Body 要素に遭遇し、pages と呼ばれるカウンターを初期化します。次に、a 要素に遭遇すると、ページ カウンタがインクリメントされて表示されます。

複数のカウンター

異なる名前を持つ複数のカウンターを持つことができます。この例には、重複するカウント範囲、セクション、ボックスを持つ 2 つのカウンターがあります:

関連 CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

1 8

19

body {

カウンタリセット : セクションボックス

}

セクション {

カウンタインクリメント : セクション;

}

セクション::before {

コンテンツ : 'セクション ' カウンタ (セクション);

.box {

カウンター-increment：boxes; （2行目）。ちょっとした工夫として、ボックス カウンタはアッパーローマ字で表示されます (18 行目)。表示のすべてのオプションは list-style-type 属性の場合と同じです。ドキュメントは次のとおりです。

統計ユーザーの選択

今度は何か楽しいことをやってみます。 count 属性は、:checked のような擬似クラス セレクターに配置できます (訳者注: 原文は擬似セレクターですが、通常は擬似クラス セレクターと書かれているため、通常は擬似クラス セレクターと訳されます)。これにより、チェックボックスによるユーザーの選択をカウンターに反映できるようになります。次の例では、ユーザーが選択した項目の数をカウントします。

CSS は前の例からわずかに変更されただけです。唯一の違いは、疑似クラス セレクター (input:checked) で値をインクリメントし、専用の .total 要素にのみ表示することです。

1

2

3

4

5

6

7

8

9

10

11

body {

カウンタリセット : 文字 }

input:checked {

カウンタインクリメント : 文字;

}

.total::after {

コンテンツ : カウンタ (文字) }

制御増分

1 ずつ自動的に増加する必要はありません。必要な量を追加できます。マイナス成長になることもあります。前の例を基にして、この例では各セレクターに特別な増分を設定します。

構文は非常に単純です。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

ボディ {

カウンタリセット : 合計

}

#a:checked { カウンタインクリメント : 合計 64; }

#b:checked { カウンタインクリメント : 合計 16 }

#c:checked { カウンタ-インクリメント : 合計 -32 ; }

#d:checked { カウンタインクリメント : 合計 128 }

#e:checked { カウンタインクリメント : 合計 4 }

#f:checked { カウンタインクリメント : 合計-8 ; }

.sum::before {

.

1

2

3

body { counter-reset : kittens 41 // 41 匹の子猫から始める

}

潜在的な落とし穴

display:none 要素はそうではありませんカウントがトリガーされます。要素を非表示にしてもカウントをトリガーしたい場合は、別の方法で要素を非表示にする必要があります。これは一方向です:

1

2

3 4

input {

位置 : 絶対

left : -9999px ;

}

もしかしたらここに気づいたかもしれません行きます。これはまさに、最後の 2 つの例で私が行ったことです。効果を示すために、現在のチェックボックスを非表示にしましたが、選択されたときにチェックボックスをカウントする必要があります。

結論

素晴らしいですね、ブラウザは CSS カウントをサポートしています。頑張ってください~

CSS カウンターは素晴らしいですが、私たちの古い友人である

と
1. を忘れないでください。基本的なリストにそれらを並べるのはやはり良いことです。 CSS カウンターはあらゆる要素に作用するため、特に構文的にも意味的にも柔軟性が高く、最適な方法です。

   アップデート: アクセシビリティについて言及する必要があります。 CSS カウントは、疑似クラス要素内で生成されたコンテンツに依存します。一部のスクリーン リーダーはそれを読み上げますが、一部のスクリーン リーダーは読み上げません。したがって、重要なコンテンツについては疑似クラス要素に依存しないことが最善です。サンプル チュートリアルの CSS カウンターは適切に設計されていますが、運用環境では変更せずに使用します。

   CSS カウンターで楽しい時間