یک ظاهر طراحی خلاقانه لیست

نگاهی به چند روش مفید و خلاقانه برای استایل دادن به یک لیست.

Michelle Barker

وقتی به لیست فکر می کنید چه چیزی به ذهنتان می رسد؟ واضح ترین مثال یک لیست خرید است - ساده ترین لیست، مجموعه ای از اقلام بدون ترتیب خاصی. اما ما از فهرست‌ها به روش‌های مختلف در وب استفاده می‌کنیم. مجموعه ای از کنسرت های آینده در یک سالن؟ به احتمال زیاد یک لیست فرآیند رزرو چند مرحله ای؟ احتمالاً یک لیست یک گالری از تصاویر؟ حتی می‌توان آن را فهرستی از تصاویر با زیرنویس در نظر گرفت.

در این مقاله به انواع مختلف لیست HTML موجود در وب و زمان استفاده از آنها می پردازیم، از جمله ویژگی هایی که ممکن است با آنها آشنا نباشید. ما همچنین نگاهی به چند روش مفید و خلاقانه برای استایل دادن به آنها با CSS خواهیم داشت.

چه زمانی از یک لیست استفاده کنیم

زمانی که آیتم ها نیاز به گروه بندی معنایی دارند باید از یک عنصر لیست HTML استفاده شود. فن‌آوری‌های کمکی (مانند صفحه‌خوان‌ها) به کاربر اطلاع می‌دهند که فهرست و تعداد آیتم‌ها وجود دارد. اگر مثلاً به شبکه ای از محصولات در یک سایت خرید فکر می کنید، دانستن این اطلاعات بسیار مفید خواهد بود. بنابراین، استفاده از یک عنصر لیست ممکن است انتخاب خوبی باشد.

انواع فهرست

وقتی نوبت به نشانه گذاری می رسد، ما یک انتخاب از سه عنصر مختلف لیست در دسترس داریم:

• لیست نامرتب
• لیست سفارش داده شده
• لیست توضیحات

اینکه کدام یک را انتخاب کنید بستگی به مورد استفاده دارد.

لیست نامرتب (ul)

عنصر لیست نامرتب ( <ul> ) زمانی بسیار مفید است که موارد موجود در لیست با ترتیب خاصی مطابقت نداشته باشند. به طور پیش فرض این به عنوان یک لیست گلوله ای نمایش داده می شود. به عنوان مثال یک لیست خرید است که در آن سفارش مهم نیست.

مثال رایج تر در وب، منوی پیمایش است. هنگام ساختن یک منو، برای کمک به فناوری های کمکی، تمرین خوب است که ul را در یک عنصر nav و شناسایی منو با یک برچسب انجام دهید. همچنین باید صفحه فعلی را در منو شناسایی کنیم که می توانیم با استفاده از ویژگی 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> را تورفتگی کنند.

در HTML، گروه بندی عبارات با توضیحات همراه آنها با استفاده از <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 انجام دهیم!

توجه: برای تازه‌سازی اصول اولیه استایل‌سازی فهرست، آموزش یادگیری CSS و همچنین استفاده ::marker در این راهنمای گلوله‌های سفارشی بررسی کنید. در مورد برخی از چیزهایی که ممکن است قبلاً نمی دانید بخوانید!

:: نشانگر

علاوه بر اینکه به نشانگرهای لیست خود یک سبک اولیه می دهیم، می توانیم گلوله های چرخه ای ایجاد کنیم. در اینجا ما از سه URL تصویر مختلف برای مقدار content شبه عنصر ::marker استفاده می کنیم که به احساس دست نویس مثال لیست خرید ما می افزاید (بر خلاف استفاده از یک تصویر واحد برای همه):

::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") ' ';  
}  

شمارنده های سفارشی

برای برخی از لیست های مرتب شده ممکن است بخواهیم از مقدار شمارنده استفاده کنیم، اما مقدار دیگری به آن اضافه کنیم. می‌توانیم از شمارنده list-item به‌عنوان مقداری برای ویژگی content نشانگرمان استفاده کنیم و هر محتوای دیگری را اضافه کنیم:

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

شمارنده‌های ما به‌طور خودکار یک‌بار افزایش می‌یابند، اما می‌توانیم با تنظیم ویژگی counter-increment در آیتم فهرست، در صورت انتخاب، به آن‌ها اجازه دهیم با مقدار دیگری افزایش پیدا کنند. به عنوان مثال، هر بار شمارنده های ما را سه تا افزایش می دهد:

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

