كل ما تحتاج لمعرفته حول الفجوة بعد علامة القائمة

كنت أقرأ "تصميم قائمة إبداعية" على مدونة Google web.dev ولاحظت شيئًا غريبًا في أحد أمثلة الأكواد في ::marker قسم من المقال. علامات القائمة المضمنة هي الرموز النقطية والأرقام الترتيبية والحروف. ال ::marker يتيح لنا العنصر الزائف تصميم هذه العلامات أو استبدالها بشخصية أو صورة مخصصة.

::marker { content: url('/marker.svg') ' ';
}

المثال الذي لفت انتباهي يستخدم رمز SVG كعلامة مخصصة لعناصر القائمة. ولكن هناك أيضًا حرف مسافة واحد (" ") في قيمة CSS بجوار ملف url() وظيفة. يبدو أن الغرض من هذه المساحة هو إدراج فجوة بعد العلامة المخصصة.

عندما رأيت هذا الرمز ، تساءلت على الفور عما إذا كانت هناك طريقة أفضل لإنشاء الفجوة. إلحاق مسافة بـ content يبدو وكأنه حل بديل أكثر من الحل الأمثل. يوفر CSS margin و padding والطرق القياسية الأخرى لإبعاد العناصر على الصفحة. ألا يمكن استخدام أي من هذه الخصائص في هذه الحالة؟

أولاً ، حاولت استبدال حرف المسافة بهامش مناسب:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

هذا لم ينجح. كما تبين، ::marker يدعم فقط أ مجموعة صغيرة من خصائص CSS المتعلقة بالنص في الغالب. على سبيل المثال ، يمكنك تغيير ملف font-size و color من العلامة ، وتحديد علامة مخصصة عن طريق الإعداد content إلى سلسلة أو عنوان URL ، كما هو موضح أعلاه. لكن ال margin و padding الخصائص غير معتمد، لذلك لا يكون لتعيينها أي تأثير. يالها من خيبة أمل.

هل يمكن حقًا أن يكون حرف المسافة هو الطريقة الوحيدة لإدراج فجوة بعد علامة مخصصة؟ كنت بحاجة لمعرفة ذلك. أثناء بحثي في ​​هذا الموضوع ، قمت ببعض الاكتشافات المثيرة للاهتمام التي أود مشاركتها في هذه المقالة.

إضافة المساحة المتروكة والهوامش

أولاً ، دعنا نؤكد ماذا margin و padding القيام به على <ul> و <li> عناصر. لقد قمت بإنشاء صفحة اختبار لهذا الغرض. اسحب أشرطة التمرير ذات الصلة ولاحظ التأثير على التباعد على كل جانب من علامة القائمة. نصيحة: استخدم زر إعادة التعيين بشكل متحرّر لإعادة تعيين جميع عناصر التحكم إلى قيمها الأولية.

ملحوظة: يتم تطبيق المستعرضات افتراضيًا padding-inline-left of 40px إلى <ol> و <ul> عناصر. المنطق padding-inline-left الخاصية تعادل المادية padding-left خاصية في أنظمة الكتابة مع اتجاه مضمّن من اليسار إلى اليمين. في هذه المقالة ، سأستخدم الخصائص الفيزيائية من أجل البساطة.

كما ترون، padding-left on <li> يزيد الفجوة بعد علامة القائمة. تتحكم الخصائص الثلاث الأخرى في التباعد الموجود على يسار العلامة ، وبعبارة أخرى ، المسافة البادئة لعنصر القائمة.

لاحظ أنه حتى عندما تكون عناصر القائمة padding-left is 0px، لا يزال هناك حد أدنى للفجوة بعد العلامة. لا يمكن تقليص هذه الفجوة مع margin or padding. يعتمد الطول الدقيق للفجوة الأدنى على المتصفح.

للتلخيص ، يتم وضع محتوى عنصر القائمة على مسافة دنيا خاصة بالمستعرض من العلامة ، ويمكن زيادة هذه الفجوة عن طريق إضافة padding-left إلى <li>.

بعد ذلك ، دعنا نرى ما يحدث عندما نضع العلامة في الداخل عنصر القائمة.

تحريك العلامة داخل عنصر القائمة

• list-style-position تقبل الخاصية كلمتين رئيسيتين: outside، وهو الإعداد الافتراضي ، و inside، الذي يحرك العلامة داخل عنصر القائمة. الأخير مفيد لإنشاء تصميمات باستخدام عناصر قائمة كاملة العرض.

