Liczniki w CSS


21 maja 2013 / Michał Załęcki


Liczniki w CSS jak sama nazwa wskazuje są czymś w rodzaju zmiennych przechowywujących określoną wartość, liczbę. Są dosyć mało popularnym rozwiązaniem mimo iż pojawiły się już w specyfikacji CSS 2.1, CSS 3 tylko rozszerza je o nowe funkcjonalności. Wparcie przeglądarek jest wystarczające (94.93%) żeby używać liczników w wersjach produkcyjnych stron, bez zapewniania rozwiązania zastępczego.

Wyjątkiem jest IE7, który żeby tradycji stało się zadość, oczywiście ma z tym problemy. Zakończenie wspierania przez Microsoft Windowsa XP przyczyni się na pewno do spadku użytkowników IE7 przynajmniej w korporacjach, które zmuszone zostaną do zmiany systemów na nowsze, ale wracając do liczników…

Z licznikami możemy pracować za pomocą dwóch właściwości i jednej funkcji:

  • counter-increment – inkrementuje (zwiększa o 1) wartość licznika
  • counter-reset – resetuje licznik, ustawiając go na wartość 0
  • counter(licznik, [styl licznika]) – funkcja zwracająca licznik, drugi parametr jest opcjonalny i określa styl licznika, przyjmowane wartości są wspólne z list-style-type.

Użycie funkcji counter() wiąże się z zastosowaniem pseudoklasy :before lub :after.

W związku z tym, że najlepiej wiedzę nabywać praktycznie przygotowałem demo, z którym warto poeksperymentować, a pliki do pobrania znajdziecie na GitHub.

Zobacz DEMO Pobierz przykład z GitHub



12 odpowiedzi na “Liczniki w CSS”

  1. Piotr Nalepa pisze:

    Trochę mało rozbudowany ten wpis. Tu można przeczytać jego rozszerzenie:
    http://blog.piotrnalepa.pl/2011/12/29/css-niesamowicie-wygladajace-listy-numerowane/

  2. Łukasz pisze:

    IE7 nawet Google nie wspiera. Jest sens się nim zajmować?

    • Udział IE7 w rynku jest coraz mniejszy i tak jak napisał Michał – zakończenie wsparcia dla XP powinno jeszcze bardziej obniżyć tę wartość. Ja jestem tego zdania, że nie powinniśmy aż tak bardzo się cofać w walce ze zgodnością…

      • Mr.Mr pisze:

        Myślę, że IE7 można spokojnie porzucić w kontekście testów przeglądarkowych. W odniesieniu do tempa rozwoju technologii internetowych IE7 to jest po prostu baaardzo starą przeglądarką…

    • Nie :). W Chinach i innych ościennych im państwach IE7 jeszcze stanowi jakiś odsetek (ok. 15%), ale jeżeli nie planujemy kierowania strony do mieszkańców dalekiego wschodu IE7 może być tylko ciekawostką.

      Dodam, że wiele firm nie wspiera nawet IE8, gdyż mają lepsze zadania dla swojej kadry niż martwienie się, jak wyświetli się strona na znalezionym na strychu komputerze.

      • Piotr Nalepa pisze:

        dopóki na rynku będzie popularny Windows XP (już coraz mniej, ale jednak) to warto wspierać IE8 jeszcze przez jakiś czas. Istnieje pojęcie progressive enhancement i w tym kierunku warto pójść.

      • Nie jestem pewien czy warto jest fortunnym określeniem. Wiele usług pozostawiło wsparcie dla IE8 dlatego właśnie, ze nie opłacały im się nakłady związane z utrzymaniem IE8 względem przychodów. Nie mniej wsparcie dla IE8 jest czymś godnym wyróżnienia, ale nie powinno być czymś do czego dąży się za wszelką cenę dołączając tony bibliotek i skryptów. Jak jest taka możliwość ok, fajnie, ale jak potrzeba np. obsługi DRM to z IE8 się żegnamy. Już w ofertach pracy na różnych portalach pracodawcy „chwalą się”, że nie będzie trzeba wspierać przeglądarek starszych niż IE9 i myślę, że nie jest to fanaberia tylko chłodna kalkulacja. Przedstawiam realia, które stety, niestety, tak czy inaczej biorą górę nad „sztuką”. Tak czy inaczej wspieranie zacofanego oprogramowania nie należy do zajęć przyjemnych więc trzeba też okazać trochę zrozumienia :) Ponadto użytkownicy IE8 nie korzystają z wielu usług i utrzymanie tego by na IE8 działały jest bezsensowne. Strony użyteczności publicznej niech wspierają wszystkie czytniki, 12 letnie telefony i IE6. Nowoczesne usługi i bankowość… tylko jeżeli to się ma opłacać, pomijam już kwestię bezpieczeństwa korzystania z banku w IE8. Zastanawiam się ile procent użytkowników IE8 to webmasterzy sprawdzający czy strona działa na IE8 ;P

      • Piotr Nalepa pisze:

        tak jak piszesz, dopóki jest to opłacalne to IE8 jest wspierane. Niestety, ciągle jest to wystarczająco opłacalne dla dużych graczy na rynku internetowym

      • Mr.Mr pisze:

        http://ranking.pl/pl/rankings/web-browsers.html

        IE8 ma bardzo mały udział w rynku i z tego co się orientuję to głównie posługują się nim osoby pracujące w firmach, gdzie „ktoś kiedyś to zainstalował” i tak już zostało od iluś tam lat.

Pozostaw odpowiedź Michał Kortas Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *