() translation by (you can also view the original English article)
এই কুইক টিপসে আমরা সিএসএস কাউণ্টারের কিছু বেসিক বিষয় নিয়ে আলোচনা করবো, যা একটি দরকারী সিএসএস ফিচার, কিন্তু এখনো বহুলভাবে পরিচিত হয় নি। ডেমো বানানো শেষে আমরা কিছু বাস্তব সাইটের উদাহরন দেখব যেগুলো সিএসএস কাউন্টার ব্যবহার করে বানানো হয়েছে।
উদ্দেশ্য: একটি ক্রমিক তালিকা স্টাইল করা
প্রথম ধাপে আমরা যে লেআউটটি তৈরি করতে যাচ্ছি, তা দেখবো:
অভিনব কিছু নয় তাই না? যদিও এখানে একটি চ্যালেঞ্জ আছে: আমরা এখানে সিমেন্টিক মার্কআপ ব্যবহার করব, এবং এই কাউন্টার মার্কারগুলো তৈরি করতে কোন অপ্রয়োজনীয় div এবং span ব্যবহার করবো না।
চলুন এবার একটি পরিস্কার এবং পরিবর্তনযোগ্য সমাধান নিয়ে আলোচনা করি!
CSS কাউন্টার সমূহ
উপরে বর্ণিত লেআউট তৈরি করতে আমাদের একটি ক্রমিক তালিকা বা অর্ডারেড লিস্ট সংজ্ঞায়িত করতে হবে। এ পর্যন্ত এসে, আপনি হয়তো জানতে চাচ্ছেন যে অন্য কোন উপাদান অথবা আনঅর্ডারেড/অক্রমিক লিস্টে এটা ব্যবহার করা যাবে কিনা। সংক্ষেপে উত্তর হচ্ছে "হ্যাঁ", কিন্তু মনে রাখবেন আমাদের পেইজ কাঠামো ঠিকভাবে বর্ণনা করতে অর্ডারেড লিস্ট (ol) হচ্ছে একমাত্র উপাদান।
এখন হয়তোবা আপনি জানতে চাচ্ছেন যে অর্ডারেড লিস্টের নম্বরসমূহ কাস্টমাইজ করে এই উপায়ে আপনার পছন্দমত লেআউট তৈরি করা সম্ভব কিনা। অর্ডারেড লিস্টের নম্বর স্টাইল করা আসলেই জটিল। সৌভাগ্যক্রমে, একটি বিকল্প ক্রস-ব্রাউজার পদ্ধতি আছে, যা দিয়ে ডিফল্ট লিস্ট নাম্বার লুকিয়ে রেখে তার পরিবর্তে CSS কাউণ্টার ব্যবহার করা যায়।
সিনট্যাক্স
সিএসএস কাউণ্টার দিয়ে আমরা মূলত পুনরাবৃত্তিমূলক ক্রমিক নম্বর তৈরি করতে পারি, এবং সে অনুযায়ী এগুলোকে স্টাইল করতে পারি। সিএসএস কাউন্টারকে এমন ভেরিয়েবল হিসেবে কল্পনা করুন যার মান ক্রমাগত বৃদ্ধি করা যায়। চলুন, এবার বেসিক সিনট্যাক্সটি দেখি:
এখানে আমরা অর্ডারেড লিস্টের জন্য নতুন একটি কাউন্টার তৈরি করেছি এবং এটার লক্ষ্য ঠিক করেছি। আমরা counter-reset প্রোপার্টি ব্যবহার করেছি।
- প্রথম মান হচ্ছে কাউন্টারের নাম।
- এর সঙ্গে একটি অপশনাল প্যারামিটার আছে যা কাউণ্টারের শুরুর মান সংজ্ঞায়িত করে (ডিফল্ট মান: 0)। মনে রাখবেন কাউন্টারের গণনা সব সময় উর্ধমুখী হয়ে থাকে, তাই আমাদের ক্ষেত্রে প্রথম জেনারেট হওয়া মানটি হবে 1।
দ্বিতীয় ডায়াগ্রামে আমরা দেখতে পাচ্ছি, আমরা আমাদের লিস্টের li এর সুডো এলিমেন্ট ::before স্টাইল করেছি।
- এখানে আমরা
::beforeএরcontentএ কাউন্টারের মান যুক্ত করেছি। উল্লেখ্য, কন্টেন্ট প্রপার্টির সাথে সিএসএস কাউন্টার ব্যবহার করে আমরা জেনারেট হওয়া নাম্বারগুলো স্ট্রিং এর সাথে যুক্ত করতে পারবো। - আমরা আমাদের কাউন্টারের নাম উল্লেখ করলাম।
- এবং "দশমিক" হিসেবে কাউন্টারের স্টাইল সংজ্ঞায়িত করলাম। এখানে ব্যবহৃত সাম্ভব্য মান এখন অনেকটা
list style typeএর জন্য ব্যবহৃত মানের অনুরূপ। -
counter-incrementরুলে আমরা আবার আমাদের কাউণ্টারের নামটি উল্লেখ করেছি। - তারপর একটি অপশনাল প্যারামিটার ব্যবহার করে ঠিক করেছি যে প্রত্যেকটি ক্রমে আমাদের কাউণ্টার কতটুকু বৃদ্ধি পাবে। এখানে ডিফল্ট মান হচ্ছে 1।
মার্কআপ
উপরের আলোচনার উপর ভিত্তি করে নিচে আমাদের মার্কআপ টি দেয়া হলো:
1 |
<ol> |
2 |
<li> |
3 |
<h4>List Item</h4> |
4 |
<p>Some text here.</p> |
5 |
</li> |
6 |
<li> |
7 |
<h4>List Item</h4> |
8 |
<p>Some text here.</p> |
9 |
</li> |
10 |
|
11 |
<-- more list items here --> |
12 |
</ol> |
এবং সংশ্লিষ্ট css:
1 |
ol {
|
2 |
counter-reset: section; |
3 |
} |
4 |
|
5 |
li {
|
6 |
list-style-type: none; |
7 |
font-size: 1.5rem; |
8 |
padding: 30px; |
9 |
margin-bottom: 15px; |
10 |
background: #0e0fee; |
11 |
color: #fff; |
12 |
} |
13 |
|
14 |
li::before {
|
15 |
content: counter(section); |
16 |
counter-increment: section; |
17 |
display: inline-block; |
18 |
position: absolute; |
19 |
left: -75px; |
20 |
top: 50%; |
21 |
transform: translateY(-50%); |
22 |
padding: 12px; |
23 |
font-size: 2rem; |
24 |
width: 25px; |
25 |
height: 25px; |
26 |
text-align: center; |
27 |
color: #000; |
28 |
border-radius: 50%; |
29 |
border: 3px solid #000; |
30 |
} |
এটা আমাদেরকে নিচের মত ফলাফল প্রদান করবে:
সীমাবদ্ধতা
এ পর্যায়ে এসে মনে রাখতে হবে যে সুডো এলিমেন্টগুলো ১০০% ব্যবহারযোগ্য নয়। তা যাচাই করতে আমি একটি পরীক্ষা করেছি। আমি NVDA ইন্সটল করে তারপর তাতে Chrome 50, Firefox 45, এবং Internet Explorer 11 এই ডেমো পেইজটির প্রিভিউ দেখেছি।
যা পেয়েছি তা হচ্ছে ইন্টারনেট এক্সপ্লোরার ব্যবহার করার সময় স্ক্রিন রিডার জেনারেট হওয়া কনটেন্টটি পড়তে পারে না। আজকাল বেশিরভাগ স্ক্রিন রিডারই এই ধরণের কন্টেন্ট শনাক্ত করতে পারে, তবুও আপনাকে অবশ্যই সম্ভাব্য সীমাবদ্ধতা সম্পর্কে সচেতন হতে হবে এবং কোন কনটেন্ট সুডো এলিমেন্ট ব্যবহার করে জেনারেট করা নিরাপদ, সে সম্পর্কে সিদ্ধান্ত নিতে হবে।
সিএসএস কাউন্টারের বাস্তব রূপ
এই পর্যন্ত এসে আমরা সিএসএস কাউণ্টারের বিভিন্ন বেসিক বিষয় সম্পর্কে জানলাম, এখন আমরা কিছু উদাহরণ এর মাধ্যমে এগুলোর সম্ভাব্য ব্যবহার দেখবো।
প্রথমত, সিএসএস কাউন্টার সাধারণত অনলাইন নিউজপেপারে ব্যবহার করা হয়ে থাকে। বেশিরভাগ সময়ই আপনি এগুলোকে সাইডবারে দেখতে পাবেন:
সিএসএস কাউন্টার বিভিন্ন সেকশনের সাথে ব্যবহৃত হতে পারে যা বিভিন্ন ধাপের বর্ণনা অথবা নির্দেশনার জন্য ব্যবহার করা যায়। এখানে ঠিক এরকমই একটি উদাহরণ দেয়া হলো:
স্ফীত HTML এর উদাহরণ
আগের সেকশনে আমরা দুটি অনলাইন নিউজপেপার দেখেছি যা সিএসএস কাউন্টারের সুবিধা গ্রহণ করেছে। এখন আমরা আরো দুইটি নিউজপেপার দেখবো যেগুলো সিএসএস কাউন্টার এর পরিবর্তে (প্রবেশযোগ্য কন্টেন্ট হতে) স্ফীত মার্কআপ ব্যবহার করেছে:
পরিসমাপ্তি
এই কুইক টিপে, আমরা জানলাম কিভাবে সিএসএস কাউন্টার ব্যবহার করে ক্রমিক লিস্ট আইটেমসমূহ স্টাইল করা যায়। এখন আমরা যা যা শিখলাম তার সারাংশ সংক্ষেপে বর্ণনা করি:
- যেসব প্রজেক্টে কাস্টম স্টাইলসহ ডাইনামিক ক্রম তৈরি করতে হবে তার জন্য সিএসএস কাউন্টার একটি অসাধারণ সমাধান। অন্য দিকে, এটি সম্পূর্ণরূপে অ্যাক্সেসযোগ্য সমাধান নয়, তাই এর সীমাবদ্ধতা সম্পর্কে সতর্ক থাকুন এবং এটি সঠিকভাবে ব্যবহার করুন।
- কাউন্টার সেটআপ করতে আমাদেরকে দুটি প্রোপার্টি (যেমন,
counter-reset,counter-incrementএবং একটি ফাংশন (counter()অথবাcounters()) উল্লেখ করতে হবে। - কাউন্টার প্রদর্শন করার জন্য সূডো এলিমেন্টগুলো দায়ী। মনে রাখবেন এটা
contentপ্রপার্টির মাধ্যমে ঘটে থাকে যা কেবলমাত্র সুডো এলিমেন্টে পাওয়া যায়।
আপনি কি কখনও আপনার প্রজেক্টে সিএসএস কাউণ্টার ব্যবহার করেছেন? যদি আপনার উত্তর হ্যাঁ হয়, তাহলে আপনার কাজ আমাদের সাথে শেয়ার করুন!
