CSS Grid: Wady i zalety grida

0:00W tej lekcji z kursu css grid zaawansowane layouty opowiem ci o

0:04wadach i zaletach grida czyli w czym jest dobry w czym jest gorszy czego nie

0:08powinieneś robić a do czego grid może ci się faktycznie przydać więc zaczniemy może

0:12od sytuacji gdzie definiujemy że każdy element powiedzmy

0:17co trzeci będzie miał szerokość ustawioną

0:22na cztery kolumny no i mamy

0:26w tym momencie sytuację że faktycznie mamy tutaj te dziury ponieważ

0:30grid nie jest w stanie ich ułożyć możemy w tym momencie ustalić

0:35że chcemy korzystać z auto-flow ustawionego

0:40na dense i w tym momencie te dziury zostają wypełnione natomiast

0:44oprócz tego że grid musi to jeszcze raz wszystko przezanalizować i ustawić

0:49wpływa to też na dostępność co mam konkretnie na myśli jeśli usuniemy

0:53dense'a odświeżyłem stronę i dodamy

0:57na wszystkich naszych elementach właściwość tabindex

1:010 czyli sprawimy że będą focusowalne za pomocą

1:05nawigacji klawiaturą symulujemy w tym samym sytuację

1:09gdyby te elementy były buttonami oczywiście jeśli jednak mielibyście

1:14buttony na stronie powinniście używać semantycznych tagów

1:18czyli normalnie tutaj wstawić button ja ze względu na dodatkowe stylowanie

1:22które powinniśmy zrobić wtedy aby wyglądał nasz przykład dokładnie tak samo tego

1:27robić nie będę no ale samo tabindex 0 nie zmienia nam kolejności

1:31tabowania się po stronie i umożliwia faktyczne focusowanie

1:36danego elementu czyli jak to zapiszemy i zaczniemy teraz nawigować się tabem

1:40to widzimy że elementy mają tutaj niebieski

1:44border czyli możemy się po nich nawigować klawiaturą i faktycznie jak ja klikam shift bądź

1:48tab no to one albo idą do przodu albo do tyłu i to jest okej to

1:52jest jeszcze w porządku pomimo tego że to wygląda średnio to jest

1:57to dostępne ponieważ widzimy w którym miejscu będzie za chwilę outline

2:01kiedy go klikniemy czyli klikamy tab spodziewamy się że będzie na dwójce

2:05następna pewnie będzie trójka czwórka piątka szóstka siódemka i tak

2:09dalej w przypadku jeśli włączymy grid-auto-flow dense no to

2:14nawigacja klawiaturą będzie zaburzona ponieważ jedynka jest okej dwójka jest okej

2:18ale w tym momencie już nie wchodzimy na czwórkę pomimo tego że naturalne

2:22dla nas byłoby że czytamy od lewej do prawej czyli ten element będzie następnym który

2:26foxusujemy tylko zeszliśmy na dół teraz klikamy dopiero

2:30czwórkę piątkę szóstka jest w ogóle jeszcze niżej niż trójka siódemka

2:35tutaj ósemka dziewiątka tutaj dziesiątka i tak dalej i tak dalej więc

2:40nawigacja klawiaturą jest zdecydowanie utrudniona w związku z czym nie używajcie

2:44grid-auto-flow dense na elementach które mają być docelowo elementami

2:48z którymi użytkownik będzie przeprowadzał interakcje ponieważ jeśli będziecie musieli

2:53dostosować swoją stronę do konkretnych wymogów dostępności będziecie

2:57mieli problem i będziecie musieli to po prostu przepisać tak samo ma się sytuacja z

3:01orderem i to jest dokładnie ta sama sytuacja co we flexboxie jeśli ustawimy powiedzmy

3:05na elemencie 10 order 1 no

3:10to ten element będzie renderowany na końcu i nawet jak się będziemy próbować

3:14doklikać teraz jesteśmy na dziewiątce to faktycznie nawigacja

3:19klawiaturą dalej korzysta z kolejności takiej jaka jest w markupie

3:23możemy próbować zmieniać wartości tutaj tabindexów aby

3:27ta nawigacja wyglądała lepiej natomiast jest to rozwiązanie które totalnie

3:32się nie skaluje jest trudne w utrzymaniu i generalnie przynosi

3:37więcej szkód niż korzyści więc po prostu nie używajcie

3:41grida do elementów nawigacyjnych zwłaszcza w ten sposób

3:45jak zaprezentowałem tutaj bo to po prostu jeśli przyjdą odpowiednie

