CSS: Semantyczne zastosowanie zmiennych

0:00Część tej lekcji opowiem ci o użyciu

0:03romantycznym zmiennych CSS Custom Properties.

0:07I niekoniecznie chodzi tutaj o tematykę w

0:09kontekście HTML a tylko bardziej o takie bycie

0:13jawnym co do tego co robimy i nazywanie zmiennych nie bezpośrednio

0:18ile coś ma mieć szerokości lecz używanie tego w bardziej sposób intuicyjny.

0:23Dla nas tutaj Przygotowałem taki przykład gdzie faktycznie ustalane są

0:29rozmiary poszczególnych kolumn z dodatkową dotacją której nie wspomniałem

0:33wcześniej mianowicie nazywanie poszczególnych punktów na siatce tzn.

0:39Tak jak tutaj się wcześniej odnosili do Jedynki jako początku Grid w kontekście

0:44wiersza bądź kolumny i kolejnych jego elementów 2 3 4 5 6 7 to

0:51byłaby cała nasza długość jawnych torów w CSS wyjdzie nam to tak samo możemy

0:56odnosić się do tych punktów poprzez własne nazwy.

1:00Czyli jesteśmy w stanie odnosić się do

1:02jedynki poprzez start do siódemki poprzez Enter i do pojedynczych elementów czyli w

1:08tym przypadku od dwójki do szóstki poprzez content start i content and Content start

1:15ma tutaj wartość 2 content End ma tutaj wartość 6 czyli po prostu są to jakby

1:22takie nazwy pomiędzy standardową rotacją GRID Holmes.

1:26Dlaczego to można wykorzystać.

1:28Jeśli zrobimy sobie

1:29ogólną regułę to ja zrobiłem kontener i bezpośrednie dziecko ale tak naprawdę

1:35można byłoby to uprościć i to po prostu bo nie ma tutaj żadnych więcej zamieszczonych

1:40elementów listy.

1:42Możemy przy okazji też ustawić sobie tutaj GRID gafa jakiegoś czy po prostu gafa

1:47na pół tego.

1:51I tak naprawdę.

1:55Możemy zmniejszyć też ilość tych kolumn po prostu.

1:58No i co to nam daje tak naprawdę co tutaj się stało.

2:02My ustalamy że GRID kolumn czyli to czego

2:06używamy aby umiejscowione elementy nakrycie miało domyślnie nie auto.

2:11Auto jest Domyślną wartością dla KRRiT kolumn tylko Custom Property.

2:16Z Polpakiem do aut też możemy robić w full baki czyli obsługiwać sytuację kiedy ta

2:22wartość nie jest zdefiniowana nigdzie w kodzie.

2:25To jaka powinna być tutaj wartość tej

2:28zmiennej i domyślnie ustawiamy auto więc start wartość startowa dla GRID kolumn dla

2:34każdego z tych elementów wewnątrz kontenera

2:37ul. .

2:39Będzie auto.

2:41Chyba że ktoś zadeklarował kolumn start czy kolumn NT.

2:45Więc tak naprawdę po

2:47pojedynczo teraz możemy na przykład na 3 ustawić sobie tylko kolumnę.

2:53Start.

2:561.

2:58I kolumn End powiedzmy 4.

3:02Tutaj możemy to podbić do dwójki.

3:04No i faktycznie nasz element się tutaj

3:07rozciągnięty w tym przypadku oczywiście nie mieści się to nam na grę na siatce

3:13i dlatego element przeskakuje do następnego wiersza jeżeli chcemy się tego

3:17pozbyć możemy użyć kredy auto Flow DNS i wtedy elementy zostaną napisane.

3:25Tak aby wypełnić wolne luki czyli 1.2 troszeczkę nam się tutaj nie mieści.

3:30Więc tutaj zostawiamy dwa czy trzy wolne pola.

3:34Tutaj też jest wolne pole trójka wchodzi.

3:37Reszta się układa w standardowym Flow Flex.

3:40Przepraszam.

3:43Jeżeli włączymy tego Denisa.

3:46No to wtedy te elementy puste zostaną

3:50wypełnione kolejnymi elementami naszej siatki.

3:53To jest też ten problem o którym wspominałem z problemami z dostępnością

