28.11.2022 12:45 Node, Deno, Bun…? S Borkem se vám v těch serverových javascriptových věcech pokoušíme dělat pořádek. Sobě taky. Svět javascriptových runtimů běžících nikoliv v prohlížeči, ale také na serveru, se nám v posledních měsících rozrostl o Bun, který bude soupeřit s již existujícími Node.JS a Deno. V podcastu se mimojiné dozvíte, proč by Borek nejnovější Bun zatím nepoužil, ale proč jej stejně fascinuje, hlavně z pohledu rychlosti. Podcast MP3 ke stažení. Host: Borek Bernard Borek je aktuálně CTO v Shoptetu, ale také člověk, který k naší velké radosti sleduje a veřejně komentuje dění na scéně webových technologií. Z dřívějška jej můžete znát jako zakladatele Versionpressu a historicky také například jako autora knihy o Adobe Flex. Borka najdete mimojiné na LinkedIn nebo Twitteru. O čem mluvíme? Robinův tip: Heroku zdarma končí Martinův tip: Jak WP Optimize podvádí v testech rychlosti Borek Bernard - představení O čem si budeme povídat a proč to bude JS na serveru a proč je to klíčové pro frontendový tooling? Prapůvod: prohlížečové JS runtime Jak jsme se dostali k JS na serveru? Začátky Node.js Node.js - v čem byl jeho příchod revoluční Node.js - proč může být dnes vnímaný jako dinosaurus Odbočka k NPM a Yarn Deno.js, rok 2018, a čeho Ryan Dahl litoval na Node.js Bun, „projekt šíleného vědce” Jarreda Sumnera Bun a sázka na rychlost Bun - co dělá jinak? Shrnutí: proč Borek zatím Bun nepoužije, ale Deno a Node.js rozhodně Odbočka ke Cloudflare Workers Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Pište nám na e-mail podcast@vzhurudolu.cz.
25.11.2022 19:30 Metrika, která udává stabilitu vzhledu stránky během vykreslování. Jedná se o jednu z metrik rychlosti webu, i když v tomto případě bychom mohli mluvit spíše obecněji o metrikách uživatelském zážitku . Metrika Cumulative Layout Shift je velmi důležitá, protože je součástí Core Web Vitals a zohledňuje se v rámci signálů Google Page Experience. CLS udává součet posunů layoutu v rámci nejhoršího pětivteřinového okna během používání stránky. Vašim cílem je tedy zajistit co nejvyšší vizuální stabilitu. Problémy, které řeší Všichni to známe. Stránka vypadá, že je vykreslená… už už se chystáme kliknout… ale v tom se spustí externí skript, posune nám rozvržení a my klikáme na reklamu. Vtipně to popisuje následující video od autorů metriky z Googlu: To, že stránky během vykreslování „poskakují“ není nic nového ani nečekaného. Vyplývá to z asynchronní povahy některých prvků webu. Do stránek se totiž vkládají až po prvotním vykreslení. Potíže může dělat například: webový font, který se nahrazuje systémové písmo, obrázek nebo video bez definovaných rozměrů, komponenta třetí strany, která se vykreslí pozdě a ještě mění velikost špatně provedené animace v CSS Na možné problémy a jejich řešení se ještě v textu podíváme. Nejprve ale něco ke způsobu počítání CLS. CLS skóre Nástroje měřící Cumulative Layout Shift vrací číslo mezi 0 a 1. Čím je hodnota nižší, tím lépe. Z textu o Web Vitals už víte, že metriky mají tři různé intervaly hodnot. Takto je to u CLS: Hodnota LCP Mobil Desktop Dobrá ≤ 0,1 ≤ 0,1 Vyžaduje zlepšení ≤ 0,25 ≤ 0,25 Špatný > 0,25 > 0,25 Vašim cílem tedy je dostat se pod hodnotu 0,1 nebo v horším případě nepřekročit 0,25. V nástrojích Lighthouse nebo PageSpeed Insights se metrika CLS do celkového skóre projevuje váhou 15 %. Obrázek: Metrika CLS. Ideální je samozřejmě měřit CLS na celé skupině vašich návštěvníků, například pomocí Chrome UX Reportu. Ten vám pro vaši doménu vrátí 75. percentil hodnot CLS u všech shlédnutí stránek. Jak se CLS počítá? Cumulative Layout Shift původně představoval součet všech posunů layoutu během celého používání stránky. V roce 2021 se ale výpočet pro potřeby Web Vitals změnil. Autoři z Google to popisují takto: Maximální okno relace omezené na 5 sekund se sekundovou mezerou. No tak díky. Osobně mi trvalo týdny, než jsem tuto definici rozklíčoval. Podívejte se na obrázek a já se vám to pokusím vysvětlit. Obrázek: Nové počítání metriky CLS. Vezme se jen jedno, nehorší okno. Zde Session Window 1. Následuje dekódování šifer: Nechtěné posuny se počítají vždy do oken relací o délce maximálně pět vteřin. Pokud nastane vteřina bez posunů, okno se ukončí dříve než po pěti vteřinách. V rámci celého trvání návštěvy konkrétního URL se pak vybere jen to nejhorší okno . To se uvede jako CLS pro tuto stránku. Tento nový výpočet má zamezit zbytečně velkým hodnotám CLS u návštěv, kde je uživatel dlouho na jednom URL. Myslím, že problém zde byl hlavně s nekonečným scrollováním a podobným kejklemi. Na většinu stránek se tento nový výpočet nijak neprojevil. Pokud by vás snad zajímaly detaily o tom, jak se tato metrika přesně počítá, zavítejte na web.dev, kde to lidé z Googlu rozebírají. Pro potřeby počítání této metriky, ale také vlastních měření vzniká Layout Instability API s rozhraním LayoutShift, které má podporu v prohlížečích vycházejících z Chrome. To jen, pokud by vás to nějak moc zajímalo. Jak to měřit? CLS je možné získat jak ze syntetických měření, tak od reálných uživatelů . Obrázek: Ideální stav. Web layoutstability.rocks vám CLS změří jednoduše a rychle. Jako vždy se i tady mohou výsledky i výrazně lišit, protože nástroje pro syntetická měření umí CLS získat pouze z úvodního načtení stránky, kdežto uživatelská měření obvykle měří celý průběh používání stránky. Výsledky se liší i v rámci nástrojů sledujících reálné uživatele . Náš oblíbený SpeedCurve například počítá CLS také jen pro první viewport. Syntetická měření CLS umí strojově vytáhnout například tyto nástroje: Web layoutstability.rocks PageSpeed Insights WebpageTest Lighthouse Měření uživatelů Data od reálných uživatelů vám poskytnou například následující nástroje: PageSpeed Insights Search Console Chrome User Experience Report Rozšíření pro Chrome „Web Vitals“ JS knihovna web-vitals Na závěr se podíváme na obecné tipy, jak vylepšit špatné CLS. Optimalizace CLS Zamezte poskakování při vykreslování. Zaměřte se na to, abyste v layoutu rezervovali prostor obsahu, který se bude vykreslovat asynchronně – webfontům, obrázkům, videím, komponentám vykreslovaným asynchronním JS: Obrázkům nastavte vždy poměr stran pomocí parametrů width a height. Dalšímu asynchronnímu obsahu jako je video, prvek iframe nebo komponenty vykreslované pomocí JS držte prostor pomocí technik jako je trik s paddingem. Zajistěte, aby vlastní font nezpůsobil při nahrazování výchozího písma výrazné překreslení stránky. Animujte vždy CSS vlastnosti, které se umí renderovat pomocí GPU, takže např. transform:translateY namísto top. Na místo indikátorů načítání používejte tzv. „skeletony“, které napodobují obsah, na který uživatel čeká. Ale buďte s nimi opatrní, špatná implementace skeletonů z mé zkušenosti často CLS ještě zhorší. Fanoušky AMP by mohlo zajímat, že tento framework je stavěný od samých základů tak, aby se CLS rovnalo nebo blížilo nule. Další obecná doporučení v angličtině od Googlu jsou na web.dev. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
24.11.2022 10:00 Kaskádové vrstvy jsou novinka, která webařům umožňuje měnit platnost deklarací bez nutnosti uvádět je na konkrétní místo v CSS souboru a v konkrétním pořadí. Obecně vzato, CSS Cascade Layers poskytují strukturovaný způsob uspořádání stylů. Slouží tak ke zjednodušení práce s kaskádou v CSS a hlavně specificitou selektorů. Dejme si jednoduchý příklad: @layer framework @layer override @layer framework } Vývojářky a vývojáři mohou díky pravidlu @layer vytvářet vrstvy pro reprezentaci výchozích nastavení prvků, knihoven třetích stran, motivů vzhledu nebo komponent. Není přitom nutné přizpůsobovat tomu selektory v rámci jednotlivých vrstev nebo se spoléhat na pořadí zdrojů při řešení konfliktů. Zároveň nám kaskádové vrstvy poskytují možnost přeskupovat pořadí platnosti deklarací: @layer base, framework, override; @layer framework @layer base Podpora této části specifikace CSS Cascade Layers ve všech moderních prohlížečích je plná. To hlavně díky tomu, že prohlížeče aktuálně velmi dobře spolupracují. V textu vám ukážu několik příkladů, jak to pro vás může být užitečné. Nejprve vám ale zkusím vysvětlit, proč si myslím, že kaskádové vrstvy jsou skoro až revolučně užitečné. Věčný boj s kaskádou Už od vzniku CSS před více než více než čtvrt stoletím se uživatelé CSS dělí do dvou skupin. Související „Problémy“ CSS Kaskáda a specificita Dědičnost v CSS Kaskádové vrstvy Selektory v CSS Pseudotřídy v CSS Menší skupina , která CSS miluje i se všemi nedostatky. Ve druhé skupině sedí drtivá většina běžných vývojářů, kteří CSS používají, protože nemají jinou možnost. Kaskádové styly tyto vývojáře více či méně štvou a principy návrhu CSS obvykle nechápou. Dělicí linkou mezi těmito skupinami je často chápání kaskády v CSS a jejich vlastností – dědičnosti, důležitosti a hlavně specificity selektorů. Myslím, že příchod kaskádových vrstev je dobrá zpráva pro tu první skupinu. A skvělá zpráva pro tu druhou. Obvyklý vývoj a hlavně úpravy CSS probíhají v první skupině vývojářek a vývojářů podle metodik, z nichž je pro tyto účely nejdůležitější ITCSS. V druhé skupině se často prostě přidávají deklarace na konec souboru a doufá se, že to pomůže: #content .btn .btn .btn Poznáváte svůj kód? Jenže klíčové slovo !important a důležitost v CSS je určena pro jiné účely, a tudíž tohle je trošku prasárna. No, možná i více než trošku… Řešení s kaskádovými vrstvami je jednoduché. Prostě si jednotlivé části CSS izolujeme do relativně nezávislých vrstev: @layer base } @layer override } Ano, je to přesně tak, kaskáda platí jen uvnitř konkrétních kaskádových vrstev. Rozhoduje jen pořadí vrstev, tak, jak jsou uvedené v CSS nebo jak jej specifikujete na začátku CSS souboru pomocí pravidla @layer. Jeden původ, jeden origin Je dobré akcentovat, že kaskádové vrstvy organizují styly v rámci jednoho původu . V CSS jich může být více – prohlížečové styly, autorské styly , uživatelské styly. Tzn. pomocí @layer nelze například z autorských stylů „vstoupit“ do prohlížečového originu. Příklad s Bootstrapem: bez vrstev V dalším textu vám Cascade Layers představím krok za krokem pomocí jednoduchého příkladu s přestylováním Bootstrapu. Začneme příkladem bez vrstev. Framework nejprve importujeme, pak přestylujeme: @import url ; body .btn Na první pohled nám to přestylování takto půjde dobře. V prohlížeči dostaneme, co jsme chtěli, tedy přebarvené a tlačítko: Problém však nastává při najetí myši na tlačítko . Barva nezůstává taková, jakou jsme nastavili. Důvodem je vyšší specificita původního selektoru: .btn:hover .btn Původní selektor s vyšší specificitou tedy vyhrává a naše změna barvy se neaplikuje. Co s tím? Jak už jsem psal, můžeme to přetížit selektorem stejné nebo vyšší specificity. Můžeme přidat důležitost pomocí !important. Nebo jinak a lépe – můžeme použít kaskádové vrstvy. Příklad s Bootstrapem: vrstvy vrství V další ukázce už jsem použil Cascade Layers a trošku zkomplikoval ty přebíjené vlastnosti: @import url layer ; @layer my-styles } @layer my-base .btn } Jak je vidět, kromě změny barvy pozadí ještě obarvuji rámečky tlačítek na červeno. Najednou to celé funguje. Výše uvedené problémy nevidíme. Specificita selektorů Bootstrapu nás už netrápí, protože se aplikuje jen uvnitř vrstev. Příklad s Bootstrapem: změna pořadí vrstev Můžeme to celé ještě vylepšit. Pravidlo @layer totiž využíváme buď pro vložení deklarací do vrstvy nebo deklaraci pořadí vrstev. To druhé vypadá takto: @layer bootstrap, my-base, my-styles; Deklaraci zbylého kódu necháme v původním pořadí, ale vzhled stránky se změní. Tlačítka nebudou mít červenou barvu rámečku, protože vrstva my-base je přepsaná vrstvou my-styles. Prostě lusknete prsty a všechny bolehlavy s nutností dodržovat pořadí v kódu a hlídat specificitu jsou pryč. Vrstvy vrství a já se raduju. Dávám lajk. Proč vrstvy neexistovaly už před patnácti lety…?! Odbočka k !important Než budeme pokračovat, je potřeba udělat odbočku k další části kaskády. Tou je důležitost pravidel a klíčové slovo !important. Důležitost totiž kromě zvýšení váhy konkrétní deklarace také obrátí pořadí priority. To je velmi důležité. Stejně to funguje také u kaskádových vrstev. Deklarace, kde použijete !important, budou měnit pořadí. Příklad s Bootstrapem: použijeme !important Do našeho příkladu s frameworkem Bootstrap nyní přidáme důležitost: @layer bootstrap, my-base, my-styles; @import url layer ; @layer my-styles } @layer my-base .btn } Vzhledem k pořadí deklarace kódu byste mohli čekat, že tlačítka budou šedivá , ale ony jsou hnědá . Důvodem je obrácené skládání vrstev v případě použití !important. Deklarace z vrstvy my-base prostě dostane přednost, protože je níže než vrstva my-styles. Abych to ještě doplnil o poslední dílek skládačky, v pořadí hrají roli i deklarace neuvedené ve vrstvách: Nejníže deklarace z jednotlivých vrstev podle pořadí, které jste jim nastavili. Uprostřed jsou deklarace nezařazené do vrstev. Nejvýše pak platí deklarace s !important, ovšem v opačném pořadí než jsou uvedené vrstvy. Je to docela galimatyáš, že? Ale má to dobré důvody. Nejlépe to uvidíte na obrázku: Když už nemůžeš, vrstvi víc. Když už nemůžeš vrstvit, přidej důležitost. Připravil jsem k tomuto ještě tři CodePeny. Jsou o praktickém využití nebo spíše trablech přebíjení !important, které nám nadělil Bootstrap. V kódu frameworku najdete tyto řádky: Nechme teď stranou důvody, proč bychom to měli chtít přebíjet ve svém kódu. Řekněme, že opravdu moc chceme. V takovém případě nám ovšem vložení pravidla pro přebití do vrstev nepomůže . Musíme přebíjející pravidlo ponechat mimo vrstvy . Alternativně pak můžeme vrstvy použít, ale vložit přebíjející pravidlo ještě pod styly Bootstrapu: @import my-styles, bootstrap; @import url layer ; @layer my-styles } Vnořování vrstev Alespoň stručně ještě zmíním možnost vnořování vrstev, který rozebírají na skvělém MDN: @layer framework } Podpora v prohlížečích Prohlížeče jsou na tom skvěle, díky za optání. Chrome podporuje @layer od verze 99, Safari od verze 15.4 a Firefox od verze 97. Ke dni psaní tohoto textu, což je listopad 2022, je tedy podpora dostupná ve všech moderních prohlížečích. Více je jako vždy na caniuse.com/css-cascade-layers. Závěr Vrstvy jsou skvělý nástroj, který nám umožní vytvářet kaskádové styly, které budou přehlednější a také snadněji udržovatelné. Jsou navržené tak, aby mohly způsobit revoluci v organizaci CSS. Zároveň je možné je použít tak, aby se vůbec nezměnila naše běžná práce. Taky je možné, že se běžná práce kodérů vůbec nezmění a @layer se stane něčím, co se používá jen ve výjimečných případech. Rozdíly mezi teorií a praxí jsou totiž v oblasti organizace CSS velmi časté. Tak či tak – mám z přítomnosti vrstev v CSS velkou radost a věřím, že vám pomohou, stejně tak jako vám doufám pomohl i tento článek. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
21.11.2022 16:17 Změny ve vývoji prohlížečů, zase to Safari, Railway oriented TypeScript, parties na WebExpu, nové vlastnosti v HTML, verzování CSS a jeho výhody, Cascade Layers a ITCSS, JS promisy, Remix, JAMstack… probrali jsme toho opravdu hodně. Tentokrát bylo to natáčení ale opravdu speciální. Viděli jsme se poprvé na živo a s publikem, v malém kině Lucerna, hned po skončení WebExpo 2022. Nebylo to osobní setkání po čtyřech letech natáčení trošku zvláštní? Podcast Dále: MP3 ke stažení, audiozáznam na YouTube. O čem mluvíme? Martin a jeho příspěvek o Compat 2021 a Interop 2022 Změny ve vývoji Safari Robinův Railway Oriented JavaScript Lidi na WebExpu: Češi vs. zahraniční návštěvníci Novinky v HTML jako dialog. Atomizace našich oborů. Sleduje někdo vůbec novinky v HTML? Proč by se CSS zase mělo začít verzovat? Vzpomínáme na CSS3 Potřebujeme vlastně ještě nativní UI elementy jako je právě dialog ? CSS Cascade Layers a taky metodika ITCSS Promisy v JavaScriptu a JAMstack, Next, Gatsby, Remix… je toho hodně a co vybrat? Důležitost Developer Experience Co bude další velká věc na frontendu? Konec Sassu, WebAssembly… Těšíme se na viděnou na dalším WebExpu, a to 19. - 21. dubna 2023! Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Pište nám na e-mail podcast@vzhurudolu.cz.
21.11.2022 16:17 Vlastností contain označujeme části stránky, které jsou izolované od zbytku. Izolujeme je proto, aby prohlížeč nemusel při změnách překreslovat celou stránku. Ušetříme tím výkon na stránkách s komplexním DOMem. Prohlížeče se už dlouho různými způsoby snaží nepřepočítávát vzhled celé stránky při každé změně samy. Kromě toho existují kodérské triky, jak to udělat v běžném CSS . No a relativně novou možností je použít pro tyhle účely vlastnost contain. → Celá problematika „CSS Containmentu“ je nejzajímavější ve vlastnosti content-visibility, ale silně se využívá také v Container Queries. Dva příklady Vlastnost contain může ušetřit čas potřebný pro vykreslování hlavně v případech, kdy DOM obsahuje tisíce uzlů. Následující příklady proto berte jako schématické a hodně zjednodušené. Přidání prvku do DOMu Tuhle ukázku jsem převzal z dokumentace od Googlu. Máme následující HTML: Home About Contact A teď JavaScriptem přidáme nový prvek: Home About Check me out! Contact Přidání nového prvku spouští rovnou tři kroky procesu překreslování – styl, layout a paint. Blbé ovšem je, že se ten proces spouští pro celý DOM a celou stránku. Může pak pomoci přidání vlastnosti contain. Ilustrační obrázek: Čas potřebný pro fázi layout můžeme snížit díky omezení na konkrétní boxík menšímu počtu prvku k přepočítání. Zdroj developers.google.com. Podívejme se ještě na jednu ukázku. Výpis článků mimo viditelnou část obrazovky Vezměme, že na stránce máme stovky či tisíce položek typu články, produkty nebo třeba tweety. Většinu z nich uživatelé neuvidí v prvním vykresleném viewportu. Zároveň jde o samostatné a izolované prvky, které se se zbytkem stránky nijak vzájemně neovlivňují. Takhle může vypadat jejich výpis ve stránce: Articles … … Představme si, že prvků jsou zde stovky a zároveň mají složitou vnitřní DOM strukturu. Pomocí vlastnosti contain můžeme prohlížeč informovat, ať tyto prvky vyjme z celkového vykreslování stránky: article Prohlížeči tak dáváme instrukci, že prvky .element, které „nevidí“ ve viewportu může v klidu vynechat z počítání vzhledu celé stránky. Ušetříme tím v některých situacích slušný renderovací čas. Typy „containmentu“ Zatím se mi nepovedlo najít vhodné české slovíčko pro teorii, o které se ve specifikaci mluví jako o „CSS containmentu“. Jde o soběstačné a nezávislé zapouzdření prvku, což je ale poněkud kostrbaté označení. Známe čtyři typy zapouzdření, které jsou zároveň možné hodnoty vlastnosti contain: Hodnota contain Typ zapouzdření size Zapouzdření pro velikost. Prohlížeči říkám, že velikost prvku nijak neovlivní jeho potomci. Pokud nastavíme contain:size, je potřeba v CSS také tomuto prvku nastavit nějakou velikost. Jinak prohlížeč počítá, že velikost je nulová, což nechceme. Zapouzdření velikosti samo o sobě zase tak moc výkonu při renderování neušetří. inline-size Zapouzdření pro „inline“ velikost. Totéž jako size jen pro změny velikosti na vodorovné ose. layout Zapouzdření pro rozvržení. Říkáme tím, že se layout potomků prvku a zbytku stránky nijak vzájemně neovlivňují. Díky tomu může při zápise contain:layout prohlížeč vynechat počítání layoutu vnitřních prvků elementu a zaměřit se jen na prvek, který tuto vlastnost má nastavenou. paint Zapouzdření pro vykreslení. Informujeme tímto, že žádný vnitřní prvek nevyčnívá ze svého rodiče. Uvedení contain:paint prohlížeči umožňuje potenciálně přeskočit vykreslení potomků, pokud je prvek mimo obrazovku. style Zapouzdření pro styly. Říkáme, že ovlivněný prvek vyjímáme z počítání hodnot napříč dokumentem, které provádějí vlastnosti jako counter-increment, counter-set nebo quotes. Hodnoty vlastnosti contain jde kombinovat, takže můžete například uvést contain: style paint. Speciální hodnoty Za účelem zjednodušení problematiky pro nás, autory webů, přichází specifikace se speciálními hodnotami vlastnosti contain: Hodnota contain Typ zapouzdření strict Všechny typy zapouzdření, kromě stylů. Totéž jako zápis contain: size layout paint. content Všechny typy zapouzdření, kromě stylů a velikosti. Totéž jako contain: layout paint. Hodnota strict ušetří prohlížeči více času, ale zase musíme znát a definovat velikost prvku. Jak to použít v praxi? Pojďme se zde vrátit k druhé ukázce – renderování desítek či stovek článků mimo viditelnou část obrazovky: Pokud bychom použili contain:content, nemusíme definovat výšku jednotlivých bloků. Na druhou stranu bude prohlížeč při prvním vykreslení považovat výšku za nulovou a nevykreslí například správně velká rolovátka. Pokud bychom použili contain:strict, prohlížeči musíme výšku sdělit, ale zase nenastane přepočítání velikosti rolovátka. Vlastnost contain vytváří nové kontexty Pokud containment použijete s hodnotami paint, strict nebo content vytvoří se nové kontexty, které je možné dělat i jinými metodami v CSS: Nový obsahující blok – pro potomky, jejichž vlastnost position je absolute nebo fixed, takže něco jako position:relative. Nový kontext stohování , ve kterém můžete nezávisle na zbytku stránky umísťovat prvky do vrstev pomocí z-index. Nový kontext formátování bloku , který například umí obsáhnout vnitřní prvky umístěné pomocí float nebo zakáže spojování vnějších okrajů . Využít containment, konkrétně například contain:content, tedy můžete i v případě, že nechcete šetři výkon, ale usnadnit si kodérskou práci. Podpora je plná Vlastnost contain nepodporuje Internet Explorer, což vůbec nevadí. Všechny moderní prohlížeče v containmentu jedou s námi. Viz také CanIUse.com Odkazy Pokud vás problematika containmentu zajímá více, zde je pár tipů k dalšímu studiu: Vlastnost content-visibility, která z containmentu vychází. MDN: CSS Containment, vlastnost contain. Smashing Magazine: Helping Browsers Optimize With The CSS Contain Property Za připomínky autor děkuje Michalovi Matuškovi. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
02.11.2022 07:45 Půl roku od vydání se má kniha „CSS: moderní layout“ čile k světu. Dostávám na ni výborné ohlasy a e-book nebo tištěnou verzi si koupily už stovky z vás. Jak je u mě zvykem, přišel čas na aktualizaci e-booku a vypuštění tištěné knihy do světa. Nyní se s ní, kromě Vzhůru dolů, můžete vidět také v knihkupectvích. CSS: moderní layout, verze 1.1 Jak už někteří víte, každý e-book vždy několikrát aktualizuji. Jednak proto, abych opravil chyby, ale také proto, abych přidal nový obsah. Co nového jsem připravil pro verzi 1.1? Přidal jsem hodně obsahu o Container Queries a novou podkapitolu o související vlastnosti contain. Opravil jsem několik chybek, které jste mi hlásili , a aktualizoval informace o podpoře CSS vlastností v prohlížečích, která se u zmíněných vlastností pěkně zlepšuje, protože prohlížeče spolupracují. Úplně jsem předělal proces generování formátů EPUB a MOBI, takže to teď bude svižnější při načítání v pomalejších čtečkách. Pokud e-book už máte koupený, už jste dostali zprávu o vydání nové verze s odkazem na její stažení. Pro majitele e-booků je to zadarmo. Držitelé nových licencí rovnou dostanou verzi 1.1. Knížka dorazila do knihkupectví Po prázdninách jsem dle plánu ukončil exkluzivitu prodeje tištěné knihy přes svoje Vzhůru dolů. Tištěnou knihu si teď můžete osahat, prolistovat, nebo dokonce koupit v internetových i kamenných knihkupectvích. Kosmas je hlavní zdroj a zároveň distributor knihy. Po alternativních prodejcích se porozhlédněte nejlépe na Heuréce. Chcete mi pomoci? Budu vděčný za každý váš ohlas v e-mailu nebo recenzi, ideálně na webu některého z knihkupců či na Databázi knih. Více o knize
