CSS2.1でめったに使用されない機能の1つはカウンターです。 それらは、コンテンツ生成の仕様セクションで説明されています。 これは何？
カウンターとコンテンツプロパティを使用して通常の番号付きリストをエミュレートする仕様の例を示します。
OL {counter-reset：item}
LI {表示：ブロック}
LI：{content：counter（item） "。";の前。 カウンターインクリメント：アイテム}
最初のルールでは、OLエレメントに「item」という名前のカウンターを割り当てます。次に、すべてのLIについて、表示プロパティの値をデフォルト値（list-item）ではなくブロックに変更します。 最後に、最後のルールでは、リストの各要素のカウンターをインクリメントし、counter（）関数とcontentプロパティを使用して、要素の前に値を表示します。 すべてがシンプルです。
カウンターメカニズムを使用すると、番号1、1.1、1.2の番号付きリストを作成できます。 さらに、マーカー自体は、たとえば次のコードの結果として、非常に柔軟にフォーマットできます。
< style >
OL { counter-reset: item }
LI { display: block }
LI:before { content: "{" counters(item, ".") "} "; counter-increment: item; font-weight:bold }
</ style >
< ol >
< li > item 1, level 1 </ li >
< li > item 2, level 1 </ li >
< li > item 3, level 1 </ li >
< li > item 4, level 1
< ol >
< li > item 1, level 2 </ li >
< li > item 2, level 2 </ li >
< li > item 3, level 2 </ li >
</ ol >
</ li >
< li > item 5, level 1 </ li >
</ ol >
* This source code was highlighted with Source Code Highlighter .
次のリストを取得します。
counters（）関数は、値を表示するカウンターの名前と、ネストされたカウンターの値間の区切り線（この場合はピリオド）の2つのパラメーターを取ります。 また、2番目のパラメーターは、list-style-type属性の可能な値のいずれかを指定できます。 なし、ディスク、円、正方形。 最後の3つのケースでは、リストは、対応するタイプのマーカーを持つ通常の順序付けられていないリストのように見えます。
しかし、それだけではありません
カウンターの助けを借りて、スクリプトの助けだけで最近行われたことを実現することができます-要素をカウントし、ページにカウントの結果を表示します。 たとえば、このようなコードの結果：
< style >
div {counter-reset: num-p} /* num-p */
div p {counter-increment: num-p;margin:0} /* p div */
div:after { /* */
display:block;font-weight:bold;
content: " : " counter(num-p) ".";
}
</ style >
< div >
< p > 1 </ p >
< p > 2 </ p >
< p > 3 </ p >
< p > 4 </ p >
</ div >
* This source code was highlighted with Source Code Highlighter .
このようなページは次のとおりです。
ここでは、擬似要素の後：div要素の後、それにバインドされたカウンターの最終値を表示するために使用しました。
そして最後に、トピックの冒頭の画像で見た結果のコードを提供します。このスタイルをブラウザのカスタムスタイルとして接続すると、各トピックの横に「統計」が表示されます。
/* */
div.hentry {
counter-reset:
num-post-sections 1
/* / . , . */
/* , .content */
num-code-listings /* code pre */
num-bq /* */
num-br /* break-lines */
num-links /* */
num-links-internal /* */
num-links-rel-tag /* rel='tag' */
num-img /* */
;
}
/* . */
div.hentry .content h4,
div.hentry .content h5,
div.hentry .content h6 { counter-increment: num-post-sections; }
div.hentry .content code,
div.hentry .content pre { counter-increment: num-code-listings; }
div.hentry .content img { counter-increment: num-img; }
div.hentry .content blockquote { counter-increment: num-bq; }
div.hentry .content br { counter-increment: num-br; }
div.hentry .content a[href] { /* */
counter-increment: num-links;
}
div.hentry .content a[href^="http://habrahabr.ru/"],
div.hentry .content a[href^="/"] { /* */
counter-increment:
num-links
num-links-internal;
}
div.hentry a[rel="tag"] { /* */
counter-increment:
num-links
num-links-rel-tag;
}
/* */
div.hentry:after {
clear:both;
display: block;
background:#9cc;
border:1px solid #79B1D4;
padding:10px;
margin:0 35px;
white-space:pre;
content:
"This topic contains: \a"
"Sections - " counter(num-post-sections) ",\a"
"Code listings - " counter(num-code-listings) ",\a"
"Links - " counter(num-links) ", " counter(num-links-internal) " internal and "
counter(num-links-rel-tag)" tags, \a"
"Images - " counter(num-img) ",\a"
"Quotes - " counter(num-bq) ",\a"
"Break lines - " counter(num-br) "\a"
;
}
* This source code was highlighted with Source Code Highlighter .
制限事項
1.残念ながら、私たち全員が私たちの大好きで情熱的なお気に入りのIntenet Explorerブラウザーです。バージョン7までのCSSカウンターおよびコンテンツプロパティはサポートしていません。 しかし、8日には彼らはサポートがあると言います。
2.トータルカウンターの出力は、次の擬似エレメントでのみ可能です。これにより、設計の可能性が制限されます。
3. cssを使用して生成されたコンテンツは、ユーザーが選択または選択できません。
制限に基づいて、説明されている機能がこれまで広く使用されることはほとんどありませんが、明るい未来はすぐそこにあると思います。 すべてのコードは、これらの機能を示すためだけに書かれています:)
更新しました。 Meitar Moscovitzの記事は、トピックとコードの作成に大いに役立ちましたが、いくつかの良い例がまだあります。