3:57ponieważ w tym momencie elementy nawigacja po nich wyglądałaby dziwnie ponieważ

4:01najpierw mamy Jedynkę Dwójkę Trójkę tutaj niżej czwórkę piątkę szóstkę siódemkę

4:07znowu jest trójka więc musimy ją ominąć ósemka dziewiątka dziesiątka.

4:11Więc w kontekście nawigacji klawiaturą czy

4:14odczytywania czytników ekranowych nie jest to optymalne rozwiązanie.

4:19Grid Flow DNS jest dobrym podejściem jeżeli chcemy mieć faktycznie

4:24wypełniony całego grilla ale jeżeli musimy robić jakieś interakcje

4:27czy czytać treści w odpowiedniej kolejności to nie jest to dobre podejście

4:32ale oprócz tego że możemy każdy z tych systemów teraz sterować za pomocą samych

4:37Custom Properties nie musimy nawet wiedzieć co jest pod spodem czy to jest

4:40GRID czy to jest Flex Box czy może na frontach.

4:44Nie ma to znaczenia.

4:45CSS Custom Properties zabierają to wszystko ponad taką warstwą abstrakcji

4:52i możemy tylko operować na zmiennych które są nam znane.

4:56To jest bardzo przydatne jeżeli mamy po

4:58prostu kontraktu w firmie i oni niekoniecznie są mistrzami w danej

5:04technologii ale chcemy żeby byli w stanie łatwo edytować dane

5:09bądź jeżeli mamy jakiś Content Management System czyli system zarządzania treścią

5:14i nasi klienci faktycznie muszą sobie w ten sposób ustawiać Custom Properties.

5:19Są do tego naprawdę dobre.

5:22Możemy sprawdzić CSS Custom Properties.

5:26I ich wsparcie.

5:27Natomiast ona jest mniej więcej tak samo wspierana jak GRID więc nie powinno być

5:32problemu używania tych dwóch technologii równolegle.

5:35Ale co można zrobić jeszcze tutaj zadeklarowali byśmy sobie te zmienne

5:41które odnoszą się do konkretnego początku bądź końca GRID a więc możemy ich tutaj

5:46użyć tak naprawdę ustalić sobie kontent start.

5:51I content and.

5:54I w tym momencie nasz leje out rozciąga

5:57się tak jak chcieliśmy oczywiście my tutaj ustalamy tylko i wyłącznie GRID kolumn

6:01ale takiej warstwy abstrakcji możemy tworzyć ile chcemy.

6:05Możemy tak naprawdę tą zmienną kolumn start ukryć jeszcze bardziej za np.

6:12media Saints albo logo SAS i wtedy stawiamy tylko wartości.

6:19Powiedzmy logo Six.

6:23Już róbmy to dasz kasę

6:26na 5 i tak naprawdę pod spodem możemy

6:29używać tych kolumn startów kolumn Andów a koń.

6:33Koniec końców deweloperzy czy ktokolwiek

6:36to będzie pisał tego co FSA będą mogli korzystać z logo Six a to

6:40wszystko zostanie kierowane do faktycznej implementacji w quizie czy Flex.

6:44Czy w czymkolwiek innym jest to naprawdę ciekawe podejście.

6:48Szczerze mówiąc nie testowałem tego jeszcze na produkcyjnych środowiskach.

6:53Wydaje mi się że jeżeli jest przestrzeń na to aby korzystać z custom Properties

6:58na takiej skali nie powinno być z tym problemu.

7:02I faktycznie może to pozbyć się wielu problemów CSS CSS em w

7:06kontekście jego zrozumienia ponieważ oferujemy tylko na prostych zmiennych 1

7:10czujemy proste wartości a nie myślimy jak ten koniec końców się składa.

7:17W związku z czym chciałem zachęcić do eksperymentowania z kasą Properties

7:22w sposób kreatywny oczywiście tryb dzienny nocny to jest podstawowe takie użycie

7:29zmiennych w CSS które faktycznie jest przydatne

7:33ale można pójść o krok dalej i na przykład stworzyć dedykowane komponenty które

7:39będziemy Custom tylko za pomocą zmiennych CSS.

7:43Na froncie bo możemy to też zrobić oczywiście z poziomu Java skryptu.