সৃজনশীল তালিকা স্টাইলিং

একটি তালিকা স্টাইল করার জন্য কিছু দরকারী এবং সৃজনশীল উপায় দেখুন।

Michelle Barker

আপনি একটি তালিকা চিন্তা যখন মনে আসে? সবচেয়ে সুস্পষ্ট উদাহরণ হল একটি কেনাকাটার তালিকা—তালিকাগুলির মধ্যে সবচেয়ে সহজ, কোনো নির্দিষ্ট ক্রমে আইটেমগুলির একটি সংগ্রহ। কিন্তু আমরা ওয়েবে সব ধরণের তালিকা ব্যবহার করি। একটি ভেন্যুতে আসন্ন কনসার্টের একটি সংগ্রহ? খুব সম্ভবত একটি তালিকা. একটি বহু-পদক্ষেপ বুকিং প্রক্রিয়া? বেশ সম্ভবত একটি তালিকা. ইমেজ একটি গ্যালারি? এমনকি এটি ক্যাপশন সহ চিত্রগুলির একটি তালিকা হিসাবে বিবেচিত হতে পারে৷

এই নিবন্ধে আমরা ওয়েবে আমাদের জন্য উপলব্ধ বিভিন্ন HTML তালিকার ধরন এবং কখন সেগুলি ব্যবহার করতে হবে তা নিয়ে আলোচনা করব, এমন কিছু বৈশিষ্ট্য সহ যা আপনি হয়তো জানেন না। আমরা CSS এর সাথে স্টাইল করার জন্য কিছু দরকারী এবং সৃজনশীল উপায়ও দেখব।

কখন একটি তালিকা ব্যবহার করবেন

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

তালিকার ধরন

মার্কআপের ক্ষেত্রে, আমাদের কাছে তিনটি ভিন্ন তালিকা উপাদানের একটি পছন্দ আছে:

• অবিন্যস্ত তালিকা
• অর্ডার করা তালিকা
• বর্ণনা তালিকা

কোনটি বেছে নেবেন তা নির্ভর করে ব্যবহারের ক্ষেত্রে।

অবিন্যস্ত তালিকা (উল)

ক্রমবিন্যস্ত তালিকা উপাদান ( <ul> ) সবচেয়ে দরকারী যখন তালিকার আইটেমগুলি কোনো নির্দিষ্ট ক্রম অনুসারে না। ডিফল্টরূপে এটি একটি বুলেটেড তালিকা হিসাবে প্রদর্শিত হবে। একটি উদাহরণ হল একটি কেনাকাটার তালিকা, যেখানে অর্ডার কোন ব্যাপার না।

ওয়েবে একটি সাধারণ উদাহরণ হল একটি নেভিগেশন মেনু। একটি মেনু তৈরি করার সময়, একটি nav উপাদানে ul মোড়ানো এবং সহায়ক প্রযুক্তির সাহায্যের জন্য একটি লেবেল দিয়ে মেনু সনাক্ত করা ভাল অভ্যাস। আমাদের মেনুতে বর্তমান পৃষ্ঠাটিও চিহ্নিত করা উচিত, যা আমরা aria-current অ্যাট্রিবিউট ব্যবহার করে করতে পারি:

<nav aria-label="Main">  
  <ul>  
    <li>  
      <a href="/page-1" aria-current="page">Menu item 1</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
      …  
    </ul>  
</nav>  

আমাদের নেভিগেশন মেনু সকলের কাছে অ্যাক্সেসযোগ্য তা নিশ্চিত করতে মেনু কাঠামোর এই নিবন্ধটি বেশ কয়েকটি সুপারিশের রূপরেখা দেয়।

অর্ডার করা তালিকা (ol)

একটি অর্ডার করা তালিকা উপাদান ( <ol> ) হল সেরা পছন্দ যখন আইটেমগুলির ক্রম গুরুত্বপূর্ণ, যেমন একটি বহু-পদক্ষেপ প্রক্রিয়া। ডিফল্টরূপে, তালিকা আইটেম সংখ্যাযুক্ত। একটি উদাহরণ নির্দেশাবলীর একটি সেট হতে পারে, যেখানে ধাপগুলি ক্রমানুসারে সম্পন্ন করতে হবে।

