Swego czasu zrobiłem recenzję kursu HTML od WebKod.pl. Obiecałem w niej, iż za miesiąc
wkrótce pojawi się także recenzja kursu CSS. Cóż, trochę czasu od tego minęło, ale oto w końcu nadszedł ten moment!
Uwagi ogólne
Pierwsze, co rzuca się w oczy, to daty dodawania i aktualizacji poszczególnych lekcji. Lekcja tłumacząca, czym jest CSS, została dodana w 2012 roku, a zaktualizowana w 2020. W przypadku technologii webowych 3 lata to jednak dość sporo. Zwłaszcza w CSS-ie. Od 2020 pojawiło się sporo nowości, upowszechniły i ustabilizowały się też eksperymentalne wówczas ficzery, wśród których warto wspomnieć:
- container queries (zapytania kontenerowe),
- cascade layers (kaskadowe warstwy),
- nowe systemy kolorów, w tym m.in. OkLab,
- nowe media queries (zapytania mediów), np. prefers-reduced-motion, które pozwalają wykrywać preferencje użytkownika,
- nowa składnia media queries,
- zagnieżdżanie,
- nowe pseudoklasy, takie jak :where(), :is() czy w końcu :has(), oferujący potężne możliwości, z których „selektor rodzica” to tylko wierzchołek góry lodowej.
Można by jeszcze długo wymieniać. Jak już wspominałem w przypadku kursu HTML, WebKod.pl strukturą treści mocno przypomina encyklopedię – jest mocno nastawione na opis poszczególnych elementów języka. I tutaj pojawia się problem, bo sporej liczby z tych elementów po prostu tutaj nie ma. W tym względzie WebKod.pl z kretesem przegrywa z MDN, które jest nieustannie aktualizowane i poprawione. Na dobrą sprawę ten kurs CSS to kurs CSS-a z okolic 2017-2020 roku. Po nowsze rzeczy trzeba sięgnąć do innych źródeł. To samo w sobie niekoniecznie jest problemem, ale sporo z rzeczy, które weszły w ostatnim czasie do CSS-a, może całkowicie zmienić sposób, w jaki ten język jest używany. Mogą zmienić się dobre praktyki, przez co techniki przedstawiane w tego typu kursach będą stawać się coraz bardziej anachroniczne.
Zresztą tę anachroniczność już w kursie widać. W wielu miejscach pojawiają się uwagi dotyczące wsparcia Internet Explorera – czy to jako osobna lekcja, czy jako fragmenty w innych lekcjach. Dajmy w końcu tej przeglądarce umrzeć! Oprócz Internet Explorera straszą też choćby przedrostki, które lata temu zostały zastąpione sensowniejszymi sposobami (np. flagami w przeglądarkach). W końcu: w kursie jest rózróżnienie między „starym” CSS-em a nowym CSS3. Problem w tym, iż takie rozróżnienie od lat już praktycznie nie funkcjonuje. CSS3 też, jako taki, nigdy nie istniał.
Z encyklopedycznym podejściem mam też inny problem: sporo tutaj wiedzy czysto teoretycznej, brakuje jednak praktyki. Dość oczywistym wyborem w kursach HTML-a czy CSS-a byłoby tworzenie jakiegoś projektu, w którym używać można by poznanych rzeczy. Tutaj czegoś takiego brakuje. Owszem, przy poszczególnych rzeczach są podane przykłady, ale są od siebie całkowicie niezależne, nie składają się w jedną spójną całość. Osobiśćie raczej poszedłbym w kierunku pokazania mniejszej liczby różnych elementów CSS-a, ale za to właśnie jako część procesu tworzenia jednego, większego projektu. Choć muszę oddać kursowi CSS, iż jest tutaj zdecydowanie lepiej niż w kursie HTML, bo dwa działy poświęcone są tutaj tworzeniu menu – pionowego i poziomego. Aczkolwiek chciałoby się, żeby było to wszystko bardziej zintegrowane ze sobą – w kursie HTML robimy szkielet strony, a w kursie CSS go upiększamy.
Co ciekawe, mimo dosyć sporej encyklopedyczności kursu (zwłaszcza działu I), do kursu dołączony jest leksykon CSS-a. I od razu rzuca się w oczy to, jak mało zawiera treści. W zakresie leksykonów ficzerów sieciowych MDN już na tyle odjechało konkurencji, iż raczej można uznać tę wojnę za przegraną i po prostu tam odsyłać.
Oprócz ogólnego rzutu okiem, pozwoliłem sobie wybrać po 2 lekcje z I i IV działu kursu oraz po 1 z II i III (łącznie 6 lekcji) i przyjrzeć się im nieco dokładniej.
Dział I – Zagadnienia CSS
Dodatkowy element HTML
Ta lekcja opisuje sposób działania pseudoelementów ::before i ::after. I tutaj pojawia się pierwszy zgrzyt – w leksykonie są opisy różnych selektorów i w nim te pseudoelementy zapisane są jako ::before i ::after. W samym kursie jednak używana jest składnia :before i :after – a więc składnia przestarzała.
Oprócz tego lekcja dobrze opisuje, w jaki sposób działają te pseudoelementy. Niemniej w żadnym miejscu nie pada ta magiczna nazwa, jest używane ogólne określenie selektor. To dziwne przeoczenie, ponieważ nazwa pseudoelement funkcjonuje normalnie w środowisku. Tym bardziej, iż dość dobrze oddaje, jak takie ::before i ::after się zachowują: tworzą niby-element.
CSS3 – @media queries
Na samym początku znajduje się tabelka zawierająca typy mediów z CSS 2. Haczyk polega na tym, iż to wersja wzięta ze specyfikacji CSS 2. w tej chwili mamy CSS 2.2 i tam tabelka wygląda nieco inaczej (typ aural wyleciał do osobnej, opcjonalnej sekcji jako przestarzały, a został dodany typ speech). Co więcej, w trakcie tworzenia kursu istniało już CSS 2.1, w którym typu aural już nie było. Swoją drogą, fajnie byłoby, jakby w kursie pojawiały się źródła do takich rzeczy.
Przy omawianiu atrybutu media dla elementów link pojawia się informacja, iż przeglądarka nie ściągnie arkuszu, jeżeli warunki określone w media query nie są spełnione. To nie jest prawda. Takie arkusze zostaną ściągnięte, ale w sposób nieblokujący (czyli niejako w tle) i z niskim priorytetem (czyli wtedy, gdy przeglądarka będzie miała „wolną chwilę”). Powód jest dość prozaiczny. Część warunków określonych w media queries (np. @media (orientation: landscape)) może zacząć być spełniane w trakcie interakcji użytkownika ze stroną. Często wystarczy, iż obróci ekran, powiększy stronę czy zmieni rozmiar okna przeglądarki. Dlatego przeglądarki wolą takie arkusze ściągnąć i mieć przygotowane na wszelki wypadek.
W lekcji znajduje się też tabelka z tzw. media features (funkcjami mediów). Są to po prostu możliwości i własności urządzenia/przeglądarki użytkownika (np. szerokość viewportu). Tutaj media features nazywane są dodatkowymi adekwatnościami dla reguł @media. Prawdę mówiąc, bardziej pasuje mi określenie warunki niż adekwatności. Zwłaszcza, iż słowo adekwatności ma już swoje znaczenie w CSS-ie. Z kolei sama tabelka jest mocno niekompletna. Brakuje m.in. wspomnianych zapytań o preferencje użytkownika czy typ wskaźnika.
Brakuje też opisu nowej składni, która w wielu wypadkach może znacząco uprościć formę media query.
W lekcji wspomniane jest też, iż operatora only można użyć, żeby ukryć media queries przed starymi przeglądarkami. Faktycznie, to działało… w czasach Internet Explorera 9. w tej chwili przydatność tego operatora jest mocno ograniczona, bo praktycznie nie istnieją na rynku przeglądarki go nie rozumiejące. Wspomina o tym sama specyfikacja.
Dział II – Pionowe Menu CSS
Wygląd elementów „a” po użyciu pseudoklasy :hover
Jedyne, do czego mógłbym się tutaj przyczepić, to fakt, iż jest opisana tylko pseudoklasa :hover. Tymczasem linki mają więcej stanów. Fajnie byłoby opisać je wszystkie. Co prawda są one opisane w leksykonie CSS, ale tam znajduje się tylko ich suchy opis, bez większego kontekstu.
Dział III – Poziome Menu CSS
Kontrolowanie rozwijanej części poziomego menu CSS
Pokazane menu rozwijane działa tylko i wyłącznie po najechaniu kursorem myszy. Nie istnieje sposób, żeby dostać się do podmenu przy pomocy klawiatury. Ten problem można spróbować rozwiązać przy pomocy pseudoklasy :focus-within, łapiącej elementy, wewnątrz których w tej chwili jest focus. Dzięki temu elementy listy, wewnątrz których jest jakieś podmenu, mogą zachować „rozwinięte” style, gdy użytkownik focusuje jakiś link wewnątrz tego podmenu. Dobrze to widać na przykładzie – jeżeli wejdzie się Tabem do submenu, to to się nie zamyka. Robi to dopiero, gdy wyjdzie się poza submenu. Niemniej to i tak nie jest idealny sposób i raczej sięgnąłbym po menu rozwijane kliknięciem (które już jednak wymaga JS-a).
Oprócz tego warto jeszcze raz zwrócić uwagę na nieoptymalne selektory, np. selektor #menu > li > ul > li > a jest zdecydowanie za długi. Można choćby nadać klasy wszystkim elementom. Wówczas ten selektor można by zastąpić prostym .submenu__link lub podobnym. Klasa ma dodatkowo tę przewagę, iż całkowicie oddziela kod CSS od istniejącej struktury HTML. Dzięki temu moożna zmienić strukturę menu bez potrzeby zmieniania CSS-a.
Dział IV – Freestyle CSS
CSS – Layout HTML dla każdej rozdzielczości
Tutaj bardzo wyraźnie wychodzi przestarzałość kursu. Przedstawiony layout jest bowiem zbudowany przy pomocy float. Od czasów popularyzacji flexboksa, a następnie grida, nie ma absolutnie żadnego powodu, aby stosować stareńkiego floata do czegoś innego, niż to, do czego został stworzony – opływania obrazków. Zaproponowany layout można wykonać przy pomocy grida.
Natomiast zaproponowany na końcu sposób z display: table-cell raczej uznałbym w tej chwili za ciekawostkę. Grid mimo wszystko oferuje zdecydowanie większe możliwości, niż udawanie, iż nasze elementy są tabelkami.
No i warto tutaj zwrócić uwagę na stosowanie selektora identyfikatora, co niekoniecznie jest dobrą praktyką.
Pzeznaczenie jednostki „em”
W tej lekcji pojawia się dość popularny błąd: stwierdzenie, iż jednostka em odnosi się do wielkości fonta rodzica. Dokładniej opisywałem to w recenzji RekrutacjiFrontend.pl. W skrócie: jednostka em zawsze odnosi się do wielkości fonta elementu, na którym jej używamy. Wystarczy założyć, iż dziedziczenie rozmiaru fonta następuje przed obliczeniem wartości wyrażonych w em. Dzięki temu cały algorytm działania tej jednostki zdecydowanie się upraszcza i nie trzeba tłumaczyć, kiedy zachowuje się, jakby była obliczana na podstawie wielkości fonta rodzica, a kiedy – na podstawie wielkości fonta aktualnego elementu. Tutaj ten problem widać przy opisie wykorzystania em we własności line-height.
Podsumowanie
W gruncie rzeczy mam dwa główne problemy z tym kursem. Pierwszy z nich to jego przestarzałość. Jak wspominałem na początku, kurs ten zatrzymał się w okolicach 2017 roku. I to widać po tym, co i w jaki sposób opisują poszczególne lekcje. A raczej: czego nie opisują. I tych nieopisanych rzeczy będzie z czasem tylko przybywać.
Drugi problem to suchość – czyli brak jakiegoś spójnego kontekstu dla poszczególnych lekcji. Widać to zwłaszcza w dziale I, w którym są opisane różne adekwatności CSS-a, ale nie powstaje z tego żaden większy projekt. Co prawda jest tutaj i tak zdecydowanie lepiej niż w kursie HTML, bo w kolejnych działach powstają jakieś małe komponenty. Ale brakuje mi czegoś w stylu Ok, zrobimy pełnoprawną stronę internetową, podczas tworzenia której poznamy różne elementy HTML i własności CSS-owe!.
Gdybyśmy mieli 2016, to to byłby dobry kurs. Ale, niestety, mamy 2023.
