od Podstaw
4 godz. 7 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerFlexbox nie jest trudny - pod warunkiem, że rozumiemy dlaczego elementy renderują się w konkretny sposób. Do tego potrzebna jest szczegółowa wiedza o osiach flexboxa, o tym jak ustalane są ich kierunki i jak elementy będą układać się wzdłuż nich.Dopiero wtedy dobrze można zrozumieć jak działa rozszerzanie i kurczenie elementów, jak elementy będą zachowywać się przy zmianie rozmiaru okna przeglądarki czy przy przełączaniu wyświetlania z układu wierszy na kolumnowy. To wszystko oraz kilka innych mechanizmów ukrytych we Flexboxie znajdziesz dokładnie wyjaśnione w tym kursie - podgląd przykładów czy dodatkowe quizy po zakończeniu kursu pomogą w utrwaleniu zdobytej wiedzy.
Wielu developerów nie jest świadomych, że korzystanie z niektórych właściwości Flexboxa wpływa na dostępność naszych stron WWW - dostosowywanie naszych witryn pod czytniki ekranowe oraz użytkowników korzystających z witryn w sposób niestandardowy to temat który zyskuje na coraz większej popularności (zwłaszcza, jeśli planujesz kiedyś tworzyć strony rządowe - te są zobligowane do tworzenia stron dostępnych dla osób niepełnosprawnych).W tym kursie, dowiesz się jakie problemy może nieść za sobą używanie flexboxa i jak ich unikać.
Kurs ten jest dla wszystkich osób, które dobrze czują się z CSS - wystarczy podstawowa umiejętność pisania selektorów. Nie ma żadnych wymagań dotyczących JavaScript, czy znajomości konkretnych frameworków. Natomiast jeśli do tej pory korzystałeś/aś z innych, starszych technologii do pozycjonowania elementów i chcesz nauczyć się prostszej, dobrze wspieranej współczesnej technologii - nie trać czasu! Flexbox to idealne wprowadzenie do kolejnych sposobów pozycjonowania jak np. CSS Grid.
Cześć witaj w kolejnej lekcji z kursu flexbox od podstaw w
tym dziale nie będę już przybliżał kolejnych właściwości flexboxa ponieważ
wszystkie poznałeś już w pierwszej części tego kursu natomiast chciałem opowiedzieć troszkę
o rzeczach powiązanych z flexboxem natomiast nie związanych stricte
z jego kodowaniem jeśli chodzi o wsparcie przeglądarek w kontekście flexboxa
to jeśli wejdziemy na stronę caniuse kropka com i wyszukamy
właściwość flexbox to okaże się że globalnie dla flexboxa
100% wsparcie ma 91% użytkowników
natomiast niepełne wsparcie aż 94% tak
to wygląda w kontekście wsparcia globalnego w polsce
wygląda to bardzo podobnie wsparcie szacuje się na około 91%
użytkowników jeśli w twojej firmie będziecie chcieli wspierać takie
przeglądarki jak internet explorer na przykład w wersji 9
wtedy jako graceful degradation możecie użyć stosownych
polyfill'i które będą symulowały zachowania flexbox'a można też dynamicznie
wykrywać czy dana przeglądarka wspiera flexboxa czy nie
i w razie potrzeby doładowywać odpowiedni arkusz styli dedykowanych dla
danej przeglądarki która flexboxa nie wspiera i stworzyć odpowiedni layout na
przykład na float'ach natomiast jest to tylko potrzebne w przypadku kiedy
celujemy w ten ułamek procent użytkowników i są to faktycznie użytkownicy
którzy będą korzystali z naszej witryny zachęcam cię też do odwiedzania takiej
strony jak flex bugs jest to po prostu spis błędów
renderowania się flexboxa na niektórych przeglądarkach jak
i również różne haki obejścia jak
te problemy rozwiązać żeby layout dobrze wyglądał na tej konkretnej
przeglądarce i nie wpływał w żaden negatywny sposób na przeglądarki
na których flexbox działa normalnie ostatnią niezbyt wymagająca
rzeczą którą możesz zrobić aby większe spektrum przeglądarek rozumiało
twój layout napisany we flexie jest skorzystanie z
autoprefiksera i autoprefiksera możesz wpiąć w dowolny
task runner w gulpa są też odpowiednie pluginy
do webpack'a więc ty w kodzie źródłowym będziesz mógł pisać mutacje
skrócone bez prefiksów dla danych vendorów przeglądarek
natomiast kod który będzie generowany będzie już te prefiksy
posiadał więc pamiętaj że nie ma konieczności pisania prefiksów
ręcznie poza tym śmiało używaj flexboxa bo jego wsparcie
jest już zdecydowanie na tyle duże że nie powinieneś mieć problemów z renderowaniem
się stron u swoich klientów