<ol> এবং <ul> উভয় উপাদানেই তাদের সরাসরি সন্তান হিসাবে শুধুমাত্র <li> উপাদান থাকতে পারে।

বর্ণনা তালিকা (dl)

একটি বর্ণনা তালিকায় পদ ( <dt> উপাদান) এবং বিবরণ ( <dd> ) থাকে। প্রতিটি পদের সাথে একাধিক বর্ণনা থাকতে পারে। সম্ভাব্য ব্যবহারের ক্ষেত্রে পদগুলির একটি শব্দকোষ বা সম্ভবত একটি রেস্তোরাঁর মেনু অন্তর্ভুক্ত থাকতে পারে। বর্ণনা তালিকা ডিফল্টরূপে কোনো চিহ্নিতকারীর সাথে প্রদর্শিত হয় না, যদিও ব্রাউজারগুলি <dd> উপাদানটি ইন্ডেন্ট করে।

এইচটিএমএল-এ এটি <div> ব্যবহার করে তাদের সহগামী বর্ণনার সাথে গোষ্ঠীবদ্ধ পদগুলি অনুমোদিত। এটি স্টাইলিং উদ্দেশ্যে উপযোগী হতে পারে, যেমনটি আমরা পরে দেখব।

<!-- This is valid --> 
<dl>  
    <dt>Term 1</dt>  
    <dd>This is the first description of the first term in the list</dd>  
    <dd>This is the second description of the first term in the list</dd>  
    <dt>Term 2</dt>  
    <dd>This is the description of the second term in the list</dd>  
</dl>

<!-- This is also valid --> 
<dl>  
    <div>  
        <dt>Term 1</dt>  
        <dd>This is the first description of the first term in the list</dd>  
        <dd>This is the second description of the first term in the list</dd>  
    </div>  
    <div>  
        <dt>Term 2</dt>  
        <dd>This is the description of the second term in the list</dd>  
    </div>  
</dl>  

সহজ তালিকা স্টাইলিং

একটি তালিকার সহজতম ব্যবহারগুলির মধ্যে একটি হল বডি টেক্সটের একটি ব্লকের মধ্যে। প্রায়শই এই সাধারণ তালিকাগুলির বিস্তৃত স্টাইলিংয়ের প্রয়োজন হয় না, তবে আমরা কিছু পরিমাণে একটি অর্ডার করা বা ক্রমবিহীন তালিকার মার্কারগুলিকে কাস্টমাইজ করতে চাই, যেমন একটি ব্র্যান্ডের রঙের সাথে, বা আমাদের বুলেটগুলির জন্য একটি কাস্টম চিত্র ব্যবহার করে৷ আমরা list-style এবং ::marker সিউডো-এলিমেন্ট দিয়ে অনেক কিছু করতে পারি!

::মার্কার

আমাদের তালিকা চিহ্নিতকারীকে কিছু মৌলিক স্টাইলিং দেওয়ার পাশাপাশি, আমরা চক্রাকার বুলেট তৈরি করতে পারি। এখানে আমরা ::marker সিউডো-এলিমেন্টের content মানের জন্য তিনটি ভিন্ন ইমেজ ইউআরএল ব্যবহার করছি, যা আমাদের কেনাকাটার তালিকার উদাহরণের হাতে লেখা অনুভূতি যোগ করে (সকলের জন্য শুধুমাত্র একটি ছবি ব্যবহার করার বিপরীতে):

::marker {  
    content: url("/marker-1.svg") ' ';  
}

li:nth-child(3n)::marker {  
    content: url("/marker-2.svg") ' ';  
}

li:nth-child(3n - 1)::marker {  
    content: url("/marker-3.svg") ' ';  
}  

কাস্টম কাউন্টার

