תבליטים מותאמים אישית עם CSS ::סמן

עכשיו טריוויאלי להתאים אישית את הצבע, הגודל או הסוג של המספר או התבליט כשמשתמשים ב-<ul> או ב-<ol>.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

הודות ל-Igalia, בחסות Bloomberg, אנחנו יכולים סוף סוף להשתמש בסטיילינג של רשימות. תראו!

הצגת מקור

הודות ל-CSS ::marker אנחנו יכולים לשנות את התוכן וחלק מהסגנונות של התבליטים והמספרים.

תאימות דפדפן

::marker נתמך ב-Firefox למחשב וב-Android, ב-Safari למחשב וב-iOS Safari (אבל רק בנכסים color ו-font-* ניתן לעיין ב-Bug 204163) ובדפדפנים למחשב ו-Android המבוססים על 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 כדי לשנות את סמל הפריט ברשימה עם שורה אחת של 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 מוכן לעזור לך לבדוק, לנפות באגים ולשנות את הסגנונות שחלים על ::marker פסאודו רכיבים.

כלי הפיתוח נפתחים ומציגים סגנונות מסוכן המשתמש ומסגנונות המשתמש

עיצוב של פסאודו-אלמנטים עתידיים

אפשר לקבל מידע נוסף על ::marker ב:

זה נהדר לקבל גישה למשהו שקשה לנסח בסגנון. ייתכן שתרצו להשתמש בסגנון של רכיבים אחרים שנוצרו באופן אוטומטי. יכול להיות שתסכול מ-<details> או מאינדיקטור ההשלמה האוטומטית של קלט חיפוש, דברים שאינם מיושמים באופן זהה בדפדפנים שונים. אחת הדרכים לשתף את מה שאתם צריכים היא ליצור רצון בכתובת https://webwewant.fyi.