شمارش با css را یاد بگیرید
یاد گرفتن شمارش با csss مبحث جذابی است که با خواندن یک مقاله آموزشی مناسب میتوانید به راحتی به آن مسلط شوید. شمارنده های css با شمارش خودکارشان میتوانند بسیار مفید باشند، برای مثال زمانی که میخواهید تعدادی عکس پشت هم در صفحه ی خود به نمایش بگذارید و با شمارنده های css شماره ی هر عکس را قبل از آن اضافه میکنید.
در مثال زیر میخواهیم گام به گام شمارش را انجام دهیم، برای مثال ابتدا یک سری دستورات از ساخت پنکیک مینویسیم، سپس با استفاده از سرچ در css شروع هر پاراگراف را پیدا میکنیم و سپس عدد را قبل از آن اضافه میکنیم.
کد HTML
کد:
<section>
<p>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.</p>
<p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
<p>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.</p>
<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
<p>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.</p>
</section>
در این مثال هر پاراگراف یک مرحله از دستورات پخت پنکیک میباشد و هدف ما این است که مراحل پشت هم را به صورت داینامیک با استفاده از CSS شماره گذاری کنیم و تنها با 3 خط کد این کار را انجام میدهیم.کد CSS
شمارنده های CSS از خاصیت counter-increment استفاده میکنند، این خاصیت تقریبا در CSS 2.1 به وجود آمد، برای شروع باید ابتدا مقدار counter را به 0 تغییر دهیم و در واقع آن را رستارت کنیم، ما میخواهیم این شمارشگر را هنگام بالا آمدن صفحه به وجود بیاوریم پس بهتر است که آن را در تگ body تعریف کنیم.
کد:
body {
counter-reset: steps;
}
خط کد بالا مقدار 0 و یک نام به شمارشگر میدهد، دادن نام به شمارشگر باعث میشود در ادامه بتوانیم به راحتی آن را صدا بزنیم و حتی از چندین شمارشگر با نام های مختلف استفاده کنیم.
مرحله بعدی استفاده از :before که یک pseudo element میباشد است. با این کار تمام پاراگراف ها را میگیریم و شمارنده هایمان را به ابتدای آنها اضافه میکنیم. برای این کار باید ابتدا از counter-increment استفاده کنیم و سپس content را برای آن مشخص کنیم، میتوانیم تنها از اعداد استفاده کنیم یا حتی یک نوشته را append یا prepend کنیم. در این مثال متن “Step” را قبل از شمارنده prepend کردیم.
کد:
p:before {
counter-increment: steps;
content: "Step " counter(steps) ": ";
}
ما باید content ای که تعریف کردیم را کمی بزرگتر از بقیه متن ها جلوه دهیم، به همین منظور به آن فونت سایز بزرگتری میدهیم و همچنین آن را Bold میکنیم.
کد:
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 میباشد، طبق آمارهای اخیر تنها 0.61 درصد مردم جهان از IE7 استفاده میکنند و بعید است این افراد وارد سایت شما شوند، بنابراین میتوانید IE7 را در نظر نگیرید، البته بازهم بستگی به سایت شما و کاربرانتان دارد، اگر سایت بسیار بزرگ و جهانی دارید باید این احتمال ها را در نظر بگیرید.نتیجه گیری
لزومی ندارد در تمام پروژه های خود حتما از شمارنده های CSS استفاده کنید، اما آن را یاد بگیرید زیرا با حجم کمی از کد میتوانید نیازهای خود را برآورده کنید.
