Kurs CSS od WebKod.pl

Swego czasu zrobiłem recenzję kursu HTML od WebKod.pl. Obiecałem w niej, że 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, że 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, że 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, że 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, że 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, że to wersja wzięta ze specyfikacji CSS 2. Obecnie 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, że przeglądarka nie ściągnie arkuszu, jeśli 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, że 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 właściwościami dla reguł @media. Prawdę mówiąc, bardziej pasuje mi określenie warunki niż właściwości. Zwłaszcza, że słowo właściwoś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ż, że operatora only można użyć, żeby ukryć media queries przed starymi przeglądarkami. Faktycznie, to działało… w czasach Internet Explorera 9. Obecnie 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, że 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 obecnie 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śli 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ę, że całkowicie oddziela kod CSS od istniejącej struktury HTML. Dzięki temu moż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 obecnie za ciekawostkę. Grid mimo wszystko oferuje zdecydowanie większe możliwości, niż udawanie, że 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, że 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ć, że 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 właściwoś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.