CSS: Wady i zalety grida

0:00W tej lekcji postaram się podsumować to

0:02wszystko co tutaj w tempie ekspresowym mówiliśmy w kontekście gnida.

0:06No i tak na prawdę powiem o jego wadach i zaletach.

0:10Ja tutaj będę też miał na myśli dużo rzeczy takich jak dostępność ponieważ jest

0:14to naprawdę ważny temat i zachęcam do zapoznania się z nim.

0:18Jeżeli chcesz rozwijać się dalej jako

0:20frontem deweloper bądź jako generalnie web developer

0:24generalnie CSS grid jest całkiem dobrym rozwiązaniem jeżeli chodzi o dostępność

0:30pod warunkiem że pamiętamy o jego ograniczeniach czy po prostu o tym

0:35na czym polega dostępność w kontekście HTML CSS i skryptu.

0:40Ja Początkowo miałem mieszane uczucia co do GRID.

0:43Obawiałem się że jest on straszny dla dostępności.

0:46Na szczęście nie jest to aż tak duży

0:48problem jeśli pamiętamy o kilku prostych zasadach.

0:52Na przykład tutaj mamy bardzo analogiczną sytuację do poprzedniej

0:55lekcji gdzie ustaliliśmy elementy na naszej siatce przy pomocy GRID kryteriach.

1:01No i ustaliliśmy je tak aby Heller

1:04zajmował trzy pierwsze kolumny jeden wiersz kontent zajmował dwie na dwie

1:09wiersze i kolumny obok tego był Exit o wysokości dwóch wierszy.

1:14No i tak samo futer.

1:15Analogicznie do HD

1:17pełna szerokość naszego portu czy po prostu kontenera i jeden wiersz

1:24to rozwiązanie obecne z tym automatycznym

1:27ustawianiem pozostałych elementów nie jest niedostępne.

1:30Czyli jest w porządku.

1:32Problem pojawiłby się wtedy kiedy

1:35elementy które ustawiamy w ten sposób nie były zgodne z tym jak są wyświetlane w KP

1:42czyli ten sam problem który omawialiśmy przy okazji Flex i orderu.

1:46Tutaj jest potęgą.

1:48Jeżeli nie wiemy co robimy.

1:50Przykładowo jeżeli screen reader czytał by naszą treść to on tak czy siak niezależnie

1:55od tego jak ona będzie generowana będzie ją czytał.

1:59Tak jak ona jest w Arkadii czyli najpierw

2:01przeczyta się Jedynka Dwójka Trójka Czwórka piątka szóstka itd.

2:05I tu jest dobrze ponieważ.

2:08My Europejczycy czytamy treść.

2:11Od lewej do prawej od góry do dołu.

2:13Natomiast w innych krajach niekoniecznie jest to przypadek.

2:16Jeżeli my zaczęliśmy to czytać wizualnie już nie patrząc na Marka

2:21no to faktycznie pierwsza rzecz która rzuca się w oczy to jest ta jedynka.

2:24Drugą rzeczą która chwyci naszą uwagę jest dwójka trójka może mniej chwyta naszą

2:29uwagę ale czytając od lewej do prawej faktycznie jest w dobrej kolejności

2:33czwórka no i następne są zgodnie ze swoją pozycją w KP.

2:37Jeśli natomiast mielibyśmy to w ten sposób że to nie ten 1 2 3 4 są przypisane jako

2:44Cherry content i czy futer no to ten problem już niestety się nam tutaj okaże.

2:51Czyli jeśli zrobimy sobie 5 9

2:55Jedynkę i Trójkę.

2:59No to screen Rider.

3:01Tak czy siak będzie czytał i cała

3:03nawigacja generalnie czy to klawiaturą czy to

3:07za pomocą innych.

3:09Technologia stojących będzie

3:11odbywała się zgodnie z Markiem czyli użytkownik czytnika ekran nowego a

3:17przypominam że to nie są jedynie osoby niewidome czy w pełni niepełnosprawne.

3:22Ja np.

3:23korzystam ze Screen lidera jeżeli czytam treści w innym języku i chce się tego

3:27języka też po prostu nauczyć no bo jest tam wymowa

3:31lepsza no i mogę czytać sobie jakieś tam artykuły w obcym języku

3:35więc Screen przeczytał by

3:38najpierw jedynkę czyli ten pomarańczowy Box potem we dwójkę czyli ten zielony Box.

3:44Potem w ogóle musielibyśmy zeskanować.

3:47O przepraszam tutaj nie zauważyłem tutaj

3:49trójkę czeka więc mam przeskok najpierw drugi wiersz potem czwarty wiersz potem

3:54trzeci wiersz więc nie zgadza się zupełnie z tym jak my czytamy naturalnie treści

4:01tekstowe czy po prostu dokumenty na stronach WWW.

4:05W związku z czym to jest ten sam problem

4:07który był w przypadku CSS Xboxa tylko że był olbrzymi ponieważ łatwiej jest zepsuć.

4:14Tą spójność między tym jak marka AP jest

4:17wyreżyserowany a tym jak on jest wyświetlany na stronie.

4:22Już nie będę nawet wspominał o sytuacjach

4:23gdzie pojedyncza dany element wystrzelił wystrzelił.

4:28Na koniec czy początek sekcji danego elementu.

4:31Pomimo tego że jest wręcz kierowany w taki a nie inny sposób.

4:36Jeżeli zależy nam na dobru naszych

4:39użytkowników i nie tworzymy aplikacji dysk topowych.

4:44Takich które.

4:46Powiedzmy są firmą czyli po prostu

4:48aplikacją do tworzenia designu przez specjalistów którzy oczywiście też to

4:53narzędzie powinno być jak najbardziej dostępne.

4:55Ale wiadomo że niestety w świecie biznesu

4:58nie zawsze jest na to czas i są inne priorytety.

5:00Ale jeżeli tworzymy bloga e-commerce dostępność jest naprawdę rzeczą podstawową

5:07i my jako specjaliści naszego fachu powinniśmy brać to pod uwagę.

5:11Dodatkowo CSS Grid ma dużo innych zalet dostępności jak np.

5:15SAP GRID.

5:15Sam trend jest wspierany niestety w tym momencie tylko i wyłącznie na Firefox PKN

5:22możemy wejść odwiedzić od razu SAP Great.

5:27No i widzimy że niestety jego wsparcie jest naprawdę nie najlepsze.

5:30Firefox też nie ma największego udziału w rynku.

5:33Tylko trzy i pół procenta całego globalnego ruchu.

5:38Natomiast.

5:40Jeśli GRID zostanie.

5:43Lepiej wspierane przez wszystkie przeglądarki wtedy będziemy mieli świetne

5:47narzędzie do tworzenia dostępnych rozwiązań.

5:49Ponieważ niezależnie od tego jak nasz marka będzie wyglądał ile będzie jeżdżenia

5:55czy to będzie znacznik Finger czy to będzie jakaś legenda

5:59będziemy w stanie regulować te elementy wzdłuż tej samej jednej siatki.

6:04Ja o tym mówię też więcej w tym osobnym kursie ogrodzie o którym już wspominałem.

6:10Natomiast to co chciałem tutaj powiedzieć nie taki GRID straszny w kontekście

6:14dostępności ale trzeba pamiętać o tych jego wadach.

6:18No i trzeba pamiętać że jest to po prostu

6:19narzędzie nie trzeba wszędzie tego grilla wciskać jeżeli nie ma to sensu.

6:23W niektórych sytuacjach CSS Flex Box sprawdzi się lepiej a w niektórych będzie

6:28trzeba zrobić tak naprawdę haka z pozycjonowania.

6:31Absolutnym o którym też dowiemy się w kolejnej części tego kursu dzięki.

6:36I do zobaczenia w kolejnej lekcji.