Ukryty w głębi specyfikacji CSS znajdziesz liczniki CSS. Jak sama nazwa wskazuje, pozwalają ci policzyć coś na twojej stronie dzięki CSS zwiększając wartość za każdym razem, gdy pojawi się on w dokumencie.
Jest to szczególnie użyteczne, jeśli masz stronę samouczka - czy to chodzi o gotowanie czy tworzenie stron internetowych - wszystkie mają kroki do naśladowania, a najprawdopodobniej będziesz musiał napisać numer kroku przed rzeczywistą treścią. Liczniki CSS mogą pomóc, robiąc to automatycznie, możesz nawet użyć go do policzenia obrazów w twoim pliku i dodać liczby figur przed napisami.
W tym przykładzie pokażę, jak to osiągnąć, tworząc prosty przepis na naleśniki i wykonując wyszukiwanie CSS na początku każdego akapitu i dodając numer poprzedzającego go kroku.
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.
Celem w tym kodzie HTML jest to, że każdy akapit jest innym krokiem, a dzięki CSS możemy je dodać dynamicznie, pisząc zaledwie 3 wiersze kodu.
Liczniki CSS używają przeciw-inkrementu właściwości . Już od jakiegoś czasu została zaimplementowana w CSS 2.1, aby go użyć, musimy najpierw zresetować domyślną wartość licznika na 0, zanim wszystko, co chcemy zliczyć, pojawi się na stronie, więc dobrze jest zdefiniować to w style ciała, takie jak:
body {counter-reset: steps;}Ta linia po prostu ustawia licznik z powrotem na 0, a także nadaje nazwę, umożliwiając nam późniejsze wywołanie, a także pozwala nam mieć więcej niż jeden licznik na stronie.
Następnym krokiem jest użycie pseudo elementu : wcześniej, aby kierować wszystkie akapity i dodać numer kroku przed rozpoczęciem całego tekstu. Aby to zrobić, musimy użyć przeciw-inkrementacji, a następnie określić zawartość. Możemy po prostu użyć numeru lub możemy dodać lub dodać trochę tekstu, w tym przypadku poprzedzimy wartość "Krok" przed wartością licznika, tak jak poniżej:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Powinniśmy również sprawić, aby ta treść nieco się wyróżniała i abyśmy to zrobili, damy mu większy rozmiar czcionki niż akapity i sprawimy, że będzie odważna:
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;}Jeśli chcesz zobaczyć ten pomysł w akcji, możesz zobaczyć pióro, które stworzyłem.
Ciągłą troską podczas pracy z CSS jest obsługa przeglądarki, ale ponieważ jest to implementacja CSS 2.1, obsługa przeglądarki jest świetna: jest obsługiwana przez wszystkie główne przeglądarki, komputery i urządzenia mobilne, jedyną znaczącą przeglądarką, która nie obsługuje tego jest IE7, i według mojego licznika statystyk IE7 jest używane przez zaledwie 0,61% ludzi, więc myślę, że możemy powiedzieć, że IE7 wkrótce wyruszy. To, czy potrzebujesz wsparcia dla IE7, zależy od statystyk twojej własnej strony.
Liczniki CSS nie są czymś, co użyjesz w każdym projekcie, ale jest to coś, o czym powinieneś pamiętać, bo któregoś dnia może się przydać.
Czy korzystałeś z liczników CSS w projekcie? Jakie zastosowania można dla nich zobaczyć? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, liczenie obrazu przez Shutterstock.