3:49wymagania będzie do przepisania grid nie jest natomiast największym

3:53złem jeśli chodzi o dostępność stron www wręcz przeciwnie pozwala

3:57często spłaszczyć strukturę markupu bez konieczności dodawania

4:01wrapperów czyli na przykład diva o klasie wrapper

4:06nie musimy robić tego tak dużo jeśli korzystamy z grida oczywiście czasami

4:10wrapery się trafią natomiast nie będzie ich tak dużo jak gdybyśmy

4:14na przykład tworzyli layouty na floatach czy nawet na flexie dodatkowo wiedząc

4:18że właściwość subgrid pojawia się na horyzoncie i

4:23w niedalekiej przyszłości prawdopodobnie będziemy mogli z niej korzystać o

4:27właściwości submit opowiem pod koniec tego kursu w lekcji nadchodzące

4:31zmiany i submit właśnie będzie nam pozwalał zachowywać semantyczną strukturę

4:35dokumentu oraz wizualną strukturę naszej

4:40siatki dlatego grid jak każda inna technologia użyta niepoprawnie będzie

4:44zła dla dostępności performance'u czy po prostu utrzymania

4:48danej witryny ale używana poprawnie będzie faktycznie dawała

4:53duże benefity no i dla niektórych wadą grida

4:57może być to że nie mamy na przykład na konkretnym elemencie możliwości

5:01ustawienia czegoś takiego jak we flexie flex-grow po

5:05prostu nie da się tego w gridzie zrobić dla niektórych będzie wadą to że

5:10nie możemy mieć nierównych kolumn czy wierszy tak jak

5:14w sytuacji z justify-content którą widzieliśmy parę lekcji temu ale

5:18to jest wada nie powiedziałbym po prostu grid jest inną technologią

5:22w inny sposób rozwiązuje problemy układania

5:27layoutu i powinniśmy zawsze dobierać narzędzie do problemu kolejną

5:31z oczywistych zalet grida jest to że jest po prostu prosty w obsłudze i

5:37wymaga stosunkowo mało kodu aby osiągnąć naprawdę

5:41skomplikowane layouty a to przekłada się po prostu na to że

5:45nasze strony będą ładowały się szybciej ponieważ nie musimy robić wielu haków które

5:49musieliśmy na przykład robić przy layoutach związanych z budowaniem stron

5:53na frontachfloatach nie musimy robić clearfix'ów nie musimy dodawać dodatkowych elementów

5:57do naszego markupu grid jako technologia jest

6:02o wiele bardziej wydajny niż floaty i prawdopodobnie

6:06też flexbox ostatnim argumentem z którym

6:10możecie się spotkać w kontekście dlaczego nie używać grida jest

6:15jego wsparcie natomiast w przeciwieństwie do flexboxa grid

6:19miał mniej więcej takie same wsparcie we wszystkich

6:23przeglądarkach w momencie kiedy został dostarczony w momencie

6:27kiedy stał się oficjalnym specyfikacją większość przeglądarek

6:31je wspiera oczywiście starsze internet explorery mogą mieć problem

6:35z renderowaniem grida ponieważ tam jest też troszkę inna składnia konkretnych

6:40właściwości natomiast grid idealnie wpasowuje się w ideę

6:44progressive enhancement czyli dostarczania funkcjonalności

6:48lepszych dla urządzeń które je wspierają a dla

6:52urządzeń słabszych to co jest po prostu możliwe zwłaszcza

6:56że ucząc się grida w tym momencie będziecie znali technologię która za dobrych

7:01parę lat będzie już tak dobrze wspierana i możliwe że wsparcie dla

7:06starszych przeglądarek jak na przykład internet explorer 11 będzie

7:10konieczne tylko jeśli pracujecie w jakiejś korporacji która jest

7:14zależna od tej przeglądarki ponieważ ma swój tooltip zbudowany wokół niego bądź ma

7:18po prostu klientów którzy z tej konkretnej przeglądarki jeszcze korzystają natomiast będzie

7:22to naprawdę ułamek rynku za kilka lat więc

7:27odpowiadając na pytanie czy używać grida moja odpowiedź

7:31brzmi tak biorąc pod uwagę wszystkie problemy z

7:35dostępnością które powoduje biorąc pod uwagę wsparcie przeglądarek

7:39oraz czytelność dla współpracowników którzy po prostu jeszcze z grida

7:43nie korzystali ponieważ jest on dosyć inny w podejściu niż

7:47dotychczasowe techniki tworzenia layoutów w css to wszystko w tej lekcji dzięki za uwagę