27.09.2022 13:30 Když si prolistujete historii Vzhůru dolů, asi nebude potřeba zdůrazňovat, že WebExpo je pro mě srdeční záležitost. Letošní ročník je pro mě však velmi speciální. Alespoň trochu jsem participoval skoro na každém ročníku, během 10. - 12. června 2022 bude ale můj rukopis znát více než obvykle. Věřím, že WebExpo 2022 bude speciální pro celou českou frontendovou komunitu. Hned vám řeknu proč. Spolupráce komunity Frontendisti.cz a WebExpo Po loňském online FrontKonu jsme letos chtěli uspořádat živou konferenci komunity frontendistek a frontendistů. Pracovali jsme ve štábu s různými variantami, ale nakonec přijali nabídku Šárky Štrossové, aby naše konference byla součástí WebExpa. Řeknu vám, proč si myslím, že to je pro české a slovenské frontendisty dobrá zpráva. V prvé řadě: konference bude, to samo o sobě není zlé. :) Za druhé: organizačně bude akce obstarána profi týmem WebExpa a to na úžasném místě, v kině Lucerna v centru Prahy. No a v neposlední řadě: cílem spolku Frontendisti.cz je nejen komunitu vzdělávat, ale také propojovat. WebExpo je pro tyto účely ideální. Jednak je prostředí konference výborné pro networking a jednak přijede řada lidí ze zahraničí, ale také řada designérů, marketérů, webových manažerů… WebExpo má letos samá frontendová lákadla V tu chvíli se prostě centrum Prahy stane místem pro popovídání s někým, kdo věci vidí jinak a uvažuje jinak. Místem pro vzájemnou inspiraci. Výsledkem naší spolupráce je sobotní část programu, která má název Collab with Frontendisti.cz. Z programu, který jsme pečlivě sestavovali ze spousty přihlášených přednášek a na základě zkušeností s FrontKonem, vybírám následující oblasti: JS frameworky: React 18 Features od Břeti Profta a Terezy Vaňkové nebo Remix Run od Martina Macháčka . JavaScript: Promises Rikiho Fridricha a Railway Oriented Typescript Robina Pokorného. CSS a HTML: Cascade Layers, které představí Ondřej Žára a HTML can do that? Tomáše Pustelníka . Rychlost webu zastupuje Michal Matuška a jeho optimalizace Web Vitals pomocí webfontů. Svět CMS: JAMstack - Ondřej Polesný a State of CMS - Honza Sládek . Nestačí to? Mrkám na účastníky FrontKontu, kteří vědí že na místě vás 11. června ještě čeká několik překvapení. Vstupné na naši část programu je výrazně nižší než na celou konferenci. Nyní stojí 125 €. Doufám, že se vám náš program bude líbit. Ale zvažte také koupi lístku na celou konferenci. Další program WebExpo Pokud jde o program mimo sekci frontendistů, asi nejvíc mě zaujala jedna přednáška a jedna diskuze: Simple Machine Learning For Web Developers: From Theory To Practice O strojovém učení bych se strašně rád dozvěděl více, ale vždycky to na mě bylo trošku „heavy“. Vyslal jsem dotaz autorovi přednášky a odpověď mě nalákala: …pro nezkušené bude k dispozici několik živých, online hostovaných ukázek, např. rozpoznávání ručně psaných písmen nebo detekce objektů na fotografii. Ty fungují bez jakéhokoli backendu, jen v prohlížeči, takže diváci mohou k těmto ukázkám přistupovat ze svých mobilních zařízení a hrát si s nimi, aby pochopili možnosti neuronových sítí na straně frontendu. Tuhle přednášku tedy nemůžu minout. Roundtable Discussion: How To Find Time For Technical Improvements Problém, který řešíme při konzultacích k rychlosti webu snad u většiny klientů. Jak na to všechno najít u vývojářů čas, když jsou tlačení do přidávání nových vlastností produktu? Jsem zvědavý, s čím přijde tato diskuze. Pavel Kalandra mi napsal tento první tip z Mews: Když připravujeme workload na nějaký čas dopředu, plánujeme produktovou roadmapu zvlášť od technické roadmapy. Takže máme garantované určité procento času, kde si pak tech lead sám určí, co je pro něho největší priorita. I tuto páteční diskuzi tedy přidávám do programu. A co další lákadla WebExpa? Když se podíváme na frontend a okolí, je toho hodně. Shrnu to do odrážek: Vitaly Friedman o designu složitých rozhraní. Prabashwara Seneviratne o vývoji her pomocí HTML. Tom Krcha o produktovém řízení, např. pro Adobe XD. Michal Sänger o GraphQL na velkých projektech. Runa Sandvik o technologiích, které podporují svobodu slova . Jan Toman a jeho Data-Informed Design Systems. Podívejte se také na workshopy – o frontendu, UX, přístupnosti, ale také například bezpečnosti. No a nemohou chybět parties a program pro děti, na který se těší i naši kluci. Jako vždy i letos můžete využít 15 % slevu na konferenční vstupenku. Kód je vzhurudolu. Ahoj 10. - 12. června na WebExpu!
27.09.2022 13:30 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.
24.09.2022 18:45 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: .
22.09.2022 01:15 Google na každoroční konferenci pro vývojáře mnohé oznámil a leccos ukázal. Akci jako celek nesleduji, ale během ní a po ní si ze záznamů a ohlasů na socsítích vyzobávám to, co mě nejvíc zajímá – frontend, a tedy HTML, CSS, performance a občas trochu JavaScript. Mám pocit, že letos to bylo docela velké. A hlavně se jedna podstatná věc změnila – prohlížeče si méně konkurují a více spolupracují. Alespoň z pohledu webového vývojáře. Proč na Vzhůru dolů píšu zrovna o letošním ročníku? Letos jsem se rozhodl, že se o ty novinky musím podělit i s vámi, čtenáři Vzhůru dolů. Jednak zde vnímám dluh, protože jsem se téhle konferenci zde ještě přímo nevěnoval. Ale ten bezprostřední impulz k sepsání byl jiný. Nejspíš patřím mezi nejstarší frontendisty v Česku. Nás, starochy, spojuje obvykle jedna věc – povyk kolem nových technologií a kolem nových úžasných možností prohlížečů nás nechává relativně chladnými. Už jsme to zažili mnohokrát a to také u technologií, které se prostě neujaly. Zdá se mi ovšem, že Google I/O 2022 vcelku slušně vyhajpoval i relativně klidného Michálka. Novinek, zejména kolem CSS, je strašně moc a navíc bych řekl, že mnoho z nich může být onen pověstný „game-changer“. Vezměme třeba Container Queries, selektor „rodiče“ :has nebo Cascade Layers . Už jen tato trojice pravděpodobně výrazně změní způsob, jak píšeme styly, pričemž zdaleka nejde o osamocené novinky v CSS. Když jsem pátral po příčinách implementace tolika novinek a zároveň v tolika prohlížečích najednou, musel jsem skončit u Rachel Andrew. Tolik novinek a podpora v prohlížečích k tomu. Díky Compat 2021 a Interop 2022! Vývojáři prohlížečů totiž prakticky poprvé v historii spolupracují, aby vyřešili nekompatibility v podpoře webových technologiích. Loni byla výstupem iniciativa Compat 2021, která pomohla vyřešit nepříjemné rozdíly v implementaci gridu a flexboxu – a například také přidat použitelnost vlastnosti gap ve flexboxu. Letošní iniciativa Interop 2022 má za úkol sladit priority ve vývoji a je domluveno, že prohlížeče co nejdříve naimplementují tyto vlastnosti: Color spaces & CSS color functions - pro míchání barev známé ze Sassu, color-contrast - pro automatický výběr správně kontrastní barvy) Jednotky pro viewport Scrollování Subgrid CSS Containment Už se naopak povedlo naimplementovat následující: Cascade layers accent-color bfcache Vlastnost size-adjust Je toho více a vypadá to opravdu zajímavě. Podstatné je, že skupina lidí sdružená v této iniciativě stanovuje prioritizaci vývoje technologií i na základě průzkumů mezi vývojáři , což je myslím docela silný důvod se takových dotazníkových šetření zúčastnit. Průběžný vývoj můžete sledovat na webu Interop 2022 Dashboard. Mimochodem, aktuálně tam skóring vede Safari, což je už několikátý signál o velkých změnách ve vedení vývoje tohoto zaostávajícího prohlížeče. Abych to shrnul – vývoj specifikací a jejich implementací v prohlížečích byl překotný po celou dobu zhruba poslední dekády. Změnilo se to, že výrobci prohlížečů synchronizují priority v implementaci. My vývojáři z toho budeme profitovat tak, že důležité novinky uvidíme v krátké době ve všech moderních prohlížečích. Co mě na Google I/O dále zaujalo? Tohle měl být stručný článek, takže si toho hodně budu muset nechat pro sebe. Nebo víte co? Ty další zajímavosti zde uvedu alespoň na jedné malé číslované hromádce. K rychlosti: Video, jak optimalizovat metriku LCP. Nová metrika Interaction to Next Paint , která asi jednou nahradí FID. Video o jejím vzniku. Rozšířená realita v brýlích v kombinaci s překladačem umožňuje lidem povídat si spolu. Twitter. Chrome na Androidu umožní při platbách kartou generovat jednorázové číslo. Twitter. Page Transitions umožní animovat přechody mezi stránkami, tohle je fakt cool! Video. Google pak důležité novinky shrnuje v článku. Co zaujalo vás? Napište na Twitter nebo Facebook Vzhůru dolů. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
20.09.2022 16:15 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.
20.09.2022 16:15 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: .
15.09.2022 05:00 Milé čtenářky, milí čtenáři, dnes vydávám svou novou knihu pojmenovanou „CSS: moderní layout“. Pusťte se s její pomocí do moderních metod, které vám ušetří spoustu času a poskytnou nové možnosti jak tvořit design webů. Z původně zamýšleného e-booku o CSS gridu se po dvou a půl letech práce stal komplexní průvodce všemi systémy tvorby layoutu ve stylech – gridem, flexboxem, zarovnávání boxů a vícesloupcovým rozvržením. To vše představuji na 440 stranách tištěné knihy. V knize je 170 ukázek v CodePenech a 11 příkladů nakódovaných v podobě tutoriálu. Vše doplňují desítky ilustrací, které v barevném tisku vypadají výborně a mám z nich obzvlášť radost. Mou ambicí bylo vytvořit skutečně komplexní příručku, kterou doufám ocení i zkušenější mezi vámi. Knihu „CSS: moderní layout“ si můžete objednat hned teď: Kniha s e-bookem stojí 899 Kč s DPH a poštovným. Tištěnou knihu můžete mít do několika pracovních dní za 699 Kč. E-book v PDF, EPUB a MOBI lze mít hned za 399 Kč. Těším se, co na ni řeknete! Zdraví vás Martin Michálek
