HTML তালিকা বিরক্তিকর. তারা না do অনেক, তাই আমরা তাদের সম্পর্কে সত্যিই চিন্তা করি না যদিও তারা কতটা ব্যাপকভাবে ব্যবহৃত হয়। এবং আমরা এখনও তাদের কাস্টমাইজ করার জন্য একই জিনিসগুলি করতে সক্ষম হয়েছি, যেমন মার্কারগুলি সরানো, ক্রম বিপরীত করা এবং কাস্টম কাউন্টার তৈরি করা৷
তবে, কিছু "নতুন" জিনিস আছে — বিপদ সহ — তালিকা ব্যবহার করার সময় জানতে হবে। বিপদগুলি বেশিরভাগই ছোট, কিন্তু আপনি যা ভাবেন তার চেয়ে বেশি সাধারণ। আমরা সেগুলি পেতে পারব, এছাড়াও কিছু নতুন জিনিস যা আমরা তালিকার সাথে করতে পারি, এমনকি পুরানো সমাধানগুলির সাথে যোগাযোগ করার নতুন উপায়ও।
স্পষ্ট করার জন্য, আমরা যে HTML উপাদানগুলির কথা বলছি:
- অর্ডারকৃত তালিকা
- অনিয়ন্ত্রিত তালিকা
- বর্ণনা তালিকা
- ইন্টারেক্টিভ তালিকা
অর্ডার করা তালিকা, ক্রমহীন তালিকা এবং ইন্টারেক্টিভ তালিকায় তালিকা আইটেম রয়েছে (
) যা আমরা কি ধরনের তালিকার সাথে কাজ করছি সেই অনুযায়ী প্রদর্শিত হয়। একটি আদেশকৃত তালিকা (
) তালিকা আইটেমগুলির পাশে নম্বরগুলি প্রদর্শন করে। ক্রমহীন তালিকা (
) এবং মেনু উপাদান (
) তালিকা আইটেমগুলির পাশে বুলেট পয়েন্ট প্রদর্শন করে। আমরা এই "তালিকা চিহ্নিতকারী" কল এবং তারা এমনকি শৈলী করা যেতে পারে ব্যবহার করে ::মার্কার ছদ্ম-উপাদান। বর্ণনা তালিকা বর্ণনা শর্তাবলী ব্যবহার করে (
) এবং বর্ণনার বিবরণ (
) পরিবর্তে
এবং তালিকা চিহ্নিতকারী নেই. এগুলি মেটাডেটা এবং শব্দকোষগুলি প্রদর্শন করার জন্য ব্যবহৃত হওয়ার কথা, তবে আমি বলতে পারি না যে আমি তাদের কখনও বনে দেখেছি৷
আসুন সহজ জিনিস দিয়ে শুরু করি — কীভাবে সঠিকভাবে (অন্তত আমার মতে) তালিকা শৈলীগুলি পুনরায় সেট করা যায়। এর পরে, আমরা অধরাকে আলোকিত করার আগে কয়েকটি অ্যাক্সেসিবিলিটি সমস্যার দিকে নজর দেব
উপাদান, যা আপনি শিখতে অবাক হতে পারেন... আসলে এটিও এক ধরনের তালিকা!
তালিকা শৈলী রিসেট করা হচ্ছে
ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে বাক্সের বাইরে তালিকার ভিজ্যুয়াল কাঠামোতে সহায়তা করার জন্য তাদের নিজস্ব ব্যবহারকারী এজেন্ট শৈলী প্রয়োগ করে। যে মহান হতে পারে! কিন্তু যদি আমরা স্টাইলিং মতামত মুক্ত একটি ফাঁকা স্লেট দিয়ে শুরু করতে চাই, তাহলে আমাদের প্রথমে সেই শৈলীগুলি পুনরায় সেট করতে হবে।
উদাহরণস্বরূপ, আমরা খুব সহজেই তালিকা আইটেমগুলির পাশে চিহ্নিতকারীগুলিকে সরাতে পারি। এখানে নতুন কিছু নেই:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}কিন্তু আধুনিক CSS-এ আমাদেরকে নির্দিষ্ট তালিকার উদাহরণ টার্গেট করতে সাহায্য করার নতুন উপায় রয়েছে। ধরা যাক আমরা সমস্ত তালিকা থেকে মার্কারগুলি সাফ করতে চাই, যদি সেই তালিকাগুলি উপস্থিত হয় তবে৷ একটি নিবন্ধের মতো দীর্ঘ-ফর্মের সামগ্রী. আমরা যদি নতুন CSS সিউডো-ক্লাস ফাংশনগুলির ক্ষমতাগুলিকে একত্রিত করি :where() এবং :not(), আমরা সেই দৃষ্টান্তগুলিকে বিচ্ছিন্ন করতে পারি এবং সেই ক্ষেত্রে চিহ্নিতকারীদের অনুমতি দিতে পারি:
/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}কেন ব্যবহার :where() পরিবর্তে :is()? এর নির্দিষ্টতা :where() সবসময় শূন্য হয়, যদিও :is() তার নির্বাচকদের তালিকায় সবচেয়ে নির্দিষ্ট উপাদানের নির্দিষ্টতা নেয়। সুতরাং, ব্যবহার করে :where() জিনিসগুলিকে ওভাররাইড করার একটি কম জোরদার উপায় এবং সহজেই নিজেকে ওভাররাইড করা যেতে পারে।
UA শৈলীগুলি একটি তালিকা আইটেমের বিষয়বস্তুকে এর মার্কার থেকে স্থান দেওয়ার জন্য প্যাডিং প্রয়োগ করে। আবার, এটি কিছু ক্ষেত্রে বাক্সের বাইরে একটি চমত্কার সুন্দর সামর্থ্য, কিন্তু যদি আমরা ইতিমধ্যেই তালিকা চিহ্নিতকারীগুলিকে সরিয়ে ফেলি যেমন আমরা উপরে করেছি, তাহলে আমরা সেই প্যাডিংটিও মুছে ফেলতে পারি। এই জন্য অন্য মামলা :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}ঠিক আছে, এটি মার্কার-হীন তালিকা আইটেমগুলিকে মহাকাশে ভাসতে দেখাতে বাধা দেবে। কিন্তু আমরা গোসলের পানি দিয়ে শিশুটিকে ছুঁড়ে ফেলে দিয়েছি এবং সব ক্ষেত্রেই প্যাডিংটি সরিয়ে ফেলেছি, যার মধ্যে আমরা আগে বিচ্ছিন্ন করে রেখেছিলাম।
. সুতরাং, এখন মার্কারের সাথে সেই তালিকাগুলি বিষয়বস্তুর বাক্সের প্রান্তে ঝুলে আছে।
লক্ষ্য করুন যে UA শৈলী একটি অতিরিক্ত প্রয়োগ করে 40px থেকে
উপাদান।
তাই আমরা যা করতে চাই তা হল তালিকা চিহ্নিতকারীকে পাত্রের বাইরে "ঝুলন্ত" থেকে আটকাতে। আমরা এর সাথে এটি ঠিক করতে পারি list-style-position সম্পত্তি:
বা না... হয়তো এটা শৈলীগত পছন্দ নিচে আসে?
তালিকার সাথে নতুন অ্যাক্সেসযোগ্যতার উদ্বেগ
দুর্ভাগ্যবশত, তালিকার ক্ষেত্রে কিছু অ্যাক্সেসযোগ্যতার উদ্বেগ রয়েছে - এমনকি এই আধুনিক সময়েও। একটি উদ্বেগ আবেদন একটি ফলাফল list-style: none; যেমনটি আমরা UA শৈলী রিসেট করার সময় করেছিলাম।
সংক্ষেপে, সাফারি না স্টাইল করা অর্ডার করা এবং ক্রমবিহীন তালিকা পড়ুন list-style: none প্রকৃত তালিকা হিসাবে, যেমন একটি স্ক্রিন রিডার দিয়ে বিষয়বস্তু নেভিগেট করার সময়। অন্য কথায়, মার্কারগুলি সরানো তালিকার শব্দার্থিক অর্থও সরিয়ে দেয়। দ্য এই ফিক্সের জন্য ঠিক করুন এটি একটি প্রয়োগ করতে জায়গা list তালিকায় ভূমিকা এবং ক listitem তালিকা আইটেম ভূমিকা তাই স্ক্রিন রিডাররা সেগুলো তুলে নেবে:
- ...
- ...
- ...
- ...
- ...
- ...
অদ্ভুতভাবে, সাফারি এটিকে একটি বৈশিষ্ট্য বলে মনে করে বরং একটি বাগ চেয়ে মূলত, ব্যবহারকারীরা রিপোর্ট করবে যে স্ক্রিন রিডাররা অনেক বেশি তালিকা ঘোষণা করছে (কারণ ডেভেলপাররা তাদের অতিরিক্ত ব্যবহার করে), তাই এখন, শুধুমাত্র যাদের আছে role="list" স্ক্রিন রিডারদের দ্বারা ঘোষণা করা হয়, যা আসলে এতটা অদ্ভুত নয়। স্কট ও'হারা আছে বিস্তারিত রানডাউন কিভাবে এটা সব নিচে নেমে গেছে.
একটি দ্বিতীয় অ্যাক্সেসিবিলিটি উদ্বেগ আমাদের নিজস্ব তৈরির একটি নয় (হুরে!) সুতরাং, আপনি জানেন কিভাবে আপনি অনুমিত করছি একটি যোগ করুন aria-label থেকে
শিরোনাম ছাড়া উপাদান? ঠিক আছে, এটি কখনও কখনও এমন একটি তালিকার সাথে একই কাজ করার অর্থবোধ করে যেটিতে একটি শিরোনাম উপাদান নেই যা তালিকাটি বর্ণনা করতে সহায়তা করে।
Grocery list
আপনি একেবারে না উভয় পদ্ধতি ব্যবহার করতে হবে। একটি শিরোনাম বা একটি ARIA লেবেল ব্যবহার করা শুধুমাত্র প্রসঙ্গ যোগ করা হয়েছে, একটি প্রয়োজন নয় — আপনার ওয়েবসাইটগুলিকে স্ক্রিন রিডারগুলির সাথে পরীক্ষা করতে ভুলবেন না এবং পরিস্থিতির জন্য সেরা ব্যবহারকারীর অভিজ্ঞতা যা দেয় তা করুন৷
কিছুটা সম্পর্কিত সংবাদে, এরিক বেইলি একটি চমৎকার অংশ লিখেছেন কেন এবং কিভাবে তিনি বিবেচনা aria-label একটি কোড গন্ধ হতে.
অপেক্ষা করুন,
একটি তালিকা, খুব?
ঠিক আছে, তাই, আপনি সম্ভবত সব সম্পর্কে ভাবছেন
উপাদান যে আমি কোড উদাহরণ মধ্যে স্খলন করা হয়েছে. এটা আসলে সুপার সহজ; মেনুগুলি হল অবিন্যস্ত তালিকাগুলি ব্যতীত যেগুলি ইন্টারেক্টিভ আইটেমগুলির জন্য। তারা এমনকি অবিন্যস্ত তালিকা হিসাবে অ্যাক্সেসিবিলিটি গাছের সংস্পর্শে এসেছে।
শব্দার্থিক ওয়েবের প্রথম দিকে, আমি ভুলভাবে বিশ্বাস করেছিলাম যে মেনুগুলি ছিল
s বিশ্বাস করার আগে যে তারা প্রসঙ্গ মেনুর জন্য ছিল (বা "টুলবার" হিসাবে স্পেক বলে) কারণ এইচটিএমএল স্পেকের প্রাথমিক সংস্করণগুলি তাই বলেছে। (MDN একটি আকর্ষণীয় লেখা আছে এর সাথে সম্পর্কিত সমস্ত অবমূল্যায়িত জিনিসের উপর
আপনি যদি আগ্রহী হন।)
আজ, যাইহোক, এটি মেনু ব্যবহার করার শব্দার্থিক উপায়:
ব্যক্তিগতভাবে, আমি মনে করি এর জন্য কিছু ভাল ব্যবহার-ক্ষেত্র রয়েছে
. সেই শেষ উদাহরণটি লেবেলে মোড়ানো সামাজিক শেয়ারিং বোতামগুলির একটি তালিকা দেখায়৷
উপাদান, উল্লেখযোগ্য দিক হল যে "আর্টিকেল ভাগ করুন" লেবেলটি একটি উল্লেখযোগ্য পরিমাণ প্রসঙ্গ অবদান রাখে যা বোতামগুলি কী করে তা বর্ণনা করতে সহায়তা করে।
মেনু কি একেবারে প্রয়োজনীয়? না. তারা কি এইচটিএমএল ল্যান্ডমার্ক? অবশ্যই না. আপনি যদি কম উপভোগ করেন তবে তারা সেখানে আছে
s এবং আপনি অনুভব করেন যে উপাদানটি একটি ব্যবহার করতে পারে aria-label অতিরিক্ত প্রসঙ্গের জন্য।
আর কিছু?
হ্যাঁ, উপরে উল্লিখিত এছাড়াও আছে
(বর্ণনা তালিকা) উপাদান, তবে, MDN তাদের তালিকা বিবেচনা করে বলে মনে হয় না একইভাবে — এটি পদ সম্বলিত গোষ্ঠীগুলির একটি তালিকা — এবং আমি বলতে পারি না যে আমি সত্যিই সেগুলি ব্যবহার করতে দেখেছি৷ MDN-এর মতে, এগুলি মেটাডেটা, শব্দকোষ এবং অন্যান্য ধরনের কী-মান জোড়ার জন্য ব্যবহার করার কথা। আমি শুধু এই কারণে এড়িয়ে যাব যে সমস্ত স্ক্রিন পাঠক তাদের আলাদাভাবে ঘোষণা করে।
তবে আসুন একটি নেতিবাচক নোটে জিনিসগুলি শেষ করবেন না। আপনি তালিকার সাথে করতে পারেন এমন দুর্দান্ত জিনিসগুলির একটি তালিকা এখানে রয়েছে:
