قوائم CSS ، وعلامات ، وعدادات

تحتوي القوائم في CSS على خصائص معينة تمنحنا نمط القائمة القياسي الذي نتوقعه. تحصل القائمة غير المرتبة على تعداد نقطي للقائمة ، من نوع disc ، ويتم ترقيم القوائم المرتبة. جاء اهتمامي باستكشاف القوائم بمزيد من التفصيل من بعض الأعمال التي قمت بها لتوثيق العنصر الزائف ::marker لـ MDN. يتم شحن هذا العنصر الزائف في Firefox 68 ويتم إصداره اليوم . باستخدام عنصر ::marker pseudo المتاح لنا ، يمكننا البدء في القيام ببعض الأشياء المثيرة للاهتمام باستخدام القوائم ، وفي هذه المقالة ، سأشرح أكثر.

تفكيك قائمة

ربما لم تفكر كثيرًا في القوائم ، على الرغم من أننا نستخدمها كثيرًا في الترميز الخاص بنا. يمكن ترميز العديد من الأشياء بشكل منطقي كقائمة. بينما يمكن وصف الإرشادات خطوة بخطوة أو العناصر المرتبة بشكل طبيعي من خلال قائمة مرتبة <ol> ، يمكن وصف العديد من الأشياء في التصميم باستخدام قائمة غير مرتبة <ul> . من الاستخدامات الشائعة جدًا للعنصر ، على سبيل المثال ، ترميز التنقل ، حيث إنها قائمة بالوجهات على الموقع. لاستكشافنا ، لنبدأ باكتشاف بالضبط ما هي القائمة في CSS.

كما هو الحال مع العديد من الأشياء في CSS ، فإن القوائم لها بعض القيم الأولية المطبقة عليها. هذه القيم تجعلها تبدو وكأنها قائمة. تبدأ هذه القيم الخاصة بالمعلومات التي تشير إلى أن عنصر القائمة له خاصية display بقيمة list-item . يؤدي هذا إلى إنشاء مربع على مستوى الكتلة ، مع مربع علامة إضافي. مربع العلامة هو المكان الذي يتم فيه إضافة التعداد النقطي أو الرقم.

تم تعريف القوائم في وقت مبكر في CSS ، والكثير من تعريف القوائم كما نستخدمها اليوم مأخوذ من CSS2. تصف مواصفات CSS2 عنصر قائمة على النحو التالي:

"عنصر مع display: list-item مربع كتلة رئيسي لمحتوى العنصر ، واعتمادًا على قيم list-style-type list-style-image ، يمكن أيضًا أن يكون مربع علامة كمؤشر مرئي على أن العنصر عنصر قائمة ".

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

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none
• inherit

تحدد مواصفات العرض من المستوى 3 العرض display: list-item مع القيم الأخرى الممكنة لخاصية display . يشير إلى CSS 2.1 - كما هو الحال مع العديد من خصائص وقيم CSS التي تأتي من CSS2 - لكنه يصف الكلمة الأساسية list-item أنها "تسبب للعنصر في إنشاء ::marker ".

تقدم مواصفات المستوى 3 أيضًا القدرة على إنشاء عنصر قائمة مضمنة مع عرض بناء جملة القيمة الذي يتم استخدامه display: inline list-item . هذا لم تنفذ حتى الآن من قبل المتصفحات.

إنشاء مربعات علامات على عناصر ليست بالقائمة

كما هو الحال مع قيم display الأخرى ، من الصحيح تمامًا إعطاء أي عنصر HTML نوع عرض لعنصر list-item (إذا كنت ترغب في إنشاء عنصر زائف ::marker على العنصر). لن يتسبب هذا في أن يصبح العنصر عنصر قائمة من الناحية الدلالية ، ولكن بدلاً من ذلك سيتم عرضه بشكل مرئي فقط كعنصر قائمة ، وبالتالي يكون قادرًا على الحصول على ::marker . عندما نناقش العنصر الزائف ::marker أدناه ، سوف تكتشف بعض الحالات التي يتم فيها display: list-item مفيدًا.

تسرد CSS مواصفات المستوى 3: ::marker And counters

توسع مواصفات display وتوضح تعريف القوائم التي نجدها في CSS2 ، ومع ذلك ، هناك أيضًا مواصفات تحدد سلوك القائمة بالتفصيل: مستوى مواصفات قوائم CSS 3. نظرًا لتعريف السلوك الأساسي لعناصر القائمة في display ، فإن هذا توضح المواصفات تفاصيل مربع العلامة الذي تم إنشاؤه عند display: list-item مع العدادات التي يتم استخدامها بشكل افتراضي عندما تقوم بإنشاء قائمة مرتبة. هناك بعض الوظائف التي يحتمل أن تكون مفيدة يمكن الوصول إليها عبر هذه الميزات.

::marker العنصر الزائف

