Cześć w tym wideo wytłumaczę Ci jak działają CSS counters.

Więc to wideo będzie troszkę inne od pozostałych, ponieważ przygotowałem już tutaj troszkę dłuższy przykład i po prostu będziemy go omawiali.

Więc przejdźmy szybko przez markup - mamy tutaj diva o klasie .recipe który trzyma nam wszystkie tutaj te informacje o naszym przepisie na pizze będziemy tworzyli aplikacje która zawiera zarówno informacje o tym jak przygotować ciasto na pizzę oraz możliwość wybrania dodatków do tej pizzy, no i potencjalnie jakąś paginacje.

Więc wewnątrz tej klasy .recipe mamy diva o klasie .ingredients i
są to te tutaj składniki wewnątrz których jest lista nie numerowana ponieważ składniki nie muszą być kupione w jakiejkolwiek kolejności.

No i obok tego mamy diva o klasie .prep który reprezentuje przygotowanie, czyli kroki które musimy podjąć aby faktycznie taką pizzę upiec i jako że to są kroki w których kolejność ma już znaczenie no to korzystamy tutaj ze znacznika ol czyli ordered list czyli po prostu lista
numerowana i jak widzimy mamy tutaj punktory jeden dwa trzy cztery pięć sześć siedem, jako kroki które musimy podjąć z naszymi
przygotowanymi składnikami.

No i później gdy ciasto już oczywiście będzie przygotowane będziemy mogli wybrać dodatki i w przypadku dodatków, jest to po prostu kontener który zawiera w sobie pola o typie checkbox wraz z odpowiednimi labelkami i tutaj sekcję paginacji.

Tutaj od razu zaznaczę że ta sekcja paginacji to jest coś co będę wykorzystywał jako przykład czego nie robić z CSS counters.

Więc przejdźmy do naszego pliku styles css jak już wspomniałem ten przykład jest już troszkę rozpoczęty ponieważ nie chciałem niepotrzebnie wydłużać tego wideo do pół godziny gdy omawiamy tylko i wyłącznie CSS counters.

Jest więc cały nasz container .recipe jest wypozycjonowanie gdzie w taki sposób, że mamy dwie kolumny które dysponują całą dostępną przestrzenią, odstępy między tymi kolumnami dwadzieścia pikseli czyli tutaj jest pierwszy odstęp i tutaj są kolejne odstępy... jakieś podstawowe stylowanie naszych list więc tutaj ustawiamy kolor czarny zero zero zero zero jest to w notacji rgb kolor czarny no i tutaj ostatni parametr
jest to opacity.

Ta sekcja prep posiada wysokość równą dwóm
wierszom w naszym gridzie jeżeli tutaj byśmy sobie to podejrzeli no to widzimy faktycznie że tutaj jest podział naszego grida więc mamy dwa
wiersze i ta sekcja przygotowanie zajmuje tutaj wysokość
dwóch no i powiedzmy że chcielibyśmy upiększyć ten
przykład w taki sposób że chcielibyśmy aby te punktory miały kolor powiedzmy żółty, a punktktory z sekcji przygotowanie miały kolor zielony.

Więc przejdźmy sobie tutaj zobaczmy jaką mamy
klasę na naszych składnikach jest to .ingredients więc na tej klasie ingridends ustawmy sobie selektor na ul i spróbujmy ostylować ten punktor.
‍

Jeżeli sobie ustawimy na li kolor na powiedzmy ten żółty to widzimy że zmienia się cała treść danego li faktycznie pokolorowało nam to ten
punktor, ale niestety kolor tekstu również się zmienił a nam zależy
na tym tylko aby te punktory miały inny kolor.

Więc jak możemy to zrobić no niestety nie ma funkcjonalności w css-ie takiej aby użyć tutaj jakiegoś pseudoelementu powiedzmy list style
tutaj widzimy że jest na mozilli list bullet natomiast jest jedna sprawdzona metoda jak stylizować takie punktory i są
to właśnie css counters.

Więc to co możemy zrobić to ten kolor sobie wykomentować i aby korzystać z counters konieczna będzie znajomość pseudoelementów więc jeżeli nie wiesz jeszcze z nich korzystać koniecznie zobacz materiał na kanale na ten temat. Więc to co zrobimy to ukryjemy sobie na początku te punktory czyli .ingredients ul, list style type ustawiamy na none i tym sposobem nie mamy już wyświetlanych punktorów na naszej liście nie numerowanej.

