তালিকা

CSS পডকাস্ট - 030: তালিকা

কল্পনা করুন যে আপনার কাছে একগুচ্ছ আইটেম রয়েছে যা আপনি আপনার পরবর্তী মুদি ট্রিপের সময় কেনার পরিকল্পনা করছেন। এটি দৃশ্যত প্রতিনিধিত্ব করার একটি সাধারণ উপায় হল একটি তালিকা-কিন্তু আপনি কীভাবে আপনার মুদির তালিকায় স্টাইলিং যুক্ত করতে পারেন? 

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

একটি তালিকা তৈরি করা হচ্ছে

পূর্ববর্তী তালিকাটি একটি শব্দার্থিক উপাদান দিয়ে শুরু হয়েছিল, বা <ul> , মুদির তালিকার আইটেমগুলি ( <li> উপাদান) শিশুদের হিসাবে। আপনি যদি প্রতিটি <li> উপাদান পরিদর্শন করেন তবে আপনি দেখতে পাবেন যে তাদের সকলেরই display: list-item , যার কারণে ব্রাউজার ডিফল্টভাবে একটি ::marker রেন্ডার করে।

li {
  display: list-item;
}

আরও দুই ধরনের তালিকা আছে।

অর্ডার করা তালিকাগুলি <ol> দিয়ে তৈরি করা যেতে পারে, এই ক্ষেত্রে তালিকা-আইটেমটি ::marker হিসাবে একটি সংখ্যা প্রদর্শন করবে।

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

এবং বর্ণনা তালিকাগুলি <dl> দিয়ে তৈরি করা হয়, তবে এই তালিকার ধরণটি <li> তালিকা আইটেম উপাদান ব্যবহার করে না। 

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

শৈলী তালিকা

ব্রাউজার সমর্থন

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: 1

উৎস

এখন যেহেতু আপনি একটি তালিকা তৈরি করতে জানেন, আপনি তাদের স্টাইল করতে পারেন। প্রথম CSS বৈশিষ্ট্যগুলি আবিষ্কার করা হয় যেগুলি সম্পূর্ণ তালিকায় প্রয়োগ করা হয়৷

আপনার উদাহরণ স্টাইল করার জন্য আপনি তিনটি তালিকা-শৈলী বৈশিষ্ট্য ব্যবহার করতে পারেন: list-style-position , list-style-image , এবং list-style-type ।

list-style-position

list-style-position আপনাকে আপনার বুলেট পয়েন্টকে তালিকা-আইটেমের বিষয়বস্তুর inside বা outside সরাতে দেয়। ডিফল্ট outside মানে বুলেট পয়েন্ট তালিকা আইটেম বিষয়বস্তু অন্তর্ভুক্ত করা হয় না যখন inside তালিকা আইটেম এর বিষয়বস্তু মধ্যে প্রথম উপাদান সরানো.

বাইরে এবং ভিতরে উভয়ই ::মার্কার সহ একটি তালিকা যা দেখায় যে বাইরে (ডিফল্ট মান) তালিকা-আইটেমের মধ্যে নেই এবং তালিকা-আইটেম সামগ্রী বাক্সের ভিতরে রয়েছে।

list-style-image

list-style-image আপনাকে আপনার তালিকার বুলেট পয়েন্ট ইমেজ দিয়ে প্রতিস্থাপন করতে দেয়। এটি আপনাকে আপনার বুলেটগুলিকে একটি ইমেজ, এসভিজি বা জিআইএফ ইভেন করার জন্য একটি url বা none এর মতো একটি চিত্র সেট করতে সক্ষম করে৷ আপনি যেকোনো মিডিয়া টাইপ বা এমনকি একটি ডেটা URIও ব্যবহার করতে পারেন।

আসুন দেখি কিভাবে আমরা list-style-image হিসাবে আমাদের প্রতিটি মুদি জিনিসের একটি ইমেজ যোগ করতে পারি:

list-style-type

চূড়ান্ত বিকল্প হল list-style-type স্টাইল করা যা বুলেট পয়েন্টগুলিকে পরিচিত স্টাইল কীওয়ার্ড, কাস্টম স্ট্রিং, ইমোজি এবং আরও অনেক কিছুতে পরিবর্তন করে। আপনি এখানে সম্ভাব্য সব ধরনের তালিকা শৈলী দেখতে পারেন।

list-style শর্টহ্যান্ড

এখন আপনার কাছে এই সমস্ত স্বতন্ত্র বৈশিষ্ট্য রয়েছে, আপনি আমাদের তালিকার সমস্ত শৈলী এক লাইনে সেট করতে list-style সংক্ষিপ্ত হ্যান্ড ব্যবহার করতে পারেন:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style আপনাকে যে কোনো ক্রমে list-style বৈশিষ্ট্যগুলির এক, দুই বা তিনটি সংমিশ্রণ ঘোষণা করতে দেয়। যদি list-style-type এবং list-style-image উভয়ই সেট করা থাকে, তাহলে ইমেজটি অনুপলব্ধ হলে list-style-type ফলব্যাক হিসেবে ব্যবহার করা হয়।

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

