اکنون سفارشی کردن رنگ، اندازه یا نوع شماره یا گلوله هنگام استفاده از <ul>
یا <ol>
امری بی اهمیت است.
با تشکر از Igalia، که توسط بلومبرگ حمایت می شود، ما در نهایت می توانیم هک های خود را برای لیست های استایل حذف کنیم. دیدن!
به لطف CSS ::marker
می توانیم محتوا و برخی از سبک های گلوله ها و اعداد را تغییر دهیم.
سازگاری با مرورگر
::marker
در فایرفاکس برای دسکتاپ و اندروید، سافاری دسکتاپ و سافاری iOS پشتیبانی میشود (اما فقط ویژگیهای color
و font-*
، به اشکال 204163 مراجعه کنید)، و مرورگرهای دسکتاپ و اندروید مبتنی بر Chromium.
شبه عناصر
لیست نامرتب HTML ضروری زیر را در نظر بگیرید:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
که منجر به رندر غیر منتظره زیر می شود:
نقطه ابتدای هر آیتم <li>
رایگان است! مرورگر در حال طراحی و ایجاد یک کادر نشانگر تولید شده برای شما است.
امروز ما مشتاقیم در مورد شبه عنصر ::marker
صحبت کنیم، که توانایی استایل دادن به عنصر گلوله ای که مرورگرها برای شما ایجاد می کنند را می دهد.
ایجاد نشانگر
جعبه نشانگر شبه عنصر ::marker
به طور خودکار در داخل هر عنصر آیتم لیست، قبل از محتویات واقعی و ::before
شبه عنصر ایجاد می شود.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
به طور معمول، آیتم های لیست عناصر <li>
HTML هستند، اما عناصر دیگر نیز می توانند به آیتم های فهرست تبدیل شوند display: list-item
.
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
استایل دادن به یک نشانگر
تا زمانی که ::marker
، فهرستها را میتوان با استفاده از list-style-type
و list-style-image
برای تغییر نماد آیتم فهرست با 1 خط CSS استایل داد:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
این مفید است اما ما به موارد بیشتری نیاز داریم. در مورد تغییر رنگ، اندازه، فاصله و غیره چطور!؟ اینجاست که ::marker
به کمک می آید. این اجازه می دهد تا هدف گیری فردی و جهانی این شبه عناصر از CSS:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
ویژگی list-style-type
امکانات بسیار محدودی برای استایل می دهد. شبه عنصر ::marker
به این معنی است که شما می توانید خود نشانگر را هدف قرار دهید و سبک ها را مستقیماً روی آن اعمال کنید. این امکان کنترل بسیار بیشتری را فراهم می کند.
با این اوصاف، شما نمی توانید از هر ویژگی CSS در یک ::marker
استفاده کنید. لیستی از ویژگی های مجاز و غیر مجاز به وضوح در مشخصات نشان داده شده است. اگر چیز جالبی را با این شبه عنصر امتحان کردید و کار نکرد، لیست زیر راهنمای شما در مورد کارهایی که میتوان با CSS انجام داد و نمیتوان انجام داد است:
ویژگی های CSS مجاز ::marker
-
animation-*
-
transition-*
-
color
-
direction
-
font-*
-
content
-
unicode-bidi
-
white-space
تغییر محتویات یک ::marker
با content
بر خلاف list-style-type
انجام می شود. در این مثال بعدی، مورد اول با استفاده از list-style-type
و دومی با ::marker
استایل بندی شده است. ویژگیها در حالت اول برای کل آیتم فهرست اعمال میشوند، نه فقط نشانگر، به این معنی که متن و همچنین نشانگر متحرک است. هنگام استفاده از ::marker
می توانیم فقط کادر نشانگر را هدف قرار دهیم نه متن را.
همچنین، توجه داشته باشید که چگونه ویژگی background
غیر مجاز تاثیری ندارد.
li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
li:nth-child(2)::marker { content: '!'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
تغییر محتوای یک نشانگر
در اینجا برخی از روش هایی وجود دارد که می توانید به نشانگرهای خود سبک دهید.
تغییر همه موارد لیست
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
تغییر فقط یک مورد از فهرست
li:last-child::marker {
content: "😍";
}
تغییر یک مورد لیست به SVG
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
تغییر لیست های شماره گذاری شده در مورد <ol>
چه می شود؟ نشانگر در یک آیتم لیست مرتب شده یک عدد است و نه یک گلوله به طور پیش فرض. در CSS این ها شمارنده نامیده می شوند و بسیار قدرتمند هستند. آنها حتی دارای ویژگی هایی برای تنظیم و بازنشانی هستند که در آن شماره شروع و پایان می یابد، یا آنها را به اعداد رومی تغییر می دهند. آیا می توانیم آن را سبک کنیم؟ بله، و ما حتی می توانیم از مقدار محتوای نشانگر برای ساختن ارائه شماره گذاری خود استفاده کنیم.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
اشکال زدایی
Chrome DevTools آماده است تا به شما در بازرسی، اشکال زدایی و اصلاح سبک های اعمال شده در عناصر شبه ::marker
کمک کند.
یک ظاهر طراحی شبه عناصر آینده
می توانید اطلاعات بیشتری در مورد ::marker
از:
- لیست های CSS، نشانگرها و شمارنده ها از مجله Smashing
- شمارش با شمارنده های CSS و شبکه CSS از CSS-Tricks
- استفاده از شمارنده های CSS از MDN
بسیار خوب است که به چیزی دسترسی پیدا کنید که سبک دادن به آن سخت بوده است. شاید آرزو داشته باشید که بتوانید سایر عناصر تولید شده به صورت خودکار را استایل دهید. ممکن است از <details>
یا نشانگر تکمیل خودکار ورودی جستجو ناامید شده باشید، چیزهایی که در مرورگرها به یک شکل اجرا نمی شوند. یکی از راههای اشتراکگذاری آنچه نیاز دارید، ایجاد خواسته در https://webwewant.fyi است.