إذا كانت العلامة الآن في الداخل عنصر القائمة ، هل هذا يعني ذلك padding-left on <li> لم يعد يزيد الفجوة بعد العلامة؟ هيا نكتشف. في صفحة الاختبار الخاصة بي ، قم بتشغيل list-style-position: inside عبر مربع الاختيار. كيف حال الأربعة padding و margin الخصائص التي تأثرت بهذا التغيير؟

كما ترون، padding-left on <li> الآن يزيد التباعد إلى اليسار من العلامة. هذا يعني أننا فقدنا القدرة على زيادة الفجوة بعد العلامة. في هذه الحالة ، قد يكون من المفيد أن تكون قادرًا على إضافة margin-right إلى ::marker نفسها ، لكن هذا لا يعمل ، كما ذكرنا أعلاه.

بالإضافة إلى ذلك ، هناك ملف علة في الكروم الذي يتسبب في حدوث فجوة بعد العلامة إلى ثلاثي بعد التبديل إلى inside التمركز. بشكل افتراضي ، يبلغ طول الفجوة حوالي ثلث حجم النص. لذلك بشكل افتراضي font-size of 16px، الفجوة حول 5.5px. بعد التبديل إلى inside، الفجوة تكبر إلى أقصى حد 16px في Chrome. هذا الخطأ يؤثر على disc, circleو square علامات ، ولكن ليست علامات عدد ترتيبية.

تُظهر الصورة التالية العرض الافتراضي لعلامات القائمة الخارجية والداخلية عبر ثلاثة متصفحات رئيسية على macOS. من أجل راحتك ، قمت بمحاذاة جميع عناصر القائمة على علاماتها أفقيًا لتسهيل مقارنة الاختلافات في أحجام الفجوات.

لتلخيص ، التحول إلى list-style-position: inside يقدم مشكلتين. لم يعد بإمكاننا زيادة الفجوة عبر padding-left on <li>، وحجم الفجوة غير متسق بين المتصفحات.

أخيرًا ، دعنا نرى ما يحدث عندما نستبدل علامة القائمة الافتراضية بعلامة مخصصة.

التحول إلى علامة مخصصة

هناك طريقتان لتعريف ملف علامة مخصصة:

• list-style-type و list-style-image HAS
• content الملكية على ::marker عنصر زائف

• content الملكية أقوى. على سبيل المثال ، يسمح لنا باستخدام counter() وظيفة للوصول إلى الرقم الترتيبي لعنصر القائمة (ملف ضمني list-item مواجهة) وتزيينها بسلاسل مخصصة.

لسوء الحظ ، لا يدعم Safari برنامج content الملكية على ::marker بعد (خطأ WebKit). لهذا السبب ، سأستخدم ملف list-style-type خاصية لتعريف العلامة المخصصة. لا يزال بإمكانك استخدام ملف ::marker المحدد لأسلوب العلامة المخصصة المعلنة عبر list-style-type. هذا الجانب من ::marker مدعوم في Safari.

من المحتمل أن يكون أي حرف Unicode بمثابة علامة قائمة مخصصة ، ولكن مجموعة صغيرة فقط من الأحرف لديها بالفعل "Bullet" في اسمها الرسمي ، لذلك اعتقدت أنني سأجمعها هنا للرجوع إليها.

حرف	الاسم	نقطة الرمز	الكلمة الأساسية CSS
•	رصاصة	U+2022	disc
‣	رصاصة مثلثة	U+2023
⁃	واصلة نقطية	U+2043
⁌	رصاصة يسار سوداء	U+204C
⁍	رصاصة يمين سوداء	U+204D
◘	رصاصة معكوسة	U+25D8
◦	رصاصة بيضاء	U+25E6	circle
☙	رصاصة قلب الأزهار معكوسة مستديرة	U+2619
❥	رصاصة قلب أسود ثقيل استدارة	U+2765
❧	استدارة رصاصة قلب الأزهار	U+2767
⦾	رصاصة بيضاء محاطة بدائرة	U+29BE
⦿	رصاصة محاطة بدائرة	U+29BF

ملحوظة: CSS square لا تحتوي الكلمة الرئيسية على حرف "نقطي" مقابل في Unicode. الشخصية الأقرب هي رمز تعبيري Black Small Square (▪️) (U+25AA).

لنرى الآن ما يحدث عندما نستبدل علامة القائمة الافتراضية بـ list-style-type: "•" (U+2022 رصاصة). هذا هو نفس الحرف مثل الرمز النقطي الافتراضي ، لذلك لا ينبغي أن يكون هناك أي اختلافات رئيسية في العرض. في صفحة الاختبار الخاصة بي ، قم بتشغيل list-style-type الخيار ومراقبة أي تغييرات على العلامة.

كما ترى ، هناك نوعان من التغييرات المهمة:

1. لم يعد هناك حد أدنى للفجوة بعد العلامة.
2. أصبحت الرصاصة أصغر ، كما لو كانت أصغر font-size.

وفقًا أنماط العداد CSS المستوى 3، محدد القائمة الافتراضي (disc) يجب أن يكون "مشابهًا لـ • U+2022 رصاصة". يبدو أن المتصفحات تزيد من حجم الرمز النقطي الافتراضي لجعله أكثر وضوحًا. يستخدم Firefox أيضًا خطًا خاصًا ، -moz-bullet-fontللعلامة.

هل يمكن حل مشكلة الحجم الصغير باستخدام CSS؟ في صفحة الاختبار الخاصة بي ، قم بتشغيل نمط العلامة ولاحظ ما يحدث عند تغيير ملف font-size, line-heightو font-family من العلامة.

كما ترى ، فإن زيادة font-size يتسبب في انحراف العلامة المخصصة عموديًا ، ولا يمكن تصحيح ذلك عن طريق إنقاص line-height. vertical-align الخاصية ، التي يمكنها حل هذه المشكلة بسهولة ، غير مدعومة على ::marker.

لكن هل لاحظت أن تغيير font-family يمكن أن تتسبب في أن تصبح العلامة أكبر؟ حاول ضبطه على Tahoma. قد يكون هذا حلاً جيدًا بما فيه الكفاية لمشكلة الحجم الصغير ، على الرغم من أنني لم أختبر الخط الذي يعمل بشكل أفضل عبر المتصفحات وأنظمة التشغيل الرئيسية.

ربما لاحظت أيضًا أن خطأ Chromium لم يعد يحدث عند وضع العلامة داخل عنصر القائمة. هذا يعني أن العلامة المخصصة يمكن أن تعمل كحل بديل لهذا الخطأ. وهذا يقودني إلى المشكلة الرئيسية ، وسبب بدء البحث في هذا الموضوع. إذا قمت بتعريف علامة مخصصة ووضعتها داخل عنصر القائمة ، فلا توجد فجوة بعد العلامة ولا توجد طريقة لإدراج فجوة بالوسائل القياسية.

1. لا يوجد حد أدنى للفجوة بعد العلامات المخصصة.
2. ::marker لا يدعم padding or margin.
3. padding-left on <li> لا تزيد الفجوة ، لأن العلامة موضوعة inside.

نبذة عامة

فيما يلي ملخص لجميع الحقائق الأساسية التي ذكرتها في المقالة:

1. يتم تطبيق المستعرضات افتراضيًا padding-inline-start of 40px إلى <ul> و <ol> العناصر.
2. يوجد حد أدنى للفجوة بعد علامات القائمة المضمنة (disc, decimal، إلخ.). لا يوجد حد أدنى للفجوة بعد العلامات المخصصة (سلسلة أو عنوان URL).
3. يمكن زيادة طول الفجوة بإضافة أ padding-left إلى <ul>، ولكن فقط إذا تم وضع العلامة خارج عنصر القائمة (الوضع الافتراضي).
4. علامات السلسلة المخصصة لها حجم افتراضي أصغر من المحددات المضمنة. تغيير font-family on ::marker يمكن أن تزيد من حجمها.

وفي الختام

بالنظر إلى مثال الكود من بداية المقالة ، أعتقد أنني أفهم الآن سبب وجود حرف مسافة في content قيمة. لا توجد طريقة أفضل لإدخال فجوة بعد علامة SVG. إنه حل بديل مطلوب نظرًا لعدم وجود قدر من margin و padding يمكن إنشاء فجوة بعد علامة مخصصة يتم وضعها داخل عنصر القائمة. أ margin-right on ::marker يمكن أن يفعل ذلك بسهولة ، ولكن هذا غير مدعوم.

حتى ::marker يضيف دعمًا لمزيد من الخصائص ، لن يكون لدى مطوري الويب في كثير من الأحيان خيار سوى إخفاء العلامة ومحاكاتها بامتداد ::before عنصر زائف. اضطررت إلى القيام بذلك بنفسي مؤخرًا لأنني لم أستطع تغيير العلامة background-color. نأمل ألا نضطر إلى الانتظار طويلاً للحصول على أقوى ::marker عنصر زائف.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/