CSS Counters

CSS கவுண்டர்களுடன், JavaScript ஐப் பயன்படுத்தாமல் உறுப்புகளின் (தலைப்புகள், பிரிவுகள் அல்லது பட்டியல் உருப்படிகள் போன்றவை) டைனமிக் எண்ணிக்கையை உருவாக்கலாம்.

CSS கவுண்டர்கள் CSS மூலம் பராமரிக்கப்படும் "மாறிகள்" ஆகும், மேலும் அவற்றின் மதிப்புகள் CSS விதிகளால் அதிகரிக்கப்படலாம் (அல்லது குறைக்கப்படலாம்).

CSS Automatic Numbering With Counters

CSS கவுண்டர்கள் "மாறிகள்" போன்றவை. மாறி மதிப்புகள் CSS விதிகளால் அதிகரிக்கப்படலாம் (அல்லது குறைக்கப்படலாம்).

CSS கவுண்டர்களுடன் வேலை செய்ய பின்வரும் பண்புகளைப் பயன்படுத்துவோம்:

• counter-reset - ஒரு கவுண்டரை உருவாக்குகிறது அல்லது மீட்டமைக்கிறது
• counter-increment - ஒரு கவுண்டரை அதிகரிக்கிறது அல்லது குறைக்கிறது
• content - உருவாக்கப்பட்ட உள்ளடக்கத்தைச் செருகுகிறது (::before மற்றும் ::after உள்ளே பயன்படுத்தப்படுகிறது, உருவாக்கப்பட்ட உள்ளடக்கத்தைச் செருக)
• counter() மற்றும் counters() செயல்பாடுகள் - ஒரு கவுண்டரின் மதிப்பை ஒரு உறுப்பில் சேர்க்கின்றன

CSS கவுண்டரைப் பயன்படுத்த, அது முதலில் counter-reset பண்புடன் உருவாக்கப்பட வேண்டும்.

CSS Increase and Decrease Counter

பின்வரும் எடுத்துக்காட்டு பக்கத்திற்கான ஒரு கவுண்டரை உருவாக்குகிறது (body தேர்வாளில்), பின்னர் அது ஒவ்வொரு <h2> உறுப்புக்கும் கவுண்டர் மதிப்பை 1 ஆல் அதிகரிக்கிறது மற்றும் ஒவ்வொரு <h2> உறுப்பின் தொடக்கத்தில் "Section + countervalue:" என்ற உரையைச் சேர்க்கிறது:

Example

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

counter-increment பண்பு இரண்டாவது அளவுருவைக் கொண்டுள்ளது. இதன் இயல்புநிலை மதிப்பு 1 (இது கவுண்டரை ஒன்றால் அதிகரிக்கிறது). கவுண்டர் மதிப்பைக் குறைக்க, அதை -1 ஆக அமைக்கலாம்.

பின்வரும் எடுத்துக்காட்டு மேலே உள்ளதைப் போன்றது, ஆனால் இங்கே நாம் ஒவ்வொரு <h2> உறுப்புக்கும் கவுண்டர் மதிப்பைக் குறைக்கிறோம் மற்றும் ஒவ்வொரு <h2> உறுப்பின் தொடக்கத்தில் "Section + countervalue:" என்ற உரையைச் சேர்க்கிறோம்:

Example

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section -1;
  content: "Section " counter(section) ": ";
}

பின்வரும் எடுத்துக்காட்டு மேலே உள்ளதைப் போன்றது, ஆனால் இங்கே நாம் ஒவ்வொரு <h2> உறுப்புக்கும் கவுண்டர் மதிப்பை 2 ஆல் அதிகரிக்கிறோம் மற்றும் ஒவ்வொரு <h2> உறுப்பின் தொடக்கத்தில் "Section + countervalue:" என்ற உரையைச் சேர்க்கிறோம்:

Example

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section 2;
  content: "Section " counter(section) ": ";
}

CSS Using Two Counters

பின்வரும் எடுத்துக்காட்டு பக்கத்திற்கான ஒரு கவுண்டரை ("section" என்று பெயரிடப்பட்டது) மற்றும் ஒவ்வொரு <h1> உறுப்புக்கும் ஒரு கவுண்டரை ("subsection" என்று பெயரிடப்பட்டது) உருவாக்குகிறது. "section" கவுண்டர் ஒவ்வொரு <h1> உறுப்புக்கும் "Section + sectioncounter>." உடன் எண்ணப்படும், மற்றும் "subsection" கவுண்டர் ஒவ்வொரு <h2> உறுப்புக்கும் "sectioncounter.subsectioncounter" உடன் எண்ணப்படும்:

Example

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

The CSS counters() Function

counters() செயல்பாடு பெயரிடப்பட்ட மற்றும் கூடு கட்டப்பட்ட கவுண்டர்களின் தற்போதைய மதிப்புகளை ஒரு சரமாக வழங்குகிறது.

இங்கே நாம் கூடு கட்டப்பட்ட கவுண்டர்களின் வெவ்வேறு நிலைகளுக்கு இடையே ஒரு சரத்தைச் செருக counters() செயல்பாட்டைப் பயன்படுத்துகிறோம்:

Example

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Exercise

CSS Counter Properties