এই বিভাগে আচ্ছাদিত তালিকা শৈলীর এটি সবচেয়ে বেশি ব্যবহৃত সম্পত্তি। একটি সাধারণ অ্যাপ্লিকেশন হল list-style: none । ডিফল্ট শৈলী ব্রাউজার থেকে আসে, এবং আপনি প্রায়শই প্যাডিং এবং মার্জিনের মতো তালিকা শৈলীগুলি সরিয়ে রিসেট স্টাইলশীট দেখতে পান। আপনি শৈলী সেট করতে এই শর্টহ্যান্ড ব্যবহার করতে পারেন, যেমন list-style: square inside;

এখনও অবধি, উদাহরণগুলি একটি সম্পূর্ণ তালিকা এবং তালিকা আইটেমগুলিকে স্টাইল করার উপর দৃষ্টি নিবদ্ধ করেছে, তবে আরও দানাদার পদ্ধতির কী হবে?

::marker সিউডো-এলিমেন্ট

list-item চিহ্নিতকারী উপাদান হল বুলেট, হাইফেন বা রোমান সংখ্যা যা আপনার তালিকার প্রতিটি আইটেম নির্দেশ করতে সাহায্য করে।

তিনটি আইটেম সহ একটি তালিকা যা দেখায় যে প্রতিটি বুলেট হল ::মার্কার সিউডো-এলিমেন্ট।

আপনি যদি DevTools-এ তালিকাটি পরীক্ষা করেন, তাহলে HTML-এ কোনো ঘোষণা না করা সত্ত্বেও আপনি তালিকার প্রতিটি আইটেমের জন্য একটি ::marker উপাদান দেখতে পাবেন। আপনি যদি ::marker আরও পরিদর্শন করেন, আপনি এটির জন্য ব্রাউজার ডিফল্ট স্টাইলিং দেখতে পাবেন।

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

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

মার্কার বক্স

CSS লেআউট মডেলে, তালিকা আইটেম চিহ্নিতকারী প্রতিটি তালিকা আইটেমের সাথে যুক্ত একটি মার্কার বক্স দ্বারা প্রতিনিধিত্ব করা হয়। মার্কার বক্স হল একটি ধারক যা সাধারণত বুলেট বা নম্বর ধারণ করে।

মার্কার বক্স স্টাইল করতে, আপনি ::marker নির্বাচক ব্যবহার করতে পারেন। এটি আপনাকে সম্পূর্ণ তালিকার উপর ভিত্তি করে স্টাইলিং করার পরিবর্তে শুধুমাত্র মার্কার নির্বাচন করতে দেয়।

মার্কার শৈলী

এখন আপনি মার্কার নির্বাচন করেছেন, আসুন এই নির্বাচকের জন্য উপলব্ধ স্টাইলিং বৈশিষ্ট্যগুলি দেখুন। আপনি web.dev-এ CSS ::marker দিয়ে কাস্টম বুলেট সম্পর্কে আরও জানতে পারেন।

এখানে বেশ কয়েকটি অনুমোদিত CSS ::marker বৈশিষ্ট্য রয়েছে:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

প্রদর্শনের ধরন

আমাদের সমস্ত list-style এবং ::marker বৈশিষ্ট্যগুলি <li> উপাদানগুলিকে স্টাইল করতে জানে কারণ তাদের তালিকা-আইটেমের একটি ডিফল্ট প্রদর্শন মান রয়েছে। আপনি একটি তালিকা আইটেমে একটি <li> নয় এমন জিনিস তৈরি করতে পারেন।

আপনি সম্পত্তি display: list-item । display: list-item ব্যবহার করার একটি উদাহরণ হল আপনি যদি একটি শিরোনামে একটি ঝুলন্ত বুলেট চান, যাতে আপনি এটিকে ::marker দিয়ে অন্য কিছুতে পরিবর্তন করতে পারেন। নিম্নলিখিত উদাহরণ display: list-item , সঠিক তালিকা মার্কআপ ব্যবহার করে একটি তালিকা সহ।

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

আপনার উপলব্ধি পরীক্ষা করুন

তালিকা সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

একটি তালিকা-আইটেমের পূর্ববর্তী উপাদানটিকে বলা হয় a

::bullet
আবার চেষ্টা করুন
::pencil
আবার চেষ্টা করুন
::marker
সঠিক!
::counter
আবার চেষ্টা করুন

এইচটিএমএল তালিকা তিন প্রকার

<dl>
সঠিক!
<lo>
আবার চেষ্টা করুন
<ol>
সঠিক!
<li>
আবার চেষ্টা করুন
<ul>
সঠিক!
<list>
আবার চেষ্টা করুন

এই তালিকার কোন দুটি শৈলী একটি ::marker শৈলী প্রয়োগ করবে?

transition
সঠিক!
background-color
আবার চেষ্টা করুন
color
সঠিক!
display
আবার চেষ্টা করুন

সম্পদ