কিছু অর্ডার করা তালিকার জন্য আমরা পাল্টা মান ব্যবহার করতে চাই, কিন্তু এটিতে অন্য মান যোগ করতে পারি। আমরা আমাদের মার্কারের content সম্পত্তির জন্য একটি মান হিসাবে list-item কাউন্টার ব্যবহার করতে পারি এবং অন্য কোনো বিষয়বস্তু যুক্ত করতে পারি:

::marker {  
    content: counter(list-item) '🐈 ';  
}  

আমাদের কাউন্টারগুলি স্বয়ংক্রিয়ভাবে এক দ্বারা বৃদ্ধি পায়, তবে আমরা তালিকা আইটেমটিতে counter-increment বৈশিষ্ট্য সেট করে যদি আমরা চয়ন করি তবে আমরা তাদের একটি ভিন্ন মান দ্বারা বৃদ্ধির অনুমতি দিতে পারি। উদাহরণস্বরূপ, এটি প্রতিবার আমাদের কাউন্টারগুলিকে তিনটি করে বৃদ্ধি করবে:

li {  
    counter-increment: list-item 3;  
}  

আমরা কাউন্টারগুলির সাথে আরও অনেক কিছু জানতে পারি। নিবন্ধ CSS তালিকা, মার্কার এবং কাউন্টারগুলি আরও বিশদে কিছু সম্ভাবনার ব্যাখ্যা করে।

::মার্কার স্টাইলিং এর সীমাবদ্ধতা

এমন সময় আছে যখন আমরা আমাদের মার্কারদের অবস্থান এবং শৈলীর উপর আরও নিয়ন্ত্রণ চাই। ফ্লেক্সবক্স বা গ্রিড ব্যবহার করে মার্কারের অবস্থান করা সম্ভব নয়, উদাহরণস্বরূপ, যদি আপনার কিছু অন্য প্রান্তিককরণের প্রয়োজন হয় তবে এটি কখনও কখনও একটি ত্রুটি হতে পারে। ::marker স্টাইলিংয়ের জন্য সীমিত সংখ্যক CSS বৈশিষ্ট্য প্রকাশ করে। যদি আমাদের ডিজাইনের জন্য মৌলিক স্টাইলিং ব্যতীত অন্য কিছুর প্রয়োজন হয় তবে আমরা অন্য ছদ্ম-উপাদান ব্যবহার করা ভাল হতে পারি।

স্টাইলিং তালিকা যা তালিকার মত দেখাচ্ছে না

কখনও কখনও আমরা আমাদের তালিকাগুলিকে এমনভাবে স্টাইল করতে চাই যা ডিফল্ট স্টাইলিং থেকে সম্পূর্ণ আলাদা। এটি প্রায়শই একটি নেভিগেশন মেনুর ক্ষেত্রে হয় , উদাহরণস্বরূপ, যেখানে আমরা সাধারণত সমস্ত মার্কার মুছে ফেলতে চাই এবং ফ্লেক্সবক্স ব্যবহার করে আমাদের তালিকা অনুভূমিকভাবে প্রদর্শন করতে পারে। একটি সাধারণ অভ্যাস হল list-style সম্পত্তি none সেট না করা। এর মানে হবে মার্কার সিউডো-এলিমেন্ট আর DOM-এ অ্যাক্সেসযোগ্য হবে না।

সঙ্গে কাস্টম মার্কার ::আগে

::before ::marker আসার আগে ছদ্ম-উপাদানকে স্টাইল করা ছিল কাস্টম তালিকা মার্কার তৈরি করার একটি সাধারণ উপায়। কিন্তু এখনও, এটি আমাদের আরও নমনীয়তার অনুমতি দিতে পারে, যখন আমাদের এটি প্রয়োজন, দৃশ্যত জটিল তালিকা স্টাইলিংয়ের জন্য।

যেমন ::marker , আমরা content অ্যাট্রিবিউট ব্যবহার করে আমাদের নিজস্ব কাস্টম বুলেট শৈলী যোগ করতে পারি। ::marker ব্যবহার করার বিপরীতে, আমাদের কিছু ম্যানুয়াল পজিশনিং করতে হবে, কারণ আমরা list-style-position দ্বারা প্রদত্ত স্বয়ংক্রিয় সুবিধাগুলি পাই না। কিন্তু আমরা এটিকে ফ্লেক্সবক্সের সাহায্যে তুলনামূলকভাবে সহজে অবস্থান করতে পারি এবং এটি সারিবদ্ধকরণের জন্য অনেক বেশি সম্ভাবনা উন্মুক্ত করে। উদাহরণস্বরূপ, আমরা মার্কারের অবস্থান বিকল্প করতে পারি:

