সিএসএস কাউন্টার বা counter হলো সিএসএস দ্বারা সমর্থিত ভ্যারিয়েবল ব্যবহার পদ্ধতি। একটি এইচটিএমএল ডকুমেন্টে কোন এলিমেন্ট কত বার ব্যবহৃত হয়েছে, তার ওপর নির্ভর করে কাউন্টার ভ্যারিয়েবল এর মান গুলো বৃদ্ধি পায়। উদাহরন স্বরূপ বলা যায়, সিএসএস এর কাউন্টার ব্যবহার করে কোন ওয়েব পেজে ব্যবহৃত প্যারাগ্রাফ গুলোকে স্বয়ংক্রিয় ভাবে ক্রমিক নং দেয়া যায়।
হাস্নাহেনা সম্পর্কিত প্যারাগ্রাফ।
সূর্যমুখী সম্পর্কিত প্যারাগ্রাফ।
কাঠগোলাপ সম্পর্কিত প্যারাগ্রাফ।
বকুল সম্পর্কিত প্যারাগ্রাফ।
একটি সিএসএস কাউন্তার ব্যবহার করতে হলে, প্রথমে counter-reset প্রোপার্টি
ব্যবহার করে একটি কাউন্তার তৈরি করতে হবে। এর পূর্ব-নির্ধারিত বা default মান হল 0, অর্থাৎ কাউন্তার 0 থেকে ক্রমিক নং দিতে শুরু করবে।
এই একই প্রোপার্টি অর্থাৎ counter-reset প্রোপার্টি ব্যবহার করে যে কোন নির্দিষ্ট
মান অর্থাৎ সংখ্যা থেকে আমরা কাউন্তার শুরু করতে পারি।
counter-increment প্রোপার্টি ব্যবহার করে এই মানকে কমাতে বা বাড়াতে পারি।
কাউন্তার এর নাম কখনই "none", "inherit", অথবা "initial" দেয়া যাবে না, অন্যথায় counter-increment প্রোপার্টি
উপেক্ষিত হবে।
সিএসএস এর বহুল ব্যবহৃত কয়েকটি counter প্রোপার্টি হল নিম্নরূপ।
প্রথমে 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 প্রোপার্টি ব্যবহার করে কাউন্টারে স্টাইল করা যায়। কাউন্টার এর মান বা value গুলো কিভাবে স্ট্রিং এ রুপান্তর বা convert হবে তা @counter-style প্রোপার্টি নির্ধারণ করে।
@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " "; } ul { list-style: thumbs; }
সিএসএস এর @counter-style প্রোপার্টি সম্পর্কে Mozilla Developer থেকে আরও জানতে @counter-style ওয়েব পেজটি ব্রাউজ করুন।
প্রোপার্টি | মান | বর্ণনা |
---|---|---|
counter-reset | ||
counter-increment | ||
content | ||
counter() | ||
counters() | ||
counter-set | ||
@counter-style |
সিএসএস counter প্রোপার্টি সম্পর্কে আরও জানতে mozilla Developer এর Using CSS counters ওয়েব পেজটি ব্রাউজ করুন।