No i na naszej liście składników każdy element li będzie miał na sobie znacznik before i na tym beforze oczywiście możemy ustawić mu jakiś kontent i tutaj możemy wstawić po prostu gwiazdkę albo
możemy użyć dowolnego znaku i unicode.

Jeżeli pracujecie na macu to możecie nacisnąć klawisz function i wtedy pojawi wam się taki ładny unicode picker jeżeli wpiszecie tutaj bullet to możecie po prostu wybrać ten znak i go tutaj użyć - więc jeżeli go zamkniemy to po prostu możemy wykorzystać sobie ten znak.

To co moglibyśmy zrobić to oczywiście tutaj ustalić jakiś margines powiedzmy na prawo pięć pikseli ciężko powiedzieć no i ustawić mu kolor na zielony super mamy już nasze punktory pokolorowane w taki sposób jakbyśmy tego chcieli moglibyśmy może jeszcze tutaj poprawić ten margines na powiedzmy padding-left ustawić sobie na zero albo po prostu na dwadzieścia pikseli i wtedy to będzie wyrównane do tych innych elementów które mamy tu umieszczone.

Natomiast nie wykorzystaliśmy jeszcze css counters, ale zrobiliśmy pierwszy krok do tego móc ich użyć. Tutaj w tej sekcji przygotowanie więc znając już podejście z naszych list nie numerowanych spróbujemy
zaaplikować tą wiedzę w naszym przykładzie prep czyli na prep
i elemencie ol czyli liście numerowanej pamiętajmy, że semantycznie ma to duże znaczenie ustawiamy tak samo list style type na none i jak widzimy te punktory już nam zniknęły.

No i na każdym li before wewnątrz tego prepa możemy ustawić
tutaj jakąś treść i widzimy że to już w tym momencie działa moglibyśmy tutaj oczywiście zmienić kolor na #34b399 i teoretycznie mamy już pokolorowane te punktory - ale widzimy że tutaj
te elementy nie mają poprawnej wartości swojej liczby porządkowej.

Więc do tego właśnie wykorzystujemy css counters i css
counters wymaga znajomości około trzech właściwości
css-owych więc najpierw musimy zadeklarować nasz counter i używamy do tego wartości counter-reset dlaczego reset no bo możemy zarówno zainicjować wartość naszego komputera za pomocą tej właściwości bądź ją zresetować do zera w przypadku jeżeli mielibyśmy zagnieżdżone
listy powiedzmy.

Nazwiemy go prep-list i w tym momencie zadeklarowaliśmy tak jakby zmienną, chociaż nie jest to zmienna w kontekście CSS Variables którą możemy wykorzystać wewnątrz naszych elementów
li więc jeśli sobie tutaj wykorzystamy ją na takiej zasadzie
że zmienimy nasz content tylko oczywiście nie zmienimy go na .ingredients bo to jest lista nie numerowana a nam zależy na liście numerowanej
‍

Więc zmieniamy to tutaj i tak samo zadeklarujemy ten
counter-reset tym miejscu to możemy ustawić po prostu
counter na prep-list i widzimy że pojawiło nam się jakieś zero
ponieważ zero jest to domyślna wartość początkowa każdego countera
jeżeli chcielibyśmy zmienić wartość początkową czyli powiedzmy zaczynać od jedynki czy dwójki no to możemy po spacji po każdym counterze podać taką wartość że jeżeli ja tu wpiszę jedynkę no to zobaczymy że wszędzie zmieniło
nam się to na jedynkę dwójka wszędzie jest dwójka zostawimy to jako wartość domyślną ponieważ jest to wartość początkowa i przy każdym zwiększeniu wartości tego countera będziemy mieli większą wartość porządkową.

Jako, że gdy ustawimy sobie counter-increment czyli właśnie tą
wartość cssową która zwiększa nasze countery tutaj musimy podać również nazwę naszego countera czyli prep-list to zobaczymy
że ta lista jest numerowana od jedynki czyli domyślna wartość zero
sprawia że elementy liczone są od zera ale jako że counter-increment
jest liczony od każdego sektora który napotka mamy po prostu zawsze wartość o jedną wyżej czyli chcielibyśmy na przykład stworzyć listę indeksów tablicy powiedzmy no to możemy sobie tutaj to ustawić na minus jeden i wtedy ta lista będzie numerowana od zera albo analogicznie od minus pięciu.
‍

