مختبئًا في أعماق مواصفات CSS ستجد عدادات CSS. كما يوحي الاسم ، يسمح لك ذلك بإحصاء شيء ما على صفحتك مع تضمين CSS القيمة في كل مرة يظهر فيها المستند.
يعد هذا مفيدًا بشكل أساسي إذا كان لديك موقع ويب تعليمي - سواء كان ذلك عن الطهي أو تطوير الويب - فكل ذلك لديه خطوات يجب اتباعها ، وعليك على الأرجح كتابة رقم الخطوة قبل المحتوى الفعلي. يمكن أن تساعد عدادات CSS عن طريق القيام بذلك تلقائيًا ، حتى يمكنك استخدامه لحساب عدد الصور على ملفك وإضافة أرقام شخصية قبل التسميات التوضيحية.
في هذا المثال ، سأوضح كيفية تحقيق ذلك عن طريق إنشاء وصفة بسيطة للفطائر وإجراء بحث CSS لبداية كل فقرة وإضافة رقم الخطوة قبلها.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
الهدف في HTML هذا هو أن كل فقرة هي خطوة مختلفة ومع CSS يمكننا إضافة تلك الفقرة ديناميكيا عن طريق كتابة ما لا يزيد عن 3 أسطر من الكود.
تستخدم عدادات CSS الزيادة المضادة في الخاصية . لقد كان موجودًا منذ فترة ، وتم تنفيذه فعليًا في CSS 2.1 ، لاستخدامه ، يجب أولاً إعادة تعيين القيمة الافتراضية للعداد إلى 0 قبل أن يظهر أي شيء نريد حسابه في الصفحة ، لذلك من الأفضل تعريف ذلك في أنماط الجسم ، مثل:
body {counter-reset: steps;}يعمل هذا السطر فقط على ضبط العداد إلى 0 كما أنه يطلق عليه اسمًا ، مما يسمح لنا بالاتصال به لاحقًا ويتيح لنا أيضًا الحصول على أكثر من عداد في الصفحة.
الخطوة التالية هي استخدام عنصر pseudo : قبل استهداف كل الفقرات وإضافة رقم الخطوة قبل بدء كل النص. للقيام بذلك ، نحتاج إلى استخدام زيادة مضادة ، ثم تحديد المحتوى. يمكننا فقط استخدام الرقم أو يمكننا إلحاق بعض النص أو الإحاطة به ، وفي هذه الحالة ، سنقوم بإضافة "الخطوة" قبل قيمة العداد ، مثل:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}يجب علينا أيضًا أن نجعل هذا المحتوى بارزًا قليلاً وأن نفعل ذلك ، وسنعطيه حجمًا أكبر من حجم الفقرات ونجعله جريئًا:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}إذا كنت ترغب في رؤية هذه الفكرة في العمل ، يمكنك أن ترى القلم الذي أنشأته.
هناك قلق دائم عند العمل مع CSS وهو دعم المستعرض ، ولكن نظرًا لأن هذا هو تطبيق CSS 2.1 ، فإن دعم المتصفح رائع: فهو مدعوم من جميع المتصفحات الرئيسية وسطح المكتب والجوال ، والمتصفح الهام الوحيد الذي لا يدعمه هو IE7 ، ووفقًا لقاعدة الإحصائيات الخاصة بي ، يتم استخدام IE7 بنسبة 0.61٪ فقط من الأشخاص لذا أعتقد أنه يمكننا القول أن IE7 ستغادر قريبًا. تعتمد أم لا تحتاج إلى دعم IE7 على إحصائيات الموقع الخاص بك.
عدادات CSS ليست شيئًا ستستخدمه في كل مشروع ، ولكنها شيء يجب عليك الاحتفاظ به في الجزء الخلفي من عقلك لأنه قد يكون مفيدًا في يوم من الأيام.
هل استخدمت عدّادات CSS في مشروع؟ ما هي الاستخدامات التي يمكنك رؤيتها لهم؟ اسمحوا لنا أن نعرف في التعليقات.