HTML5 & CSS3

Liczniki w CSS

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.

figcaption:before{
    content: "Zdj. " counter(figures) ". ";
}

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

komentarzy 12

  • Awatar
    Piotr Nalepa

    21 maja 2013 09:50

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

    Odpowiedz
    • Awatar
      Michał Kortas

      21 maja 2013 09:51

      Dzięki za link, Piotrek, na pewno się przyda :)

      Odpowiedz
    • Awatar
      Michał Załęcki

      21 maja 2013 16:43

      Na pewno, to taki „quick tip”. Chodziło mi wyłącznie o liczniki i myślę, że po zagłębieniu się w kod z przykładów nikt nie będzie miał w stosunku do nich żadnych wątpliwości, więc myślę, że cel został osiągnięty.

      Odpowiedz
  • Awatar
    Łukasz

    21 maja 2013 10:31

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

    Odpowiedz
    • Awatar
      Michał Kortas

      21 maja 2013 10:50

      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ą…

      Odpowiedz
      • Awatar
        Mr.Mr

        21 maja 2013 12:13

        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ą…

        Odpowiedz
    • Awatar
      Michał Załęcki

      21 maja 2013 16:48

      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.

      Odpowiedz
      • Awatar
        Piotr Nalepa

        23 maja 2013 08:10

        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ść.

        Odpowiedz
      • Awatar
        Michał Załęcki

        23 maja 2013 14:43

        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

        Odpowiedz
      • Awatar
        Piotr Nalepa

        24 maja 2013 12:21

        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

        Odpowiedz
      • Awatar
        Mr.Mr

        24 maja 2013 14:43

        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.

        Odpowiedz
  • Awatar
    feamoignargfaionakfj9ajfopamjv

    22 maja 2013 10:26

    Tutaj więcej opisane: http://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters/

    Odpowiedz

Zostaw odpowiedź