يسمح لك العنصر الزائف ::marker باستهداف علامة القائمة - بشكل منفصل عن محتوى عنصر القائمة. لم يكن هذا ممكنًا في الإصدارات السابقة من CSS ، لذلك ، إذا قمت بتغيير لون أو حجم الخط في ul أو li ، فسيؤدي ذلك أيضًا إلى تغيير لون العلامات وحجم الخط. من أجل القيام بشيء يبدو بسيطًا مثل وجود تعداد نقطي لقائمة ألوان مختلفة عن النص ، قد يتضمن إما التفاف محتوى عنصر القائمة في فترة (أو استخدام صورة للعلامة).

 ul { color: #00b7a8; } ul span { color #333; }

باستخدام عنصر ::marker pseudo ، فإن أبسط شيء قد ترغب في تجربته هو وجود رمز نقطي مختلف إلى لون النص ، مما يعني أنه بدلاً من الرمز الموجود في المثال أعلاه ، يمكنك استخدام:

 ul { color: #333; } ul ::marker { color: #00b7a8; }

قد ترغب أيضًا في استخدام حجم مختلف font-family للترقيم في قائمة مرتبة.

 ol ::marker { font-size: 200%; color: #00b7a8; font-family: "Comic Sans MS", cursive, sans-serif; }

يمكنك رؤية كل هذه في متصفح داعم باستخدام مثال CodePen الخاص بي:

يمكنك استخدام ::marker pseudo-element على العناصر غير الموجودة في القائمة. في الكود أدناه ، قمت بتعيين عنوان display: list-item . هذا يعطيها رصاصة وبالتالي مربع ::marker للهدف.

لقد غيرت الرمز النقطي لاستخدام رمز تعبيري:

 h1 { display: list-item; } h1::marker { content: ""; } 

في المثال أعلاه ، لقد استخدمت المحتوى الذي تم إنشاؤه في قواعد العلامة. تتوفر فقط مجموعة فرعية صغيرة من خصائص CSS للاستخدام على ::marker . يتضمن ذلك خصائص الخط ولونه ، ومع ذلك ، فإنها تشمل أيضًا خاصية content ، لتضمين المحتوى الذي تم إنشاؤه.

تعد إضافة content كخاصية مسموح بها لـ ::marker حديثة ، ومع ذلك ، يتم تضمينها في تطبيق Firefox. يعني التضمين أنه يمكنك القيام بأشياء مثل تضمين سلسلة نصية في ::marker . كما أنه يزيد من احتمالات تنسيق العلامات عند دمج استخدام العدادات مع ::marker .

دعم المتصفح والاحتياطات

بالنسبة للمتصفحات التي لا تدعم ::marker pseudo-element ، فإن الرجوع هو العلامة العادية التي كان من الممكن عرضها على أي حال. لسوء الحظ ، لا يمكننا حاليًا استخدام استعلامات الميزات لاكتشاف دعم المحددات مثل هذا العنصر الزائف في الوقت الحالي ، على الرغم من وجود مشكلة أثيرت حول إضافة هذا إلى المواصفات. هذا يعني أنه لا يمكنك تفكيك الكود الخاص بك للقيام بشيء واحد عندما يكون لديك دعم وشيء آخر إذا لم يكن لديك دعم. في معظم الحالات ، سيكون الرجوع إلى العلامة العادية حلاً معقولاً.

عدادات

تحتوي القوائم المرتبة على قائمة الترقيم - وهو أمر يتم تحقيقه عن طريق عداد CSS. لذلك تصف مواصفات قوائم CSS أيضًا هذه العدادات. يمكننا الوصول إلى العدادات وإنشائها بأنفسنا ، والتي يمكن أن توفر لنا ، جنبًا إلى جنب مع العنصر الزائف ::marker ، بعض الوظائف المفيدة. يمكن أيضًا استخدام هذه العدادات في المحتوى الذي تم إنشاؤه بشكل منتظم (غير ::marker ).

إذا كانت لدي قائمة مرقمة من الخطوات (وأود أن أكتب "الخطوة 1" و "الخطوة 2" وما إلى ذلك) ، فيمكنني القيام بذلك باستخدام المحتوى الذي تم إنشاؤه في محدد الموقع وإلحاق عداد list-item ، هذا يمثل العداد المدمج:

 ::marker { content: "Step " counter(list-item) ": "; } 

عدادات متداخلة

إذا كانت لديك قوائم متداخلة ، فإن الطريقة الشائعة لترقيمها هي جعل عنصر المستوى الأعلى رقمًا صحيحًا ، (1) ، ثم العناصر الفرعية مثل (1.1 ، 1.2) وأبنائهم (1.1.1 ، 1.1.2) ، وما إلى ذلك وهلم جرا. يمكنك تحقيق ذلك باستخدام المزيد من وظائف العدادات.

عندما تقوم بتداخل قوائم HTML ، فسوف ينتهي بك الأمر بعدة عدادات تحمل نفس الاسم - متداخلة داخل بعضها البعض. يمكن الوصول إلى عش العدادات باستخدام وظيفة counters() .

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

 ::marker { content: counters(list-item,'.') ':'; color: #00b7a8; font-weight: bold; }

هذا يعطيني الإخراج كما في الصورة. إذا كنت تستخدم متصفحًا يدعم ::marker and counters ، فيمكنك رؤيته يعمل في مثال CodePen - حاول تغيير السلسلة من a . إلى شيء آخر لمعرفة كيف يغير ذلك الإخراج.

ما هو الفرق بين counter() counters() ؟

وظيفة counter() التي استخدمناها في المثال الأول لكتابة خطواتنا تستخدم العداد الأعمق فقط. لذلك ، في حالة وجود مجموعة من القوائم المتداخلة ، ستكتب العداد المرتبط بالمستوى الذي تتواجد فيه حاليًا.

تقوم وظيفة counters() بشكل أساسي بكتابة هذا الفرع بالكامل وتمنحك الفرصة لسلسلة سلسلة بين العدادات في الفرع. لذلك إذا كان لديك عنصر قائمة مع عداد 2 (وهو جزء من قائمة متداخلة داخل عنصر قائمة مع عداد 4 ) ، فإن الفرع يحتوي على:

• 4
• 2

يمكنك إخراج هذا كـ 4.2 في العلامة باستخدام:

 ::marker { content: counters(list-item,'.'); }

عدادات على عناصر أخرى

يمكن استخدام العدادات في الأشياء التي ليست قوائم - إما لإخراج علامة - وفي هذه الحالة سيحتاج العنصر إلى display: list-item - أو لإخراج محتوى تم إنشاؤه بشكل منتظم. تُستخدم العدادات على نطاق واسع في إنتاج الكتب ، من أجل تمكين أشياء أخرى من ترقيم الفصل والرقم. لا يوجد سبب لعدم اتباع نهج مماثل على الويب ، خاصة بالنسبة للمقالات الطويلة.

خصائص CSS المحددة في مواصفات قوائم CSS التي تتعامل مع هذه العدادات هي:

• counter-set
• counter-reset
• counter-increment

لمعرفة كيفية عمل هذه العناصر خارج القوائم ، يمكننا إلقاء نظرة على مثال لاستخدام العدادات لترقيم العناوين في المستند.

أول شيء علي فعله هو إنشاء عداد للرؤوس على عنصر الجسم - جاهز للاستخدام. أنا أستخدم خاصية counter-reset للقيام بذلك. خصائص counter-reset counter-set ومجموعة العداد متشابهة جدًا. ستنشئ خاصية counter-reset جديدًا إذا لم يكن عداد بالاسم المحدد موجودًا بالفعل ، ولكنها ستنشئ أيضًا عدادات متداخلة كما هو موضح أعلاه في حالة وجود عداد بهذا الاسم. ستنشئ خاصية counter-set العداد عدادًا جديدًا فقط إذا لم يكن هناك عداد بهذا الاسم. لهذا ، فإن استخدام أي من الخاصيتين سيعمل بشكل جيد ، ومع ذلك ، لا تتمتع counter-set counter-reset ، لذلك أنا أسلك المسار العملي:

 body { counter-reset: heading-counter; }

الآن بعد أن أصبح لدي عداد ، يمكنني بعد ذلك استخدام خاصية counter-increment العكسية في محدد الرؤوس ؛ يجب أن يؤدي هذا إلى زيادة العداد في كل مرة يتطابق فيها المحدد.

 h2 { counter-increment: heading-counter; }

لمعرفة القيمة ، أحتاج إلى إخراجها إلى المستند. يمكنني القيام بذلك عن طريق استخدام المحتوى الذي تم إنشاؤه وإضافته before العنوان كما هو موضح في مثال CodePen التالي:

 h2::before { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

بدلاً من ذلك ، يمكنني تحويل عنصر h2 إلى عنصر list-item ثم استخدام ::marker ، كما هو موضح أدناه. كما هو مفصل بالفعل ، فإن استخدام عنصر ::marker لديه دعم محدود للمتصفح. في Firefox ، يجب أن ترى العداد المستخدم كعلامة للعنوان ، بينما ستعرض المتصفحات الأخرى الرمز النقطي الافتراضي.

 h2 { display: list-item; } h2::marker { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

عدادات على عناصر النموذج

هناك أيضًا القليل من التفاعل الذي يمكنك تحقيقه باستخدام عدادات CSS - وهو شيء قد تعتقد أنك بحاجة إلى JavaScript للقيام به.

لدي نموذج يحتوي على عدد من الحقول المطلوبة. يمكن تحديد الحالة المطلوبة في CSS مع :required ، ويمكن الكشف عن حقيقة أن الحقل لم يكتمل عن طريق :invalid . هذا يعني أنه يمكننا التحقق من الحقول المطلوبة وغير الصالحة ، وزيادة العداد. ثم إخراج ذلك كمحتوى تم إنشاؤه.

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

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

اكتشف المزيد

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

• ::marker
• counter-set
• counter-reset
• counter-increment
• "استخدام عدادات CSS" ، مستندات الويب MDN
• "العد باستخدام عدادات CSS وشبكة CSS" ، حيل CSS