رموز نقطية مخصصة باستخدام CSS ::marker

أصبح من السهل الآن تخصيص اللون أو الحجم أو نوع الرقم أو التعداد النقطي عند استخدام <ul> أو <ol>.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

بفضل "إيغاليا"، برعاية 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;
}

تكون عناصر القائمة عادةً عبارة عن عناصر HTML <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;
}

تصميم علامة

حتى ::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:

خصائص ::marker المسموح بها في CSS

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