od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerWeb dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!
Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.
CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.
Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.
Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!
Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.
Cześć, w tej lekcji opowiem ci troszkę o
progressive enhancement, czyli w wolnym tłumaczeniu - postępowym ulepszaniu.
Generalnie progressive enhancement
można stosować do praktycznie wszystkich zagadnień współczesnego web developmentu.
No, bo jakby mamy tutaj tą podstawową
rozdzielność, na froncie przynajmniej, pomiędzy HTMLem, CSSem i JavaScriptem.
No i progressive enhancement
ma na celu
upewnienie się, że my tworząc nasze oprogramowanie
będziemy tworzyli je w sposób optymalny bądź bliski optymalności
na każdym z tych etapów, tzn.
powinniśmy mieć pewność, że nasze
strony www będą czytelne nawet wtedy, jeśli
nie mamy CSSa czy JavaScriptu, ale warstwa HTMLa powinna być OK.
Na co to się przekłada?
Otóż jesteśmy w stanie przy pomocy, na przykład, rozszerzenia Web Developer dla
Google Chrome wyłączyć sobie wszystkie style CSSa.
I
kilka kliknięć i widzimy jak nasza strona
jest czytana tak naprawdę, jeśli ten CSS się nie załaduje - to jest jeden
scenariusz, kiedy takie sytuacje mogą się wydarzyć.
Inny scenariusz to jest faktycznie
jak nasza strona będzie parsowana przez jakieś crawlery czy np.
właśnie Google'owe boty, czy innych wyszukiwarek internetowych.
I jakby taka najprostsza zasada jest taka, że jeżeli ta treść wygląda jakkolwiek OK,
no wiadomo, że bez CSSa nie jest to nic
wystrzałowego,
natomiast jeśli mamy na przykład tutaj punktory, ponieważ to jest lista
i wiemy, że to jest lista, no bo są wypunktowane elementy - tutaj oczywiście ta lista mogłaby
być numerowana i tak naprawdę nie musielibyśmy mieć tutaj tych
numerów na list itemach tylko faktycznie odpowiednią treść,
natomiast przez to, że my
omawialiśmy póki co tylko CSSa, no zrobiliśmy tutaj takie uproszczenie.
No i co dalej? Tak naprawdę możemy sprawdzić, czy nasza
strona nie zawiera żadnych błędnych informacji wyświetlonych.
Czyli czy jakieś elementy, które wstawiliśmy tylko na potrzeby tego,
żeby coś na danej rozdzielczości się pojawiło bądź ukryło, nie jest renderowane
jeśli te CSSy są zupełnie wyłączone. To jest bardzo dobry sposób audytowania stron,
no i on też w kontekście CSSa jest o tyle ważny, ponieważ możemy interpretować
progressive enhancement na innym poziomie. Nie musimy go ograniczać tylko i wyłącznie
do tego, że jeżeli nie ma CSSa, no to nasz HTML musi dobrze wyglądać,
jeżeli nie ma JavaScriptu, no to powinniśmy
mieć natywne fallbacki do naszych treści przy użyciu np.
natywnych formularzy HTML,
ale również możemy robić progressive enhancement
w kontekście konkretnych technologii CSSowych, czyli np.
Display Grid nie jest wspierane na każdej
przeglądarce. Tak jakby CSS ma w swojej naturze to, że jeżeli nie rozumie jakiejś
właściwości, no to ją ignoruje, no i nie renderuje jej zupełnie.
W związku z czym
są sytuacje, że nasz kod nie będzie działał wszędzie tak jak powinien,
ale powinien
nasz site, nasza strona internetowa wyglądać i działać jak najlepiej
jest to możliwe. Więc progressive enhancement
dobrze tutaj się zazębia z faktem po prostu fallbacków CSSowych
i tworzenia naszych stron internetowych w taki sposób, aby działały na jak
najszerszej gamie produktów - produktów w kontekście urządzeń.
No i jesteśmy też w stanie wyłączyć pojedyncze ficzery (en. features) CSSa, np.
przy pomocy
rozszerzenia CSS Features.
I jeśli wyłączymy sobie tutaj Grid Layout to widzimy faktycznie jak nasza strona by się
zachowywała, jeśli nasza przeglądarka by tego nie wspierała, więc nie ma tutaj
konieczności odwiedzania faktycznie stron z Internet Explorera,
żeby w jakiś sposób to sobie zasymulować.
O tym będę mówił też w kolejnych kursach i
dlatego zarzucam tutaj temat progressive enhancement, ponieważ jest on
na tyle elastycznym zagadnieniem i na tyle dotykającym wszystkich pojedynczych
elementów tworzenia stron WWW,
że warto po prostu mieć go na uwadze i, być może, nie stosować tylko i wyłącznie do CSSa,
ale zaaplikować też te dobre praktyki do innych działów
front-end developmentu czy web developmentu ogólnie.
W kolejnych lekcjach będę mówił o Fallback styles'ach,
klauzuli Supports czy ogólnie o Pollyfillach i Autoprefixerach.