تصویر نویسنده

۱۷ شهریور ۱۳۹۹

0

bullet های سفارشی با استفاده از شبه عنصر ::marker

آموزش

در حال حاضر سفارشی کردن رنگ، اندازه یا نوع شماره یا گلوله(Bullet) با استفاده از <ul> یا <ol> پیش پا افتاده است. به لطف شبه عنصر ::marker می توانیم محتوا و برخی استایل های گلوله ها و شماره ها را در لیست های نشانه دار تغییر دهیم و bullet های سفارشی ایجاد کنیم.

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

هنگام عرضه Chromium 86 قابلیت ::marker بر روی فایرفاکس دسکتاپ و اندروید، سافاری دسکتاپ و iOS، و مرورگر های بر پایه کروم دسکتاپ و اندروید پشتیبانی خواهد شد. برای اطلاعات بیشتر جدول پشتیبانی از مرورگر MDN را ببینید.

شبه عناصر

لیست 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 که قابلیت طراحی عنصر گلوله ای که مرورگر برایتان می سازد، با شما صحبت کنیم.

یک شبه عنصر، عنصری را غیر از آن ها که در درخت سند هستند در سند عرضه می کند. برای مثال، با شبه عنصر p::first-line می توانید خط اول یک پاراگراف را انتخاب کنید، در حالی که عنصر HTML ای برای انتخاب آن خط وجود ندارد.

ساخت یک نشانگر

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

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}
شبه عنصر before

به طور معمول آیتم های لیست، عناصر <li> هستند، اما عناصر دیگر نیز می توانند با 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;
}
تغییر تصویر bullet

استایل دهی نشانگر

قبل از ::marker، لیست ها با استفاده از list-style-type  و  list-style-image می توانستند طراحی شوند. با یک خط CSS نشانگر آیتم لیست عوض می شد:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}
تغییر bullet بدون استفاده از marrker

این روش کارآمد است اما ما به چیزی بیشتر از این نیاز داریم. پس تغییر رنگ، سایز، فاصله گذاری و غیره چه می شود؟! اینجاست که ::marker به کمک ما می آید. به ما اجازه می دهد تا این شبه عناصر CSS را به صورت تکی و کلی هدف قرار دهیم:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

See the Pen rNepYyN by pouya (@pouyavatani) on CodePen.


توجه: اگر لیست بالا گلوله های صورتی نداشته باشد، مرورگر شما از ::marker پشتیبانی نمی کند.

ویژگی list-style-type امکانات طراحی بسیار محدودی ارائه می دهد. با شبه عنصر ::marker می توانید هر نشانگر را به تنهایی مدنظر قرار دهید و آن را به صورت مستقیم طراحی کنید. این گونه آزادی عمل خیلی بیشتری خواهید داشت.

با این وجود، نمی توانید همه ویژگی های CSS را روی ::marker استفاده کنید. لیست ویژگی های مجاز و غیرمجاز در زیر آورده شده است. اگر چیز جالبی را روی این شبه عنصر پیاده کردید و جواب نداد، از لیست زیر به عنوان یک راهنما برای چیزهایی که می توانید با CSS انجام دهید، دیدن کنید:

ویژگی های مجاز CSS برای ::marker

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

تغییر محتوای یک ::marker بر خلاف list-style-type با استفاده از content انجام می شود. در مثال بعدی آیتم اول با استفاده از 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;
}

نتایج ادغام شده بین نشانگر و آیتم لیست:

See the Pen poypdLM by pouya (@pouyavatani) on CodePen.


در کرومیوم، white-space تنها برای نشانگر های جایگذاری شده در داخل عمل می کند. برای نشانگر های جایگذاری شده در خارج، تنظیم کننده طراحی همیشه white-space: pre را اجبار می کند تا فضا باقی بماند.

تغییر محتوای یک نشانگر

این هم چند راه برای طراحی کردن نشانگرهایتان:

تغییر همه آیتم های لیست

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

See the Pen BaKJmVq by pouya (@pouyavatani) on CodePen.

تغییر تنها یک آیتم

li:last-child::marker {
  content: "😍";
}

See the Pen mdPpqjL by pouya (@pouyavatani) on CodePen.

تغییر یک آیتم لیست به 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>");
}

See the Pen BaKJmOG by pouya (@pouyavatani) on CodePen.

تغییر لیست های شماره دار

پس <ol> چه می شود؟ نشانگر یک لیست مرتب به صورت پیش فرض عدد می باشد نه گلوله. در CSS به آن ها شمارنده (Counters) می گوییم، که بسیار قدرمتند هستند. ویژگی های برای تعیین و تغییر محل شروع و پایان اعداد، یا تغییر آن ها به اعداد رومی دارند. آیا می توانیم آن ها را طراحی کنیم؟ بله، و حتی می توانیم از ارزش محتوای نشانگر برای ساخت ارائه عددی خود استفاده کنیم.

li::marker {
  content: counter(list-item) "› "; 
  color: hotpink;
}
لیست شماره دار سفارشی

رفع باگ

Chrome DevTools برای کمک به شما در بررسی، رفع باگ و اصلاح طراحی های اعمال شده بر روی شبه عنصر ::marker آماده است.

Chrome DevTools

امیدواریم از این آموزش لذت برده باشید. شما می توانید تجربیات و نظرات خود را در مورد این آموزش با ما و از طریق بخش نظرات در میان بگذارید.

منبع : web.dev

۰ ۰ vote
Article Rating