Asi před 15 lety jsem pracoval ve společnosti, kde jsme vytvářeli aplikace pro cestovní kanceláře, pracovníky letišť a letecké společnosti. Vytvořili jsme také vlastní interní rámec pro komponenty uživatelského rozhraní a možnosti jednostránkové aplikace. Měli jsme komponenty pro všechno: pole, tlačítka, karty, rozsahy, datové tabulky, nabídky, výběry data, výběry a vícenásobné výběry. Měli jsme dokonce i komponent div. Naše komponenta div byla mimochodem skvělá, umožňovala nám dělat zaoblené rohy ve všech prohlížečích, což, věřte nebo ne, v té době nebylo snadné.
Naše práce se odehrála v bodě naší historie, kdy JS, Ajax a dynamické HTML byly považovány za revoluci, která nás přivedla do budoucnosti. Najednou jsme mohli dynamicky aktualizovat stránku, získávat data ze serveru a nemuseli jsme přecházet na jiné stránky, což bylo považováno za pomalé a na obrazovce mezi dvěma stránkami blikal velký bílý obdélník. Byla tam fráze, kterou zpopularizoval Jeff Atwood (zakladatel StackOverflow), která zněla: „Každá aplikace, kterou lze napsat v JavaScriptu, bude nakonec napsána v JavaScriptu.“ — Jeff Atwood
V té době nám to připadalo jako odvaha skutečně jít a vytvořit tyto aplikace. Připadalo mi to jako všeobecný souhlas dělat všechno s JS. Takže jsme dělali všechno s JS a opravdu jsme si neudělali čas na zkoumání jiných způsobů, jak věci dělat. Opravdu jsme necítili pobídku pořádně se naučit, co HTML a CSS umí. Ve skutečnosti jsme web nevnímali jako vyvíjející se aplikační platformu jako celek. Většinou jsme to viděli jako něco, co musíme obejít, zejména pokud jde o podporu prohlížeče. Mohli bychom na to hodit více JS, abychom věci dotáhli do konce. Pomohlo by mi, kdybych si udělal čas a dozvěděl se více o tom, jak web fungoval a co bylo na platformě k dispozici? Jistě, pravděpodobně jsem mohl oholit spoustu kódu, který nebyl skutečně potřeba. Ale v té době možná ne tolik. Víte, rozdíly v prohlížečích byly tehdy docela významné. To byla doba, kdy byl Internet Explorer stále dominantním prohlížečem, přičemž Firefox byl těsně druhý, ale začal ztrácet podíl na trhu, protože Chrome rychle získával na popularitě. Přestože se Chrome a Firefox docela dobře shodovaly na webových standardech, prostředí, ve kterých naše aplikace běžely, znamenalo, že jsme museli IE6 podporovat po dlouhou dobu. I když jsme měli povolenou podporu IE8, stále jsme se museli vypořádat s mnoha rozdíly mezi prohlížeči. Nejen to, ale web té doby prostě neměl tolik funkcí zabudovaných přímo do platformy.
Rychle vpřed k dnešku. Věci se ohromně změnily. Nejenže máme více těchto schopností než kdykoli předtím, ale také se zvýšila rychlost, s jakou jsou dostupné. Dovolte mi znovu položit otázku: Pomohlo by vám, když si uděláte čas a dozvíte se více o tom, jak web funguje a co je na platformě k dispozici? Naprosto ano. Naučit se porozumět a používat webovou platformu dnes vám dává obrovskou výhodu oproti ostatním vývojářům. Ať už pracujete na výkonu, přístupnosti, responzivitě, to vše dohromady nebo jen dodáváte funkce uživatelského rozhraní, pokud to chcete dělat jako odpovědný inženýr, znalost nástrojů, které máte k dispozici, vám pomůže dosáhnout vašich cílů rychleji a lépe. Některé věci, na které už možná nebudete potřebovat knihovnu Když víme, jaké prohlížeče dnes podporují, otázka tedy zní: Co můžeme zavrhnout? Potřebujeme komponent div k vytvoření zaoblených rohů v roce 2025? Samozřejmě, že ne. Vlastnost border-radius je v tuto chvíli podporována všemi aktuálně používanými prohlížeči již více než 15 let. A brzy také přijde tvar rohů pro ještě luxusnější rohy. Pojďme se podívat na relativně nedávné funkce, které jsou nyní dostupné ve všech hlavních prohlížečích a které můžete použít k nahrazení stávajících závislostí ve vaší kódové základně. Nejde o to okamžitě zahodit všechny své milované knihovny a přepsat svou kódovou základnu. Stejně jako u všeho ostatního budete muset nejprve vzít v úvahu podporu prohlížeče a rozhodnout se na základě dalších faktorů specifických pro váš projekt. Následující funkce jsou implementovány ve třech hlavních prohlížečích (Chromium, WebKit a Gecko), ale můžete mít různé požadavky na podporu prohlížeče, které vám brání v jejich okamžitém použití. Nyní je však stále vhodná doba se o těchto funkcích dozvědět a možná je v určitém okamžiku naplánovat. Popovers A Dialogy Popover API, HTML element
Jistě, rychlost vašeho internetového připojení se pravděpodobně také zvýšila, ale to neplatí pro všechny. A ne každý má stejné možnosti zařízení. Stahování kódu třetí strany pro věci, které můžete s platformou dělat, místo toho s největší pravděpodobností znamená, že odesíláte více kódu, a tím oslovujete méně zákazníků, než byste normálně. Na webu vede špatný výkon načítání k velkému počtu opuštění a poškozuje pověst značky. Spuštění méně kódu na zařízeních Kromě toho kód, který odesíláte na zařízení vašich zákazníků, pravděpodobně běží rychleji, pokud na platformě používá méně abstrakcí JavaScriptu. Je také pravděpodobně citlivější a ve výchozím nastavení přístupnější. To vše vede k většímu počtu a šťastnějším zákazníkům. Podívejte se na blog mého kolegy Alexe Russella s každoroční výkonnostní nerovností, který ukazuje, že prémiová zařízení z velké části chybí na trzích s miliardami uživatelů kvůli majetkové nerovnosti. A tato propast se postupem času jen zvětšuje.
Vestavěné uspořádání zdiva Jednou funkcí webové platformy, která bude brzy k dispozici a ze které jsem velmi nadšený, je CSS Masonry.
Dovolte mi začít vysvětlením, co je zednářství. Co je zednářství Zdivo je typ rozvržení, který před lety zpopularizoval Pinterest. Vytváří nezávislé stopy obsahu, ve kterých se položky sbalí co nejblíže začátku stopy.
Mnoho lidí vidí zednářství jako skvělou možnost pro portfolia a fotogalerie, což určitě umí. Masonry je ale flexibilnější než to, co vidíte na Pinterestu, a neomezuje se jen na rozvržení podobná vodopádu. V uspořádání zdiva:
Stopy mohou být sloupcové nebo řádkové:
Skladby obsahu nemusí mít všechny stejnou velikost:
Položky mohou zahrnovat více stop:
Položky lze umístit na konkrétní stopy; nemusí vždy dodržovat algoritmus automatického umístění:
Ukázky Zde je několik jednoduchých ukázek, které jsem vytvořil pomocí nadcházející implementace CSS Masonry v Chromiu. Ukázka fotogalerie, která ukazuje, jak položky (v tomto případě název) mohou zahrnovat více stop:
Další fotogalerie zobrazující tratě různých velikostí:
Rozvržení zpravodajského webu s některými stopami širšími než jinými a některými položkami přes celou šířku rozvržení:
Kanbanová tabule ukazující, že předměty lze umístit na konkrétní dráhy:
Poznámka: Thepředchozí ukázky byly vytvořeny s verzí Chromia, která ještě není dostupná většině uživatelů webu, protože CSS Masonry se teprve začíná implementovat do prohlížečů. Weboví vývojáři však již léta s radostí používají knihovny k vytváření rozvržení zdiva. Stránky využívající zdivo dnes Opravdu, zednářství je dnes na webu docela běžné. Zde je několik příkladů, které jsem našel kromě Pinterestu:
A několik dalších, méně zřejmých, příkladů:
Jak tedy byly tyto rozvržení vytvořeny? Řešení Jeden trik, který jsem viděl, je použít místo toho rozvržení Flexbox, změnit jeho směr na sloupec a nastavit jej na zalomení. Tímto způsobem můžete umístit položky různých výšek do více nezávislých sloupců, což vytváří dojem rozvržení zdiva:
Toto řešení však má dvě omezení:
Pořadí položek se liší od toho, jaké by bylo u skutečného rozvržení zdiva. S Flexboxem položky nejprve vyplní první sloupec, a když je plný, pak přejdou do dalšího sloupce. Se zdivem se položky naskládají do kterékoli stopy (nebo sloupce v tomto případě), kde je k dispozici více místa. Ale také, a to je možná důležitější, toto řešení vyžaduje, abyste nastavili pevnou výšku kontejneru Flexbox; jinak by nedocházelo k ovíjení.
Zednické knihovny třetích stran Pro pokročilejší případy vývojáři používají knihovny. Nejznámější a nejoblíbenější knihovna se jednoduše nazývá Masonry a podle NPM se stahuje asi 200 000krát týdně. Squarespace také poskytuje komponentu rozvržení, která vykresluje rozvržení zdiva, jako alternativu bez kódu, a mnoho webů ji používá. Obě tyto možnosti používají kód JavaScript k umístění položek do rozvržení. Vestavěné zdivo Jsem opravdu nadšený, že se Masonry nyní začíná objevovat v prohlížečích jako vestavěná funkce CSS. Postupem času budete moci používat Masonry stejně jako Grid nebo Flexbox, to znamená, že nebudete potřebovat žádná řešení nebo kód třetích stran. Můj tým v Microsoftu implementoval vestavěnou podporu Masonry v projektu Chromium s otevřeným zdrojovým kódem, na kterém jsou založeny Edge, Chrome a mnoho dalších prohlížečů. Mozilla byla vlastně prvním výrobcem prohlížeče, který v roce 2020 navrhl experimentální implementaci Masonry. A Apple měl také velký zájem na tom, aby se toto nové primitivní uspořádání webu stalo. Práce na standardizaci této funkce také postupují vpřed, s dohodou v rámci pracovní skupiny CSS o obecném směru a dokonce o novém zobrazení typu zobrazení: mřížkové pruhy. Pokud se chcete dozvědět více o zednářství a sledovat pokrok, podívejte se na moji stránku zdrojů CSS zednářství. Až se Masonry stane základní funkcí, stejně jako Grid nebo Flexbox, budeme je moci jednoduše používat a těžit z:
Lepší výkon, Lepší odezva, Snadné použití a jednodušší kód.
Pojďme se na ně podívat blíže. Lepší výkon Vytvoření vlastního systému rozvržení jako zednického nebo použití knihovny třetí strany znamená, že k umístění položek na obrazovku budete muset spustit kód JavaScript. To také znamená, že tento kód bude blokovat vykreslování. Ve skutečnosti se buď nic neobjeví, nebo věci nebudou na správných místech nebo ve správné velikosti, dokud se kód JavaScript nespustí. Rozvržení zdiva se často používá pro hlavní část webové stránky, což znamená, že kód by způsobil, že by se váš hlavní obsah objevil později, než by se jinak mohl zobrazit, což by snížilo vaši metriku LCP neboli Největší obsahové vymalování, které hraje velkou roli ve vnímaném výkonu a optimalizaci pro vyhledávače. Knihovnu Masonry JS jsem testoval s jednoduchým rozložením a simulací pomalého 4G připojení v DevTools. Knihovna není příliš velká (24 KB, 7,8 KB gzipovaná), ale v mých testovacích podmínkách trvalo načtení 600 ms. Zde je záznam výkonu, který ukazuje, že dlouhá doba načítání 600 ms pro knihovnu Masonry a že během toho nedošlo k žádné jiné vykreslovací aktivitě:
Po počáteční době načítání bylo navíc potřeba stažený skript analyzovat, zkompilovat a poté spustit. To vše, jak již bylo zmíněno, blokovalo vykreslování stránky. S vestavěnou implementací Masonry v prohlížeči nebudeme mít skript k načtení a spuštění. Prohlížeč udělá svou věc během počátečního kroku vykreslování stránky. Lepší odezva Podobně jako při prvním načtení stránky vede změna velikosti okna prohlížeče k opětovnému vykreslení rozvržení na této stránce. V tuto chvíli však, pokud stránka používá knihovnu Masonry JS, není nutné skript znovu načítat, protože je jižzde. Je však třeba spustit kód, který přesune položky na správná místa. Nyní se zdá, že tato konkrétní knihovna to dělá docela rychle, když se stránka načte. Položky však animuje, když se potřebují přesunout na jiné místo při změně velikosti okna, což je velký rozdíl. Uživatelé samozřejmě netráví čas změnou velikosti oken prohlížeče tolik jako my vývojáři. Ale tato animovaná změna velikosti může být pěkně rušivá a zvyšuje vnímanou dobu, kterou trvá, než se stránka přizpůsobí své nové velikosti. Snadné použití a jednodušší kód Jak snadné je používat webovou funkci a jak jednoduše kód vypadá, to jsou důležité faktory, které mohou mít velký význam pro váš tým. Nemohou být samozřejmě nikdy tak důležité jako konečný uživatelský dojem, ale vývojářské zkušenosti ovlivňují udržovatelnost. Použití vestavěné webové funkce přináší důležité výhody:
Vývojáři, kteří již znají HTML, CSS a JS, budou s největší pravděpodobností moci tuto funkci snadno používat, protože byla navržena tak, aby se dobře integrovala a byla konzistentní se zbytkem webové platformy. Neexistuje žádné riziko, že by byly zavedeny změny ve způsobu použití funkce. Existuje téměř nulové riziko, že tato funkce bude zastaralá nebo nebude udržována.
V případě vestavěného zdiva, protože jde o primitivní rozložení, jej používáte z CSS, stejně jako Grid nebo Flexbox, bez použití JS. Také další vlastnosti CSS související s rozvržením, jako je mezera, fungují tak, jak byste od nich očekávali. Neexistují žádné triky nebo řešení, o kterých byste měli vědět, a věci, které se naučíte, jsou zdokumentovány na MDN. Pro Masonry JS lib je inicializace trochu složitá: vyžaduje datový atribut se specifickou syntaxí spolu se skrytými HTML elementy pro nastavení velikosti sloupců a mezer. Navíc, pokud chcete překlenout sloupce, musíte sami zahrnout velikost mezery, abyste se vyhnuli problémům:
Porovnejme to s tím, jak by vypadala vestavěná implementace zdiva:
Jednodušší a kompaktnější kód, který může používat pouze věci, jako je mezera a kde se překlenutí stop provádí pomocí rozpětí 2, stejně jako v mřížce, a nevyžaduje, abyste vypočítali správnou šířku, která zahrnuje velikost mezery. Jak zjistit, co je k dispozici a kdy je k dispozici? Celkově otázka nezní, zda byste měli používat vestavěné zednické práce nad knihovnou JS, ale spíše kdy. Knihovna Masonry JS je úžasná a již mnoho let zaplňuje mezeru ve webové platformě a pro mnoho spokojených vývojářů a uživatelů. Má to samozřejmě několik nevýhod, pokud to porovnáte s vestavěnou implementací Masonry, ale ty nejsou důležité, pokud tato implementace není připravena. Je pro mě snadné vyjmenovat tyto skvělé nové funkce webové platformy, protože pracuji u dodavatele prohlížeče, a proto mám tendenci vědět, co přijde. Vývojáři ale často průzkum za průzkumem sdílejí, že sledovat nové věci je těžké. Zůstat informován je obtížné a společnosti stejně ne vždy upřednostňují učení. Abychom vám s tím pomohli, uvádíme několik zdrojů, které poskytují aktualizace jednoduchým a kompaktním způsobem, abyste mohli rychle získat potřebné informace:
Webová platforma obsahuje stránky průzkumníka: Mohla by vás zajímat jeho stránka s poznámkami k vydání. A pokud máte rádi RSS, podívejte se na zdroj poznámek k vydání, stejně jako na kanály Baseline Newly Available a Widely Available.
WebPanel stavu platformy: Mohly by se vám líbit různé stránky základního roku.
Stránka plánu Chrome Platform Status.
Pokud máte trochu více času, mohly by vás také zajímat poznámky k vydání od výrobců prohlížečů:
Chrome Edge Firefox Safari
Pro ještě více zdrojů se podívejte na můj Cheatsheet Navigation the Web Platform. Moje věc stále není implementována To je druhá stránka problému. I když najdete čas, energii a způsoby, jak sledovat, stále je frustrace z toho, jak je slyšet váš hlas a implementovat vaše oblíbené funkce. Možná jste roky čekali na vyřešení konkrétní chyby nebo na dodání konkrétní funkce v prohlížeči, kde stále chybí. Co řeknu, je, že prodejci prohlížečů poslouchají. Jsem součástí několika týmů napříč organizacemi, kde neustále diskutujeme o signálech a zpětné vazbě vývojářů. Díváme se na mnoho různých zdrojů zpětné vazby, jak interních u každého dodavatele prohlížeče, tak externích/veřejných na fórech, open source projektech, blozích a průzkumech. A vždy se snažíme vytvářet lepší způsoby, jak mohou vývojáři sdílet své specifické potřeby a případy použití. Pokud tedy můžete, požadujte od dodavatelů prohlížečů více a tlačte na nás, abychom implementovali funkce, které potřebujete. Chápu, že to vyžaduje čas a může to být také zastrašující (nemluvě o vysoké překážce vstupu), ale také to funguje. Zde je několik způsobů, jak dosáhnout toho, aby byl váš hlas (nebo vaše společnost) slyšet: Zúčastněte se každoročních průzkumů stavu JS, stavu CSS a stavu HTML. Hrají velkou roli v tom, jak dodavatelé prohlížečů upřednostňují svou práci. Pokud potřebujete, aby bylo specifické API založené na standardech implementováno konzistentně napříč prohlížeči, zvažte odeslání návrhu v další iteraci projektu Interop. Vyžaduje to více času, ale zvažte, jak Shopify a RUMvision sdílely své seznamy přání pro Interop 2026. Podobné podrobné informace mohou být pro dodavatele prohlížečů velmi užitečné, aby je upřednostnili. Další užitečné odkazy, jak ovlivnit dodavatele prohlížečů, najdete v mém Cheatsheetu Navigace na webové platformě. Závěr Na závěr doufám, že vám tento článek přinesl několik věcí k zamyšlení:
Vzrušení pro zednářství a další připravované funkce webu. Několik webových funkcí, které možná budete chtít začít používat. Několik kousků vlastního kódu nebo kódu třetí strany, které můžete odstranit ve prospěch vestavěných funkcí. Několik způsobů, jak sledovat, co přichází, a ovlivnit dodavatele prohlížečů.
A co je důležitější, doufám, že jsem vás přesvědčil o výhodách používání webové platformy v jejím plném potenciálu.
