সিএসএস কাউন্টার - CSS Counter


সিএসএস কাউন্টার বা counter হলো সিএসএস দ্বারা সমর্থিত ভ্যারিয়েবল ব্যবহার পদ্ধতি। একটি এইচটিএমএল ডকুমেন্টে কোন এলিমেন্ট কত বার ব্যবহৃত হয়েছে, তার ওপর নির্ভর করে কাউন্টার ভ্যারিয়েবল এর মান গুলো বৃদ্ধি পায়। উদাহরন স্বরূপ বলা যায়, সিএসএস এর কাউন্টার ব্যবহার করে কোন ওয়েব পেজে ব্যবহৃত প্যারাগ্রাফ গুলোকে স্বয়ংক্রিয় ভাবে ক্রমিক নং দেয়া যায়।

হাস্নাহেনা সম্পর্কিত প্যারাগ্রাফ।

সূর্যমুখী সম্পর্কিত প্যারাগ্রাফ।

কাঠগোলাপ সম্পর্কিত প্যারাগ্রাফ।

বকুল সম্পর্কিত প্যারাগ্রাফ।



কাউন্টার প্রোপার্টি

একটি সিএসএস কাউন্তার ব্যবহার করতে হলে, প্রথমে counter-reset প্রোপার্টি ব্যবহার করে একটি কাউন্তার তৈরি করতে হবে। এর পূর্ব-নির্ধারিত বা default মান হল 0, অর্থাৎ কাউন্তার 0 থেকে ক্রমিক নং দিতে শুরু করবে।
এই একই প্রোপার্টি অর্থাৎ counter-reset প্রোপার্টি ব্যবহার করে যে কোন নির্দিষ্ট মান অর্থাৎ সংখ্যা থেকে আমরা কাউন্তার শুরু করতে পারি। counter-increment প্রোপার্টি ব্যবহার করে এই মানকে কমাতে বা বাড়াতে পারি। কাউন্তার এর নাম কখনই "none", "inherit", অথবা "initial" দেয়া যাবে না, অন্যথায় counter-increment প্রোপার্টি উপেক্ষিত হবে।

সিএসএস এর বহুল ব্যবহৃত কয়েকটি প্রোপার্টি হল নিম্নরূপ।


কাউন্তার তৈরি

প্রথমে counter-reset প্রোপার্টি ব্যবহার করে একটি কাউন্তার তৈরি করা হয়েছে। উদাহরণে body সিলেক্টর ব্যবহার করে একটি ওয়েব পেজকে সিলেক্ট করা হয়েছে এবং তারপর counter-reset প্রোপার্টি ব্যবহার করে section নামের একটি কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।

অতঃপর counter-increment প্রোপার্টি ব্যবহার করে প্রত্যেক <p> এলিমেন্টের জন্য section এর মান বৃদ্ধি করা হয়েছ। content প্রপার্টির মাধ্যমে কাউন্টার(section) ভ্যারিয়েবলসহ এর বর্ধিত মানকে প্র্যতেক <p> এলিমেন্টের পূর্বে স্থান দেওয়া হয়েছে।

উদাহরণ

body {
   counter-reset: section;
   }

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

কোড এডিটর



নেস্তেদ কাউন্টার

সিএসএস ব্যবহার করে কোন আউটলাইন লিস্ট তৈরি করার জন্য কাউন্টার বিশেষ ভাবে একটি ভাল পদ্ধতি, কারণ কাউন্টারের একটি নতুন মান স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্ট গুলোতে যুক্ত হয়। counter() ফাংশন ব্যবহার করে, বিভিন্ন লেভেলের নেস্তেড কাউন্তার গুলোর লেখাকে আলাদা করে।

সিএসএস

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

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

কোড এডিটর


ওপরের সিএসএস কোড গুলোর জন্য নিচে এইচটিএমএল কোড দেখুন।

এইচটিএমএল

<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>

কোড এডিটর



@counter-style

সিএসএস এর @counter-style প্রোপার্টি ব্যবহার করে কাউন্টারে স্টাইল করা যায়। কাউন্টার এর মান বা value গুলো কিভাবে স্ট্রিং এ রুপান্তর বা convert হবে তা @counter-style প্রোপার্টি নির্ধারণ করে।

উদাহরণ

@counter-style thumbs {
   system: cyclic;
   symbols: "\1F44D";
   suffix: " ";
   }

ul {
   list-style: thumbs;
   }

কোড এডিটর


সিএসএস এর @counter-style প্রোপার্টি সম্পর্কে Mozilla Developer থেকে আরও জানতে @counter-style ওয়েব পেজটি ব্রাউজ করুন।


সকল counter প্রোপার্টি

প্রোপার্টিমানবর্ণনা
counter-reset
counter-increment
content
counter()
counters()
counter-set
@counter-style

সিএসএস counter প্রোপার্টি সম্পর্কে আরও জানতে mozilla Developer এর Using CSS counters ওয়েব পেজটি ব্রাউজ করুন।