আমরা যদি ::before এলিমেন্ট ব্যবহার করে একটি অর্ডার করা তালিকা তৈরি করি, তাহলে আমরা আমাদের সংখ্যাসূচক মার্কার যোগ করতে কাউন্টার ব্যবহার করতে চাই।

li::before {  
  counter-increment: list-item;  
  content: counter(list-item);  
}  

:: ::marker ::before ব্যবহার করা আমাদের কাস্টম স্টাইলিং এর জন্য CSS বৈশিষ্ট্যগুলিতে সম্পূর্ণ অ্যাক্সেসের অনুমতি দেয়, সেইসাথে অ্যানিমেশন এবং ট্রানজিশনের অনুমতি দেয়—যার জন্য সমর্থন ::marker এর জন্য সীমিত।

গুণাবলী তালিকাভুক্ত করুন

অর্ডার করা তালিকার উপাদানগুলি কিছু ঐচ্ছিক বৈশিষ্ট্য গ্রহণ করে, যা আমাদের বিভিন্ন ব্যবহারের ক্ষেত্রে সাহায্য করতে পারে।

বিপরীত তালিকা

যদি আমাদের কাছে গত বছরের সেরা 10টি অ্যালবামের একটি তালিকা থাকে, তাহলে আমরা 10 থেকে 1 পর্যন্ত গণনা করতে চাই। আমরা এর জন্য কাস্টম কাউন্টার ব্যবহার করতে পারি এবং তাদের নেতিবাচকভাবে বৃদ্ধি করতে পারি। অথবা আমরা কেবল HTML এ reversed বৈশিষ্ট্য ব্যবহার করতে পারি। আমি যুক্তি দেব যে CSS-এ কাউন্টারটিকে নেতিবাচকভাবে বৃদ্ধি করার পরিবর্তে reversed বৈশিষ্ট্য ব্যবহার করা সাধারণত অর্থবোধক হয়, যদি না কাউন্টারগুলি সম্পূর্ণরূপে উপস্থাপনামূলক হয়। CSS লোড করতে ব্যর্থ হলে, আপনি এখনও HTML এ সঠিকভাবে সংখ্যা গণনা দেখতে পাবেন। এছাড়াও আমাদের বিবেচনা করতে হবে কিভাবে একজন স্ক্রিন রিডার তালিকাটি ব্যাখ্যা করবে।

2021 সালের সেরা 10টি অ্যালবামের এই ডেমোটি নিন৷ যদি কাউন্টারগুলি সম্পূর্ণরূপে CSS দিয়ে বৃদ্ধি করা হয়, তাহলে কেউ স্ক্রিন রিডার ব্যবহার করে পৃষ্ঠাটি অ্যাক্সেস করে এই উপসংহারে আসতে পারে যে সংখ্যাগুলি উপরের দিকে গণনা করা হয়েছে, তাই সেই 10 নম্বরটি আসলে এক নম্বর ছিল৷

আপনি ডেমোতে দেখতে পাচ্ছেন যে reversed বৈশিষ্ট্য ব্যবহার করে, আমাদের মার্কারগুলির ইতিমধ্যেই সঠিক মান রয়েছে, আমাদের পক্ষ থেকে কোনো অতিরিক্ত প্রচেষ্টা ছাড়াই! কিন্তু আমরা যদি ::before সিউডো-এলিমেন্ট ব্যবহার করে কাস্টম তালিকা মার্কার তৈরি করি, তাহলে আমাদের কাউন্টারগুলিকে সামঞ্জস্য করতে হবে। আমাদের শুধু আমাদের তালিকা-আইটেম কাউন্টারকে নেতিবাচকভাবে বৃদ্ধি করতে নির্দেশ দিতে হবে:

li::before {  
  counter-increment: list-item -1;  
  content: counter(list-item);  
}  

এটি ফায়ারফক্সে যথেষ্ট হবে, তবে ক্রোম এবং সাফারিতে মার্কারগুলি শূন্য থেকে -10 পর্যন্ত গণনা করা হবে। আমরা তালিকায় start অ্যাট্রিবিউট যোগ করে এটি ঠিক করতে পারি।

বিভক্ত তালিকা

start অ্যাট্রিবিউট আমাদেরকে সাংখ্যিক মান নির্দিষ্ট করতে দেয় যে তালিকা থেকে শুরু হওয়া উচিত। আপনি একটি তালিকাকে গ্রুপে বিভক্ত করতে চান এমন ক্ষেত্রে এটি কার্যকর হতে পারে।

আসুন আমাদের সেরা 10টি অ্যালবামের উদাহরণ তৈরি করি। সম্ভবত আমরা প্রকৃতপক্ষে সেরা 20টি অ্যালবাম গণনা করতে চাই, তবে 10 জনের দলে। দুটি গ্রুপের মধ্যে আরও কিছু পৃষ্ঠার বিষয়বস্তু রয়েছে।

আমাদের এইচটিএমএল-এ দুটি আলাদা তালিকা তৈরি করতে হবে, কিন্তু কাউন্টারগুলি সঠিক হবে তা আমরা কীভাবে নিশ্চিত করতে পারি? আমাদের মার্কআপ বর্তমানে দাঁড়িয়ে আছে, উভয় তালিকা 10 থেকে 1 পর্যন্ত গণনা করা হবে, যা আমরা চাই না। যাইহোক, আমাদের HTML-এ আমরা একটি start অ্যাট্রিবিউট মান নির্দিষ্ট করতে পারি। যদি আমরা আমাদের প্রথম তালিকায় 20 এর একটি start মান যোগ করি, তাহলে চিহ্নিতকারীগুলি আবার স্বয়ংক্রিয়ভাবে আপডেট হবে!

<ol reversed start="20">  
  <li>...</li>  
  <li>...</li>  
  <li>...</li>  
</ol>  

বহু-কলাম তালিকা বিন্যাস

মাল্টি-কলাম লেআউট কখনও কখনও আমাদের তালিকায় নিজেকে ভালভাবে ধার দিতে পারে, যেমন আপনি আগের ডেমো থেকে দেখতে পাচ্ছেন। একটি কলামের প্রস্থ নির্ধারণ করে, আমরা নিশ্চিত করতে পারি যে আমাদের তালিকাটি স্বয়ংক্রিয়ভাবে প্রতিক্রিয়াশীল হবে, পর্যাপ্ত স্থান থাকলেই কেবলমাত্র দুই বা ততোধিক কলামের উপরে নিজেকে বিছিয়ে দিতে পারি। আমরা কলামগুলির মধ্যে একটি ব্যবধানও সেট করতে পারি, এবং অতিরিক্ত উন্নতির জন্য, একটি স্টাইলযুক্ত কলাম-নিয়ম যোগ করুন ( border সম্পত্তির মতো একটি সংক্ষেপ ব্যবহার করে):

ol {  
    columns: 25rem;  
    column-gap: 7rem;  
    column-rule: 4px dotted turquoise;  
}  

কলাম ব্যবহার করে, আমরা কখনও কখনও আমাদের তালিকার আইটেমগুলিতে কুৎসিত বিরতির সাথে শেষ করতে পারি - সবসময় আমরা যে প্রভাব চাই তা নয়।

আমরা break-inside: avoid :

li {  
    break-inside: avoid;  
}  

কাস্টম বৈশিষ্ট্য