Oczywiście te wartości będą nam się zmieniały no i teraz jak widzimy te
wartości już zostały wygenerowane z poziomu samego css-a nie ma tutaj
ani grama javascriptu ale zabrakło nam tej kropki którą tutaj dodawaliśmy, więc do wartości counter możemy dodać dowolny string po prostu po spacji i w cudzysłowie dodajemy lubię na przykład kropkę i spację i w tym momencie mamy ładnie wygenerowaną listę którą jesteśmy w stanie kolorować niezależnie od tego tekstu i osiągnęliśmy to właśnie przy pomocy CSS counters.

Więc przechodząc do może tej naszej paginacji teraz
chciałem ci pokazać że go CSS countries nie warto robić a
co też można znaleźć w różnych poradnikach w internecie mogłeś spotkać się z poradnikiem w którym przykładowe użycie CSS counters było zaproponowane jako generowanie listy stron po których będziemy się paginować - czyli po prostu mamy jakąś stronę jest jakaś karuzela
bądź galeria zdjęć no i aby przejść na następną stronę możemy użyć takiego przycisku żeby przejść na stronę drugą trzecią czwartą piątą i tak dalej.

Więc to oczywiście w tym przypadku nie jest poprawne semantycznie ponieważ to są po prostu punktory listy to nie są żadne odnośniki ani button czyli po prostu przyciski więc to już jest pierwszy problem z tym podejściem ale to co różne poradniki proponują to usunięcie
sobie tego tutaj numerowania z naszej listy
i po prostu wygenerowanie tego za pomocą css-a no i oczywiście możemy to zrobić zróbmy to tylko dla sportu tak aby lepiej zapoznać
się CSS counters więc na naszym paginate po prostu
stworzymy nowy counter-reset i tutaj zrobimy sobie pagination
no i na elementach paginate li before.

Ustawimy sobie content na counter-pagination i tutaj widzimy że wstawiły nam już się wszędzie zera no i oczywiście counter-increment
ustawiamy na pagination i widzimy że w tym
momencie to już nam działa tylko jako że ten element
listy który jest powrotem do poprzedniej strony czy ten który jest
przejściem do następnej są też elementami tej listy one też zostały ponumerowane.

W związku z czym musielibyśmy je albo wynieść poza tą listę albo się ich po prostu pozbyć ale niestety nie jest to tak czy siak rozwiązanie optymalne ponieważ jak widzisz te elementy li nie mają w sobie żadnej wartości w htmlu a jeżeli oglądałeś mój materiał o progressive enhancement - karta powinna ci wyskoczyć w prawym górnym rogu ekranu - to prawdopodobnie wiesz już że
nasza strona powinna być operacyjna na każdym etapie ładowania strony niezależnie od tego, czy mamy cssa, czy mamy javascript - strona powinna nam działać w związku z czym aby to było zgodne z duchem idei progressive enhancement możemy oczywiście zrobić z tego listę numerowaną ale wewnątrz której będzie odpowiedni przycisk z odpowiednią wartością, no to
tutaj już można się zastanawiać jak to konkretnie zaimplementować ale ważne jest aby nie generować treści które są istotne dla użytkownika
z poziomu cssa ponieważ na przykład czytniki ekranowe mogą mieć problem z odczytaniem wartości content którą ustawiamy na pseudoelementach after czy before nie wspominając już o problemach z potencjalnym pozycjonowaniem stron internetowych gdy wyszukiwarki internetowe takie jak google crawlują nasze strony i starają się wyjąć z nich metadane.

Więc to co ja zrobię to po prostu pozbędę się tego przykładu i
ponownie nie polecam css counters do tego typu
przykładów ale jako alternatywę chciałem pokazać
ci właśnie ten selektor dodatków do naszej pizzy więc
mamy tutaj taki oto markup, on jest przygotowany w taki sposób aby CSS counters mogły zadziałać to znaczy CSS counters działają tak jak działają selektory cssowe co też pokazywałem, w przykładzie star-rating w dwa
tysiące siedemnastym roku i ważna dla cssa jest to aby te elementy były
na tym samym poziomie dlatego tutaj nie ma na przykład zadnych wraperów na te inputy i labelki, one są na tym samym poziomie w hierarchii dom czyli dokument object model i one są pozycjonowane faktycznie tutaj na gridzie.

Czyli jak zobaczymy sobie toppings mamy tutaj display grid w
którym mamy dwie kolumny pierwsza ma szerokość automatyczną druga ma całą dostępną przestrzeń i jeżeli podejrzymy sobie to w devtools faktycznie widzimy że jest to taki układ czyli niezależnie od tego jak wygląda nasz markup elementy wydają się być obok siebie i to jest duża zaleta css grid w kontekście między innymi dostępności.

Więc to co zrobimy to stworzymy sobie coś troszkę bardziej interaktywnego ponieważ nie jesteśmy ograniczeni do tego aby ustawiać nasze countery tylko i wyłącznie na statycznych elementach możemy używać różnych pseudoklas czy pseudoelementów więc
nasze paginate jeszcze raz całkowicie już usunę no i toppingi
w nich stworzymy taką logikę że wewnątrz toppingi policzymy
sobie wszystkie elementy input i stworzymy sobie counter
reset on prawdopodobnie powinien być tutaj zadeklarowany
wewnątrz naszego kontenera toppings czyli tutaj.

Więc on będzie dostępny tylko z tego poziomu i ustawimy mu counter-reset na total-ingredients czy bardziej tota-toppings no i analogicznie
ustawimy sobie counter increment na total toppings no i
w takiej specjalnej klasie results którą tutaj przygotowałem umieścimy nasze wyniki czyli results before content ustawimy na counter results i nie zadziałało a to dlatego bo results to jest nazwa klasy a nam chodzi o nazwę CSS countera i jak widzimy mamy tutaj wartość dziesięć i jest to po prostu liczba elementów input wewnątrz naszej klasy topping.

Czyli jeżeli ja tutaj dodam dodatkowy element to to się nam oczywiście
tutaj zwiększy to co możemy zrobić tutaj dalej to
ustawić sobie kolejny counter ale nie możemy ustawić go jako osobną właściwość no bo po prostu sobie nadpiszemy tą wartość którą sobie tutaj ustawiliśmy na szczęście css counters wspierają kilka wartości naraz w związku z czym jesteśmy w stanie tutaj zadeklarować po prostu drugą wartość i powiedzmy selected-toppings to będzie nasz drugi counter
i ustawimy sobie go w taki sposób że on będzie się zwiększał tylko
wtedy kiedy natrafi na jakiś element w drzewie dom który będzie zaznaczony i w tym momencie możemy tutaj sobie wyświetlić to tuż obok i tak jak analogicznie powiedziałem możemy tutaj dodać po prostu w cudzysłowie dowolny tekst czyli ja tutaj dodam ukośnik i na
początku drugi counter selected
toppings i widzimy że mamy tutaj już zero na dziesięć.

W momencie kiedy będziemy wybierali te dodatki zobaczysz
że po pierwsze zwiększa się nam counter selected-toppings
ale równocześnie total-toppings nam spada z jakiegoś powodu no i dlaczego nam total-toppings spada, ponieważ tutaj na naszym input
faktycznie nie zwiększamy wartości tego total-toppings a
jako że ten element jest bardziej specyficzny niż ten
no to poprostu te elementy nie są liczone - materiał o
specificity też oczywiście znajdziesz na kanale więc jeżeli sobie tutaj to po
prostu przekopujemy total-toppings tak aby one też się zwiększały za każdym razem no to zobaczymy że mamy wybrane jeden na
dziesięć czy cztery na dziesięć dodatków do naszej pizzy no i oczywiście
można też pójść o krok dalej jeżeli chcielibyśmy stworzyć sobie taki
licznik który liczy nam niezaznaczone elementy no to możemy
zrobić to na kilka sposobów takim najbardziej jawnym mówiącym
o co tam tak naprawdę chodzi byłoby zrobienie sobie reguły która
mówi że szukamy inputów które nie są zaznaczone tutaj
oczywiście ostrożnie ze wsparciem dla pseudoklasy :not
no i skopiujemy sobie ten counter-increment, dodamy nowy
counter do naszego counter-reset czyli
not-selected-toppings.

Tutaj zwiększamy sobie nasze not-selected-toppings
i tak samo jak wcześniej zwiększymy nasze total-toppungs tak aby nie było problemu z tą liczbą całkowitą więc zapisujemy no
i oczywiście możemy to ponownie wyświetlić w jakiś sposób powiedzmy
stworzymy sobie drugi pseudoelement tym razem after
i tutaj ustawimy not-selected-toppings i dodamy ominięte składniki

No i to co moglibyśmy zrobić teraz to troszkę to sobie ostylować i to zrobimy tylko chciałem pokazać że w
momencie kiedy zaznaczamy te elementy to widzimy że tutaj mamy
dwa na dziesięć zaznaczonych elementów i oczywiście jak tutaj sobie
zaznaczymy to wszystko, to będzie się tutaj zwiększało ale mamy też licznik pominiętych składników czyli tych elementów które nie zostały wybrane na naszej liście to co zrobimy teraz to nasze results ustawimy absolutnie względem tutaj tego kontenera z dodatkami
a dlaczego ustawimy to absolutnie dlatego bo jeżeli tą
klasę results przenieśli byśmy sobie powyżej
tego toppings gdzie przypominam tam dzieje się cała deklaracja
całych naszych CSS counters no to niestety ten licznik nie będzie nam już działał.

‍
Więc tutaj kolejność w markupie ma bardzo duże znaczenie
i po prostu żeby to rozwiązanie działało musi to być
zadeklarowane już po klasie która faktycznie ustawia
nam te CSS counters więc to nasze results wypozycjonujemy absolutnie
względem toppings-wrapper, materiał o pozycjonowaniu absolutnym
też oczywiście znajdziesz na kanale koduje, karta wyskoczy ci w prawym
górnym rogu ekranu no i zrobimy tak że toppings-wrapper będzie miał
position relative a nasze results tez będą miały position absolute
top ustawiamy na zero, więc one wskoczyły tutaj
na samą górę tego kontenera right na zero
no i oczywiście możemy zmienić już tutaj jakieś stylowanie powiedzmy font-family ustawić sobie na
Bebas Neue może font-size troszkę zwiększyć
powiedzmy półtora rema no i zamiast tutaj pracować
bezpośrednio na results before i after, moglibyśmy
tutaj stworzyć dwa osobne divy powiedzmy total
oraz ommited czyli ominięte.

No i znów jesteśmy w takiej trochę tutaj szarej strefie ponieważ generujemy tekst który może być istotny dla użytkownika z poziomu css
więc tutaj warto sobie zadać takie pytanie czy to
jest bardziej dodatek i dekoracja i czy bez tego nasza aplikacja może
działać czy jest to coś co jest niezbędne dla użytkownika tak aby mógł
korzystać z naszej strony w sposób wydajny wg. mnie jest to bardziej
dekoracja i dodatek i dodatkowo nie wymaga JSa więc jest dobre
w kontekście progressive enhancement bo użytkownik dostaje troszkę więcej niż korzystałby z surowego htmla a jednocześnie jeżeli javascript jest wyłączony bądź nie działa po prostu ta logika dalej funkcjonuje
więc tutaj po prostu dodam sobie klasę total
i tutaj ommited i też na before moze
i tutaj dodamy wybrane składniki i tym samym mamy interaktywny przykład w którym jesteśmy w stanie zliczać dynamicznie wybrane składniki za pomocą CSS Counters bez ani grama javascriptu a także jesteśmy w stanie stylować punktory listy nawet jeżeli są to listy numerowane.

Koniecznie dajcie znać jaka jest wasza ulubiona pizza oraz czy chcielibyście dowiedzieć się więcej o którejkolwiek ze wspomnianych technologii w tym konkretnym wideo jeżeli będzie takie zapotrzebowanie oczywiście jestem w stanie przygotować ten przykład od samego początku tak abyście widzieli jak zacząłem tworzyć ten layout dlatego zachęcam was do dzielenia się pomysłami co jeszcze chcielibyście zobaczyć na kanale koduje a ja tymczasem się z wami żegnam - dzięki!
‍

[Bloopers]