Tvorbu webů už jsem před pár lety pověsil definitivně na hřebík, protože jsem pokročil do vyššího levelu. Abych to vysvětlil – nejprve jsem programoval back end, pak front end, pak jsem navrhoval vzhled a dnes už jsem několik let grafik na volné noze, který kreslí co se mu líbí. Ale na weby a programování jsem tak nějak nezanevřel, pořád mě oboje baví a tak si sem tam pro svou vlastní potřebu něco naprogramuju a nastyluju. Samozřejmě pro to používám letité fígle, co jsem se v minulosti naučil. Ale vždy, když začínám něco nového, tak se kouknu, kam pokročil vývoj. Proto mi udělala velkou radost publikace od Martina Michálka – CSS moderní layout s podtitulem Grid, flexbox a nové metody rozvržení webů v příkladech, protože přesně popisuje to, co já bych pracně dohledával na webu.
Je to totiž ideální publikace pro CSS kodéry, kteří nějakou dobu nesledovali vývoj a teď by rádi něco nakódovali za použití aktuálních trendů a nástrojů. Pro použití publikace je důležité mít základní znalosti HTML a kaskádových stylů, kniha totiž popisuje jen novinky ve stylech (a to jen co se týče tvorby layoutu), na zvládnutí základů jsou tu jiné publikace.
Autor se se čtenáři moc nemazlí a hned v první kapitole seznámí čtenáře na jednoduchých ukázkách se třemi systémy pro layout v CSS o kterých bude v knize řeč: Flex, Grid a Multicol. Po ukázkách a srovnání jednotlivých systémů zabrousí také do historie CSS layoutů a to byla část, která se mi hodně líbila. Zavzpomínal jsem na budování prvních stránek pomocí rámů, tabulkového layoutu (td td td…), na éru floatů, kdy jsem se snažil najít a vyladit zlatý grál – layout stránky s bočním sloupcem, hlavičkou a patičkou, který by byl na pixel přesný a fungoval ve všech prohlížečích. Pak už přišla moderní historie s flexem, gridem, Bootstrapem, která už mě minula.
Další kapitoly jsou zaměřené na layoutové dotazy, kterými se řídí stylování stránky pro různě velké šířky obrazovky. Pak už následují příklady použití – devět základních layoutů (boční panel, hromada lívanců, svatý grál, responzivní fotogralerie, mřížka z Bootstrapu, centrování boxů. vyhledávací formulář, galerie bez Media Queries a krkavčí technika) vyřešených pomocí gridu a flexboxu.
Největší část pak zabírají referenční příručky flexboxu, gridu a vícesloupcového layoutu, kde jsou podrobně na ukázkách rozpitvané jejich vlastnosti, podpora v různých prohlížečích a řešení případné nepodpory.
Závěr tvoří kapitoly o zarovnávání boxů, přístupnosti, rychlosti, podpoře v prohlížečích, suvisejících nástrojích a vlastnostech. Prostě takové zbytky, co se nikam nevešly.
Celkově na mě kniha udělala výborný dojem – už od prvního pohledu je vidět, že je kvalitně zpracovaná a že si s její sazbou dal autor velkou práci. Vizuálně je to nádherná kniha – na papíře i v online provedení, ale to je u tohoto autora už standard. Text je skvěle čitelný, autor s nebývalou lehkostí vše dobře vysvětluje a do toho ještě trousí drobné vtípky. Pro snazší pochopení kniha obsahuje spoustu (170!) ukázek a aby si je čtenář nemusel pro vyzkoušení a vlastní bádání pracně přepisovat, jsou všechny kódy přístupné na CodePenu – autor myslel i na badatele, kteří si chtějí styly sami nejprve vyzkoušet, takže tam najdete i výchozí zdrojové kódy HTML bez stylů. Kromě kódu je v knize také velké množství názorných a vizuálně vytuněných obrázků – přece jen jeden obrázek vydá za spoustu slov. Na konci každé kapitoly je jednoduchý kvíz, kde si můžete otestovat, zda jste probíranou látku správně pochopili.
Knížku vřele doporučuji každému, kdo v dnešní době pracuje s kaskádovými styly a kóduje webové stránky, protože obsahuje vše podstatné pro tvorbu moderního layoutu za pomoci kaskádových stylů. Pochopení a použití těchto moderních postupů při tvorbě webů je v dnešní době nezbytné. To co byste pracně hledali na webu je v ní krásně shrnuto, vysvětleno, ukázáno a rozpitváno do nejmenšího detailu. Najdete v ní i některé technologie, které v době psaní (březen 2022) ještě nebyly podporovány (ale vždy je to tam výslovně uvedeno). Mě samotného překvapilo, co vše je již v dnešní době možné nastylovat a hlavně, že to už současné prohlížeče zvládají i správně vykreslit. Složité layouty (co do struktury a responzibility) z minulých let tak jdou zapsat několika řádky CSS kódu.
Hodnocení: 10/10
Martin Michálek: CSS moderní layout; Martin Michálek – VzhůruDolů.cz 2022; ISBN: 978-80-88253-07-5, 439 stran, Papírové brožované vydání 699 Kč, e-book 399 Kč
K dostání na webu vzhurudolu.cz.
