گلوله های سفارشی با CSS :: نشانگر

اکنون سفارشی کردن رنگ، اندازه یا نوع شماره یا گلوله هنگام استفاده از <ul> یا <ol> امری بی اهمیت است.

آدام آرگیل
اوریول بروفاو
Oriol Brufau
GitHub

با تشکر از Igalia، که توسط بلومبرگ حمایت می شود، ما در نهایت می توانیم هک های خود را برای لیست های استایل حذف کنیم. دیدن!

مشاهده منبع

به لطف CSS ::marker می توانیم محتوا و برخی از سبک های گلوله ها و اعداد را تغییر دهیم.

سازگاری با مرورگر

::marker در فایرفاکس برای دسکتاپ و اندروید، سافاری دسکتاپ و سافاری iOS پشتیبانی می‌شود (اما فقط ویژگی‌های color و font-* ، به اشکال 204163 مراجعه کنید)، و مرورگرهای دسکتاپ و اندروید مبتنی بر Chromium.

پشتیبانی مرورگر

  • 86
  • 86
  • 68
  • 11.1

منبع

شبه عناصر

لیست نامرتب 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 کمک کند.

DevTools باز می شود و استایل ها را از عامل کاربر و استایل های کاربر نشان می دهد

یک ظاهر طراحی شبه عناصر آینده

می توانید اطلاعات بیشتری در مورد ::marker از:

بسیار خوب است که به چیزی دسترسی پیدا کنید که سبک دادن به آن سخت بوده است. شاید آرزو داشته باشید که بتوانید سایر عناصر تولید شده به صورت خودکار را استایل دهید. ممکن است از <details> یا نشانگر تکمیل خودکار ورودی جستجو ناامید شده باشید، چیزهایی که در مرورگرها به یک شکل اجرا نمی شوند. یکی از راه‌های اشتراک‌گذاری آنچه نیاز دارید، ایجاد خواسته در https://webwewant.fyi است.