CSS özelliklerinin derinliklerinde saklanan CSS sayaçlarını bulacaksınız. Adından da anlaşılacağı gibi, sayfanızdaki bir şeyi CSS'de belgede her görüntülendiğinde değeri artırarak saymanıza olanak tanır.
Bir öğretici web siteniz varsa (yemek pişirme veya web geliştirme ile ilgili olsun) hepsinin takip etmesi gereken adımlar varsa ve büyük olasılıkla gerçek içerikten önce adım numarasını yazmanız gerekiyorsa, bu yararlı olacaktır. CSS sayaçları otomatik olarak bunu yapmanıza yardımcı olabilir, hatta dosyalarınızdaki görüntüleri saymak ve altyazılardan önce şekil sayıları eklemek için kullanabilirsiniz.
Bu örnekte, pankekler için basit bir reçete oluşturarak ve her paragrafın başına CSS araması yaparak ve bundan önceki adım sayısını ekleyerek bunu nasıl gerçekleştireceğimi göstereceğim.
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.
Bu HTML'deki amaç, her paragrafın farklı bir adım olduğu ve CSS ile bunları 3 satırlık kod yazarak dinamik olarak ekleyebileceğimizdir.
CSS sayaçları özellik karşı artırma kullanır. CSS 2.1'de gerçekte uygulanmakta olan bir süredir etrafta olduğu için, önce sayacımızın üzerinde görünmesini istediğimiz bir şeyden önce sayacın varsayılan değerini 0'a sıfırlamalıyız, bu yüzden bunu tanımlamak iyi bir fikirdir. vücut stilleri, böyle:
body {counter-reset: steps;}Bu satır sadece sayacı 0'a döndürür ve aynı zamanda daha sonra onu aramamıza ve ayrıca sayfada birden fazla sayaca sahip olmamıza izin verir.
Bir sonraki adım sözde elemanı kullanmaktır : Tüm paragrafları hedeflemeden önce ve tüm metin başlamadan önce adım numarasını eklemeden önce. Bunu yapmak için karşı artışı kullanmalıyız , sonra içeriği belirtmeliyiz. Numarayı kullanabiliriz veya bazı metni ekleyebilir veya ekleyebiliriz, bu durumda sayacın değerinden önce “Adım” a başlarız.
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Ayrıca bu içeriği biraz öne çıkarmalıyız ve bunu yapmak için paragraflardan daha büyük bir font boyutu vermemiz ve onu kalınlaştırmamız gerekiyor:
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;}Bu fikri hareket halinde görmek istiyorsanız, görebilirsiniz yarattığım kalem.
CSS ile çalışırken sürekli bir sorun tarayıcı desteği, ancak bu bir CSS 2.1 uygulaması olduğundan tarayıcı desteği harika: tüm önemli tarayıcılar, masaüstü ve mobil cihazlar tarafından destekleniyor, desteklemeyen tek önemli tarayıcı IE7, ve bana göre, IE7, insanların% 0,61'i tarafından kullanılıyor, bu yüzden IE7'nin yakında ayrılacağını söyleyebiliriz. IE7'yi desteklemeniz gerekip gerekmediği kendi sitenizin istatistiklerine bağlıdır.
CSS sayaçları her projede kullanacağınız bir şey değil, zihninizin gerisinde kalmanız gereken bir şeydir çünkü bir gün kullanışlı olabilir.
Bir projede CSS sayaçlarını kullandınız mı? Onlar için ne gibi kullanımlar görebilirsin? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, görüntü saymak Shutterstock üzerinden.