آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 16) : Counter یا شمارنده - قسمت 1

ساخت وبلاگ
0 99 ۲۴ اسفند ۹۵

css3 attributes

در این قسمت و قسمت بعدی در مورد شمارنده ها یا Counter صحبت خواهیم کرد. با استفاده از این ویژگی میتونیم شمارنده رو برای المنتهای مختلف با استفاده از CSS خالص قرار بدیم. برای این موضوع ما از این لینکبه عنوان منبع استفاده میکنیم.

همونطور که میدونین نمایش دادن اطلاعات بصورت مناسب یک مزیت عالی محسوب میشه. یکی از روشهای نمایش دادن اطلاعات اینه که اونا رو بصورت سلسله مراتبی و پشت سر هم قرار بدیم و به کاربران بفهمونیم که کدام مورد اول هست.

یک راه برای نمایش دادن سلسله مراتبی بودن اطلاعات، اینه که برای اونا شماره قرار بدیم. بجز Ordered list در HTML دیگه هیچ المنت دیگه ای وجود نداره که با استفاده از CSS بتونیم شماره اون رو افزایش بدیم. اگر ما بخوایم چنین کاری رو انجام بدیم باید از Preprocessor ها استفاده کنیم و اعداد رو در خروجی به وجود بیاریم. مثلا میتونیم با استفاده از PHP چنین کاری رو انجام بدیم:

میبینید که در بالا یک حلقه for قرار داده شده و به ازای تعداد پستها، حلقه اجرا خواهد شد. در هر بار تکرار حلقه شماره اون چاپ میشه و بعد از اون با استفاده از ++ یکی به i اضافه میشه. این کد برای نمونه هست.

اشاره به این کد مفید هست و به شما دید میده ولی باید در نظر بگیرید که این کد محدودیتهایی رو داره. اگه بخوایم بجای اعداد از حروف الفبایی یا اعداد لاتین یا کاراکترهای یونانی و ... استفاده کنیم چی؟ پیاده سازی هر کدام از موارد گفته شده نیازمند استفاده از کتابخانه های خاص خود هست. پس باید یه فکر دیگه بکنیم.

اینجا هست که شمارنده ها در CSS خودشون رو نشون میدن و میتونیم با استفاده از اونا بدون استفاده از هیچ پیش نیاز دیگه ای، کارهای مورد نظرمون رو انجام بدیم.

پشتیبانی مرورگرها از این ویژگی خیلی خوب هست و تقریبا همه مرورگرهای فعلی از اون پشتیبانی میکنن.css counter

حتی میتونین از شمارنده ها در Internet Explorer 8 با خیال راحت استفاده کنید.

Counter-reset و Counter-increment

قبل از اینکه شروع به شمارش با استفاده از CSS کنیم، شما باید بدونین که شمارش شامل موارد زیر میشه:

  • reset : جایی هست که ما شمارندمون رو ریست میکنیم و یا به حالت اولیه برمی گردونیم و یا به شمارندمون یک مقدار اولیه میدیم. با اینکار به المنت مورد نظر یک counter با نام مشخص رو نسبت میدیم که میتونیم با استفاده از increment اون رو زیاد کنیم
  • increment : با استفاده از این مورد هم شمارنده رو با استفاده از نام اون زیاد میکنیم

در جلسه بعد از ابتدا و بصورت مرحله به مرحله کدنویسی رو شروع میکنیم و شما رو با حالتهای مختلف اون آشنا میکنیم.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 362 تاريخ : جمعه 27 اسفند 1395 ساعت: 21:11

خبرنامه