لیست های 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 همچنین برای فاصله دادن محتوای آیتم فهرست از نشانگر آن، padding اعمال می‌کنند. باز هم، در برخی موارد، این یک هزینه بسیار خوب است، اما اگر در حال حاضر نشانگرهای لیست را مانند آنچه در بالا انجام دادیم حذف کنیم، ممکن است آن پد را نیز پاک کنیم. این مورد دیگری برای :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}بسیار خوب، این امر از شناور شدن آیتم های لیست بدون نشانگر در فضا جلوگیری می کند. اما ما به نوعی کودک را با آب حمام بیرون انداختیم و در همه موارد، از جمله مواردی را که قبلا در یک حمام جدا کرده بودیم، بالشتک را برداشتیم.
. بنابراین، اکنون آن لیست‌ها با نشانگرها از لبه جعبه محتوا آویزان هستند.
توجه داشته باشید که سبک‌های UA یک چیز اضافی را اعمال می‌کنند 40px به
عنصر
بنابراین کاری که می‌خواهیم انجام دهیم این است که از آویزان شدن نشانگرهای لیست در خارج از ظرف جلوگیری کنیم. ما می توانیم آن را با list-style-position ویژگی:
یا نه... شاید به ترجیح سبکی برمی گردد؟
نگرانی های دسترسی جدیدتر با لیست ها
متأسفانه، در مورد لیست‌ها نگرانی‌های مربوط به دسترسی وجود دارد - حتی در این دوران مدرن‌تر. یک نگرانی نتیجه درخواست است list-style: none; همانطور که هنگام تنظیم مجدد سبک های UA انجام دادیم.
به طور خلاصه سافاری نمیکند لیست های مرتب و نامرتب استایل شده را بخوانید list-style: none به عنوان لیست های واقعی، مانند هنگام پیمایش محتوا با صفحه خوان. به عبارت دیگر، حذف نشانگرها معنای معنایی فهرست را نیز حذف می کند. این برای این رفع مشکل آن را برای اعمال یک ARIA list نقش در لیست و الف listitem نقش در موارد فهرست بنابراین صفحه‌خوان‌ها آنها را انتخاب می‌کنند:
- ...
- ...
- ...
- ...
- ...
- ...
عجیب ، سافاری این را یک ویژگی می داند به جای یک اشکال اساساً، کاربران گزارش می‌دهند که صفحه‌خوان‌ها فهرست‌های زیادی را اعلام می‌کنند (زیرا توسعه‌دهندگان تمایل دارند از آنها بیش از حد استفاده کنند)، بنابراین اکنون، فقط کسانی که role="list" توسط صفحه‌خوان‌ها اعلام می‌شوند، که در واقع آنقدرها هم عجیب نیست. اسکات اوهارا است خلاصه تفصیلی از اینکه چگونه همه چیز از بین رفت
دومین نگرانی در مورد دسترسی، ساخته خود ما نیست (هور!). بنابراین، شما می دانید چگونه شما قرار است اضافه کردن یک aria-label به
عناصر بدون عنوان؟ خوب، گاهی اوقات منطقی است که همین کار را با لیستی انجام دهید که حاوی عنصر عنوان نیست که به توصیف لیست کمک کند.
Grocery list
شما کاملا کار را انجام ندهید باید از هر دو روش استفاده کرد استفاده از عنوان یا برچسب ARIA فقط زمینه اضافه شده است، نه یک الزام - مطمئن شوید که وب سایت های خود را با صفحه خوان ها آزمایش کنید و کاری را انجام دهید که بهترین تجربه کاربری را برای موقعیت ارائه می دهد.
در اخبار مرتبط، اریک بیلی یک قطعه عالی نوشت چرا و چگونه او در نظر می گیرد aria-label بوی رمز باشد.
صبر کن،
یک لیست است، بیش از حد؟
خوب، پس احتمالاً در مورد همه اینها تعجب می کنید
عناصری که من در نمونه های کد لغزش کرده ام. در واقع فوق العاده ساده است. منوها لیست های نامرتب هستند به جز اینکه برای آیتم های تعاملی در نظر گرفته شده اند. آنها حتی در معرض درخت دسترسی به عنوان لیست های نامرتب قرار می گیرند.
در روزهای اولیه وب معنایی، من به اشتباه فکر می کردم که منوها شبیه هستند
s قبل از اینکه باور کنیم برای منوهای زمینه (یا "نوار ابزار" به عنوان مشخصات می گوید) زیرا این همان چیزی است که نسخه های اولیه مشخصات HTML گفته اند. (MDN نوشته جالبی دارد در مورد تمام موارد منسوخ مربوط به
اگر اصلاً علاقه دارید.)
اما امروزه این روش معنایی برای استفاده از منوها است:
من شخصاً فکر می کنم موارد استفاده خوبی برای آنها وجود دارد
. نمونه آخر فهرستی از دکمه های اشتراک گذاری اجتماعی را نشان می دهد که در یک برچسب پیچیده شده اند
عنصر، جنبه قابل توجه این است که برچسب "اشتراک گذاری مقاله" مقدار قابل توجهی از زمینه را ارائه می دهد که به توصیف کاری که دکمه ها انجام می دهند کمک می کند.
آیا منوها کاملا ضروری هستند؟ نه نشانه های HTML? قطعا نه. اما اگر کمتر از آن لذت ببرید، آنجا هستند
s و احساس می کنید که کامپوننت می تواند از an استفاده کند aria-label برای زمینه اضافی
چیز دیگری مد نظر دارید؟
بله، موارد ذکر شده نیز وجود دارد
با این حال، عنصر (فهرست توضیحات) به نظر نمی رسد MDN آنها را فهرستی در نظر بگیرد به همین ترتیب - این فهرستی از گروه‌های حاوی اصطلاحات است - و نمی‌توانم بگویم که واقعاً آنها را در حال استفاده دیده‌ام. طبق MDN، قرار است از آنها برای ابرداده، واژه نامه و انواع دیگر جفت های کلید-مقدار استفاده شود. من فقط از آنها اجتناب می کنم به این دلیل که همه صفحه خوان ها آنها را متفاوت اعلام می کنند.
اما بیایید همه چیز را با یک نکته منفی تمام نکنیم. در اینجا لیستی از کارهای فوق العاده جالبی است که می توانید با لیست ها انجام دهید:
