CSS: CSS Counters

0:00W tej lekcji opowiem o CSS centers czyli o licznika w Teksasie.

0:05Tutaj mamy prosty przykład z miejscami do

0:08odwiedzenia i mamy tutaj wymieniony przykład La Paz Rio De Janeiro

0:11Michael Bloomberg też piękne miasto Paryż Praga czy Nowy Orlean.

0:16No i załóżmy że chcielibyśmy oscylować

0:20tylko tą część która nam numerów numerację tą listę.

0:24Jeżeli zrobimy sobie na powiedzmy kontener.

0:29Eli kolor.

0:31Green.

0:33No to niestety cały tekst nam się po kolorów.

0:37Nie mamy możliwości oscylowała tylko i

0:39wyłącznie punkt torów w taki sposób jak byśmy tego chcieli.

0:43W kontekście koloru co jest często problematyczne zwłaszcza

0:46jeżeli tworzymy jakieś wstęgi produktów i faktycznie klient zażyczy sobie aby

0:50numerki były danego koloru a tekst był formalnie Biały.

0:54W związku z czym jak można wykorzystać do tego CSS Qantas.

0:58Przede wszystkim możemy pozbyć się tutaj lista chyba.

1:04Bo nie jest on nam już potrzebny ponieważ nie możemy go oscylować na taki

1:09kolor jak chcemy i możemy użyć do tego pseudo elementów.

1:12Czyli jeśli sobie stworzymy na

1:15iPhone'a i ustawiamy mu kontent na powiedzmy 1 kropka.

1:23No to faktycznie widzimy że każdy z tych elementów ma tą wartość.

1:26Natomiast jest to jedynka dla każdego więc powinniśmy tutaj jakoś to dynamicznie

1:31zrobić aby każdy element miał inną wartość.

1:34Do tego można użyć właśnie CSS Counter i jest skałą dzieli się na trzy właściwości

1:40tak naprawdę dwie plus jedną funkcję specjalną.

1:43Wszystkie zaczynają się od kamer czyli leci po angielsku.

1:48Mamy jeszcze tutaj Can't reset i możemy generalnie ustawić np.

1:52reset i podajemy TUTAJ nazwę naszego licznika.

1:55To może być dowolny ciąg znaków jaki sobie myślimy.

1:59Powiedzmy że tutaj wpisze element albo Places.

2:05Kant i generalnie Counter Reset działa na takiej zasadzie że on mówi w którym

2:10momencie ten licznik powinien się zerwać bo np.

2:13jak robimy zamieszczone listy jeżeli ten

2:15element miałby jeszcze w sobie listę no to powinniśmy.

2:19Niektóre liczniki wzorować tak aby następne elementy mogły się zrobić albo

2:23jeśli po prostu mielibyśmy kilka takich list.

2:26No to musimy te liczniki zerwać żebyśmy

2:29nie mieli sytuacji że element w drugiej liście

2:33nagle ma tutaj znowu jedynkę pomimo tego że tutaj jechało od 1 do dwunastu.

2:40No i my nie chcielibyśmy tutaj aby pierwszy element znów miał 13 tylko

2:44chcielibyśmy aby miał kolejną liczbę porządkową od 1.

2:48W związku z czym to usuwamy

2:50i musimy zrobić też komputer i Kreml żeby faktycznie zwiększać tę wartość.

2:55Przy każdej terapii i tutaj racja mam na

2:58myśli konkretnie elementy w drzewie domu tzn.

3:03Przy każdym

3:05tym sektorze który za deklarowali czyli Counter Eli i na nim before then

3:10Counter będzie się zwiększał nie tylko instrument.

3:15No i w tym momencie będzie Jedynka będzie Dwójka Trójka Czwórka itd.

3:22Jeśli wykorzystamy do tego słowo

3:26kluczowe czy funkcję Counter i piszemy tę nazwę którą sobie pisaliśmy

3:31Places Kant no to jesteśmy w stanie wyświetlić tą

3:35naszą liczbę porządkową jako pseudo element.

3:39Czyli nie jest to faktycznie tekst w tym

3:41tylko on się dynamicznie generuje ale dalej jest to liczba numerowane ponieważ

3:45tematycznie jest to faktycznie liczba numerowane.

3:48Nie powinniśmy tutaj robić ulec.

3:50Jeżeli faktycznie będziemy wyświetlać te

3:52liczby bo jest to błąd tematyczny w stosunku do tego co jest wyświetlane i to

3:57co niesie nasza treść no i możemy tutaj sobie po spacji dodać jakieś dodatkowe

4:00ciągi znaków jeżeli chcielibyśmy dodać do tego kropkę i jeden

4:04biały znak spacji aby to wyglądało troszkę lepiej no to jesteśmy w stanie to zrobić.

4:10I jeśli tutaj

4:11ten element Alice B for faktycznie postulujemy ustawiły mu Far Green.

4:18No to tylko ten Counter będzie klarowny a cała reszta tekstu już nie.

4:24W związku z czym nie mamy opcji zdecydowania negatywnie z takich typów w

4:29kontekście ich koloru oczywiście możemy zmieniać status OPP na jakieś inne

4:33kształty czy całkowicie go wyłączać ale zmiany koloru nie mamy kolor musi być taki

4:38sam jak kolor tekstu i możemy użyć country Counter Reset oraz Counter set aby

4:44manipulować tymi wartościami a komputer nam tą wartość po prostu wyświetli i też

4:49możemy to zrobić właśnie w kontekście tak dla testów.

4:52Możemy tylko ustalić na elemencie.

4:57Powiedzmy pierwszym klas.

5:01Spieszę.

5:03Nie ustawiamy nas przy.

5:09Be for.

5:11Content.

5:12Na jakiś większy klik tutaj oczywiście to

5:15nam się nie wyświetli ponieważ mamy gorsze specyfice.

5:18Więc tak naprawdę możemy spróbować sobie podbić.

5:22I faktycznie teraz to działa. I np.

5:24jesteśmy w stanie powiedzieć czy to jest element specjalny.

5:28Wiener.

5:31Jeżeli to faktycznie byłoby najlepsze miejsce do odwiedzenia

5:35bądź po prostu możemy też ustawić Counter set i ustawić to na wartość

5:43jakąś konkretną natomiast wydaje mi się że

5:45to nie jest standardowa składnia i nie będzie działała nigdzie poza

5:49Firefoxa więc jesteśmy w stanie napisać pojedyncze elementy normalnie kontent.

5:53Generalnie kamery działają na takiej zasadzie.

5:56Warto o tym pamiętać jeżeli klient

5:58faktycznie zażyczy sobie aby punkt który miał inny kolor niż cała reszta tekstu.

6:02No i w ten sposób możemy to osiągnąć

6:04zarówno tworząc tematyczny kod jak i wizualnie zadowalające rozwiązanie dla

6:11osób dla których faktycznie tworzymy oprogramowanie.