چیزهای بیشتری وجود دارد که می‌توانیم با شمارنده‌ها به آن بپردازیم. مقاله CSS Lists, Markers and Counters برخی از احتمالات را با جزئیات بیشتر توضیح می دهد.

محدودیت های :: یک ظاهر طراحی شده نشانگر

مواقعی وجود دارد که ممکن است بخواهیم کنترل بیشتری بر موقعیت و سبک نشانگرهای خود داشته باشیم. برای مثال نمی‌توان نشانگر را با استفاده از فلکس‌باکس یا شبکه‌ای قرار داد، که اگر به تراز دیگری نیاز داشته باشید، گاهی اوقات می‌تواند یک اشکال باشد. ::marker تعداد محدودی از ویژگی های CSS را برای یک ظاهر طراحی می کند. اگر طراحی ما به چیزی غیر از استایل اولیه نیاز دارد، بهتر است از یک شبه عنصر دیگر استفاده کنیم.

فهرست‌های استایل‌سازی که شبیه فهرست‌ها نیستند

گاهی اوقات ممکن است بخواهیم به لیست‌های خود استایلی بدهیم که کاملاً متفاوت از استایل پیش‌فرض باشد. این اغلب در مورد یک منوی ناوبری صدق می کند ، برای مثال، جایی که ما معمولاً می خواهیم همه نشانگرها را حذف کنیم و ممکن است با استفاده از flexbox لیست خود را به صورت افقی نمایش دهیم. یک روش معمول این است که ویژگی list-style را روی none تنظیم کنید. این بدان معناست که شبه عنصر نشانگر دیگر در DOM قابل دسترسی نخواهد بود.

احتیاط: یک کلمه هشدار: list-style: none باعث نمی‌شود که Safari دیگر فهرست نامرتب را در درخت دسترس‌پذیری تشخیص ندهد - به این معنی که یک صفحه‌خوان دیگر اطلاعات مفیدی مانند تعداد موارد را اعلام نمی‌کند. یک راه حل ساده (با فرض اینکه لیست شما باید به این صورت خوانده شود) استفاده از role="list" در عنصر <ul> یا <ol> در HTML خود است، همانطور که متخصص دسترسی، اسکات اوهارا توصیه می کند .

نشانگرهای سفارشی با ::before

قبل از اینکه نشانگر ::before ظاهر شود، شکل دادن به شبه عنصر ::marker prefore یک روش معمول برای ایجاد نشانگرهای لیست سفارشی بود. اما حتی در حال حاضر، می تواند انعطاف پذیری بیشتری را در صورت نیاز، برای یک ظاهر طراحی لیست پیچیده به ما بدهد.

مانند ::marker ، ما می‌توانیم سبک‌های گلوله سفارشی خود را با استفاده از ویژگی content اضافه کنیم. برخلاف استفاده از ::marker ، ما باید موقعیت یابی دستی را انجام دهیم، زیرا مزایای خودکار ارائه شده توسط list-style-position را دریافت نمی کنیم. اما ما می‌توانیم آن را نسبتاً آسان با flexbox قرار دهیم، و تعداد بیشتری از احتمالات را برای تراز کردن باز می‌کند. به عنوان مثال، می توانیم موقعیت نشانگر را به طور متناوب تغییر دهیم:

اگر به یک لیست مرتب شده با استفاده از عنصر ::before حالت می دهیم، ممکن است بخواهیم از شمارنده ها برای اضافه کردن نشانگرهای عددی خود استفاده کنیم.

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

استفاده از ::before به جای ::marker به ما امکان دسترسی کامل به خصوصیات CSS برای استایل سفارشی و همچنین اجازه دادن به انیمیشن‌ها و انتقال‌ها را می‌دهد - که پشتیبانی برای ::marker محدود است.

صفات را فهرست کنید

عناصر لیست های مرتب شده برخی از ویژگی های اختیاری را می پذیرند که می توانند در موارد مختلف به ما کمک کنند.

لیست های معکوس

اگر لیستی از 10 آلبوم برتر سال گذشته داشته باشیم، ممکن است بخواهیم از 10 تا 1 شمارش معکوس داشته باشیم. یا می توانیم به سادگی از ویژگی reversed در HTML استفاده کنیم. من استدلال می کنم که به طور کلی استفاده از ویژگی reversed به جای افزایش منفی شمارنده در CSS، منطقی است، مگر اینکه شمارنده ها صرفاً نمایشی باشند. اگر CSS بارگیری نشد، همچنان اعداد را در حال شمارش معکوس درست در HTML خواهید دید. به علاوه ما باید در نظر بگیریم که چگونه یک صفحه خوان لیست را تفسیر می کند.

این نسخه نمایشی از 10 آلبوم برتر سال 2021 را ببینید. اگر شمارنده ها صرفاً با CSS افزایش می یافتند، شخصی که با استفاده از صفحه خوان به صفحه دسترسی پیدا می کرد ممکن است به این نتیجه برسد که اعداد به سمت بالا شمرده می شوند، بنابراین عدد 10 در واقع شماره یک است.

در نسخه ی نمایشی می توانید ببینید که با استفاده از ویژگی reversed ، نشانگرهای ما در حال حاضر ارزش صحیح را دارند، بدون هیچ تلاش اضافی از طرف ما! اما اگر ما نشانگرهای لیست سفارشی را با استفاده از عنصر ::before ایجاد می کنیم، باید شمارنده های خود را تنظیم کنیم. ما فقط باید به شمارنده آیتم فهرست خود دستور دهیم که به صورت منفی افزایش یابد:

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

این در فایرفاکس کافی است، اما در کروم و سافاری نشانگرها از صفر تا -10 شمارش معکوس خواهند کرد. ما می توانیم با افزودن ویژگی start به لیست این مشکل را برطرف کنیم.

تقسیم لیست ها

ویژگی start به ما امکان می دهد مقدار عددی را که لیست باید از آن شروع شود را مشخص کنیم. یکی از راه هایی که می تواند مفید باشد در مواردی است که می خواهید یک لیست را به گروه ها تقسیم کنید.

بیایید نمونه 10 آلبوم برتر خود را بسازیم. شاید ما واقعاً بخواهیم 20 آلبوم برتر را شمارش معکوس کنیم، اما در گروه های 10 تایی. در بین دو گروه محتوای صفحه دیگری وجود دارد.

ما باید دو لیست جداگانه در HTML خود ایجاد کنیم، اما چگونه می توانیم از درست بودن شمارنده ها اطمینان حاصل کنیم؟ همانطور که نشانه گذاری ما در حال حاضر وجود دارد، هر دو لیست از 10 به 1 شمارش معکوس خواهند کرد، که آن چیزی نیست که ما می خواهیم. با این حال، در HTML خود می‌توانیم یک مقدار مشخصه start مشخص کنیم. اگر مقدار start 20 را به لیست اول خود اضافه کنیم، نشانگرها یک بار دیگر به طور خودکار به روز می شوند!

<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 طیف وسیعی از امکانات را برای لیست های استایل باز می کند. اگر شاخص آیتم لیست را بدانیم، می توانیم از آن برای محاسبه مقادیر ویژگی استفاده کنیم. متأسفانه در حال حاضر راهی برای تعیین ایندکس عنصر (به هر روشی قابل استفاده) در CSS به تنهایی وجود ندارد. شمارنده‌ها فقط به ما اجازه می‌دهند از مقدار آنها در ویژگی content استفاده کنیم، و اجازه محاسبات را نمی‌دهند.

اما می‌توانیم شاخص عنصر را در ویژگی style در HTML خود تنظیم کنیم، که می‌تواند محاسبات را امکان‌پذیرتر کند، به خصوص اگر از یک زبان قالب استفاده می‌کنیم. این مثال نشان می دهد که چگونه با استفاده از 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 را با استفاده از ویژگی سفارشی خود محاسبه کنیم.

یک ظاهر طراحی لیست توضیحات

همانطور که قبلاً ذکر شد، می‌توانیم اصطلاحات و تعاریف آنها را در یک div در dl بپیچیم تا گزینه‌های استایل بیشتری در اختیارمان بگذاریم. برای مثال، ممکن است بخواهیم لیست خود را به صورت شبکه نمایش دهیم. تنظیم display: grid در لیست بدون div پوششی در اطراف هر گروه به این معنی است که اصطلاحات و توضیحات ما در سلول های شبکه مختلف قرار می گیرند. گاهی اوقات این کار مفید است، مانند مثال زیر، نشان دادن منوی کیک ها با توضیحات آنها.

می‌توانیم یک شبکه در خود فهرست تعریف کنیم و اطمینان حاصل کنیم که شرایط و توضیحات همیشه در ستون‌ها با عرض ستون با طولانی‌ترین مدت تعیین می‌شود.

از طرف دیگر، اگر بخواهیم عبارات را به طور مشخص با توضیحات آنها به سبک کارت گروه بندی کنیم، یک wrapper <div> بسیار مفید است.

منابع

• لیست ها مقدمه ای بر لیست ها و نشانگر ::
• نشانگرهای سفارشی با استفاده از :: نشانگر
• لیست های CSS با شمارنده