لیست ها

پادکست CSS - 030: Lists

تصور کنید یک سری اقلام دارید که قصد دارید در سفر بعدی خود بخرید. یکی از راه‌های متداول برای نمایش بصری این فهرست، یک لیست است، اما چگونه می‌توانید یک استایل به فهرست مواد غذایی خود اضافه کنید؟

<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>

لیست سبک ها

اکنون که می دانید چگونه یک لیست تهیه کنید، می توانید به آنها سبک دهید. اولین ویژگی های 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 را تنظیم کنید تا گلوله‌های خود را به یک تصویر، svg یا gif تبدیل کنید. همچنین می توانید از هر نوع رسانه یا حتی یک 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 برای پنهان کردن سبک های پیش فرض. سبک‌های پیش‌فرض از مرورگر می‌آیند، و اغلب می‌بینید که برگه‌های سبک بازنشانی می‌شوند که سبک‌های فهرست مانند padding و حاشیه‌ها را حذف می‌کنند. همچنین می‌توانید از این مختصر برای تنظیم سبک‌ها استفاده کنید، مانند list-style: square inside;

تا کنون، نمونه‌ها بر سبک‌دهی یک فهرست کامل و موارد فهرست متمرکز شده‌اند، اما در مورد رویکرد دقیق‌تر چطور؟

::marker

عنصر نشانگر list-item گلوله، خط فاصله یا عدد رومی است که به نشان دادن هر مورد در لیست شما کمک می کند.

اگر لیست را در DevTools بررسی کنید، می توانید یک عنصر ::marker برای هر یک از موارد لیست مشاهده کنید، علیرغم اینکه هیچ کدام در HTML اعلام نشده است. اگر ::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 استفاده کنید. این به شما امکان می دهد به جای استایل دهی بر اساس کل لیست، فقط نشانگر را انتخاب کنید.

سبک های نشانگر

اکنون که نشانگر را انتخاب کرده اید، بیایید به ویژگی های یک ظاهر طراحی شده در دسترس برای این انتخابگر نگاه کنیم. می‌توانید درباره گلوله‌های سفارشی با CSS ::marker در web.dev اطلاعات بیشتری کسب کنید.

تعداد کمی از CSS مجاز وجود دارد ::marker Properties:

• 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> ایجاد کنید.

درک خود را بررسی کنید

دانش خود را از لیست ها تست کنید

منابع

• راهنمای MDN در لیست های استایلینگ
• گلوله های سفارشی با CSS :: نشانگر
• Smashing Magazine: لیست های CSS، نشانگرها و شمارنده ها
• MDN با استفاده از شمارنده های CSS
• ماژول فهرست‌ها و شمارنده‌های CSS سطح 3
• ترفندهای CSS: شمارش با شمارنده های CSS و شبکه CSS