CSS কাস্টম বৈশিষ্ট্যগুলি স্টাইলিং তালিকার জন্য সম্ভাবনার একটি সম্পূর্ণ পরিসীমা উন্মুক্ত করে। যদি আমরা তালিকা আইটেমের সূচী জানি, আমরা সম্পত্তি মান গণনা করতে এটি ব্যবহার করতে পারি। দুর্ভাগ্যবশত বর্তমানে শুধুমাত্র সিএসএস-এ উপাদানের সূচক নির্ধারণ করার কোনো উপায় নেই (একটি ব্যবহারযোগ্য উপায়ে, যেকোনো হারে)। কাউন্টারগুলি শুধুমাত্র আমাদের content সম্পত্তিতে তাদের মান ব্যবহার করার অনুমতি দেয় এবং গণনার অনুমতি দেয় না।

কিন্তু আমরা আমাদের HTML-এ style অ্যাট্রিবিউটের মধ্যে উপাদানের সূচী সেট করতে পারি , যা গণনাকে আরও সম্ভাব্য করে তুলতে পারে, বিশেষ করে যদি আমরা একটি টেমপ্লেটিং ভাষা ব্যবহার করি। এই উদাহরণটি দেখায় যে আমরা কিভাবে Nunjucks ব্যবহার করে সেট করব:

<ol style="--length: items|length">  
  
</ol>  

Splitting.js হল একটি লাইব্রেরি যা ক্লায়েন্ট সাইডে একই ধরনের ফাংশন সম্পাদন করে।

কাস্টম সম্পত্তি মান ব্যবহার করে আমরা বিভিন্ন উপায়ে একটি তালিকার মাধ্যমে অগ্রগতি দেখাতে পারি। একটি উপায় পদক্ষেপের তালিকার জন্য একটি অগ্রগতি বার হতে পারে। এই উদাহরণে, আমরা প্রতিটি আইটেমের জন্য একটি বার তৈরি করতে একটি লিনিয়ার গ্রেডিয়েন্ট সহ একটি ছদ্ম-উপাদান ব্যবহার করছি যা দেখায় যে ব্যবহারকারী কতটা তালিকার মধ্যে রয়েছে৷

li::before {  
    --stop: calc(100% / var(--length) * var(--i));  
    --color1: deeppink;  
    --color2: pink;  

    content: '';  
    background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
}  

এছাড়াও hsl() কালার ফাংশন ব্যবহার করে আমরা তালিকার অগ্রগতির সাথে সাথে রঙ সামঞ্জস্য করতে পারি। আমরা আমাদের কাস্টম সম্পত্তি ব্যবহার করে hue মান গণনা করতে পারি।

বর্ণনা তালিকা স্টাইলিং

আগে যেমন উল্লেখ করা হয়েছে, আমরা আরও স্টাইলিং বিকল্পগুলি দিতে, dl এ একটি div মধ্যে পদ এবং তাদের সংজ্ঞাগুলি মোড়ানো বেছে নিতে পারি। উদাহরণস্বরূপ, আমরা আমাদের তালিকাকে গ্রিড হিসাবে প্রদর্শন করতে চাই। display: grid প্রতিটি গ্রুপের চারপাশে একটি মোড়ক div ছাড়া তালিকায় গ্রিড মানে আমাদের শর্তাবলী এবং বিবরণ বিভিন্ন গ্রিড কক্ষে স্থাপন করা হয়েছে। কখনও কখনও এটি দরকারী, যেমন নিম্নলিখিত উদাহরণে, তাদের বর্ণনা সহ পাইয়ের একটি মেনু দেখানো।

আমরা তালিকায় একটি গ্রিড সংজ্ঞায়িত করতে পারি এবং নিশ্চিত করতে পারি যে শর্তাবলী এবং বিবরণ সর্বদা কলামে সারিবদ্ধ হবে, কলামের প্রস্থ দীর্ঘতম মেয়াদ দ্বারা নির্ধারিত হবে।

অন্যদিকে, আমরা যদি পরিভাষাগুলিকে তাদের বিবরণ কার্ড-স্টাইলের সাথে আলাদাভাবে গ্রুপ করতে চাই, তাহলে একটি মোড়ক <div> খুবই সহায়ক।

সম্পদ

• তালিকা তালিকা এবং ::মার্কারের একটি ভূমিকা
• ::মার্কার ব্যবহার করে কাস্টম মার্কার
• কাউন্টার সহ CSS তালিকা