Prije otprilike 15 godina radio sam u tvrtki u kojoj smo izrađivali aplikacije za putničke agente, radnike u zračnim lukama i zrakoplovne kompanije. Također smo izgradili vlastiti interni okvir za komponente korisničkog sučelja i mogućnosti aplikacije na jednoj stranici. Imali smo komponente za sve: polja, gumbe, kartice, raspone, podatkovne tablice, izbornike, birače datuma, odabire i višestruke odabire. Imali smo čak i div komponentu. Usput, naša div komponenta je bila izvrsna, omogućila nam je da radimo zaobljene kutove na svim preglednicima, što, vjerovali ili ne, nije bilo lako napraviti u to vrijeme.
Naš rad odvijao se u trenutku naše povijesti kada su se JS, Ajax i dinamički HTML smatrali revolucijom koja nas je dovela u budućnost. Odjednom smo mogli dinamički ažurirati stranicu, dobiti podatke s poslužitelja i izbjeći navigaciju na druge stranice, što se smatralo sporim i bljeskalo velikim bijelim pravokutnikom na ekranu između dviju stranica. Postojao je izraz koji je popularizirao Jeff Atwood (osnivač StackOverflowa), a koji je glasio: “Svaka aplikacija koja se može napisati u JavaScriptu na kraju će biti napisana u JavaScriptu.”— Jeff Atwood
Nama se u to vrijeme ovo činilo kao izazov da stvarno krenemo i kreiramo te aplikacije. Osjećao sam se poput općeg odobrenja raditi sve s JS-om. Dakle, sve smo radili s JS-om i nismo baš odvojili vrijeme za istraživanje drugih načina za obavljanje stvari. Nismo baš osjećali poticaj da ispravno naučimo što HTML i CSS mogu učiniti. Web zapravo nismo u cijelosti doživljavali kao platformu za aplikacije koja se razvija. Uglavnom smo to vidjeli kao nešto što trebamo zaobići, posebno kada je u pitanju podrška za preglednik. Mogli bismo jednostavno ubaciti još JS-a da obavimo stvari. Bi li mi pomoglo izdvajanje vremena da saznam više o tome kako web funkcionira i što je dostupno na platformi? Naravno, vjerojatno sam mogao obrijati hrpu koda koji uistinu nije bio potreban. Ali, u to vrijeme, možda ne toliko. Vidite, razlike u preglednicima tada su bile prilično značajne. To je bilo vrijeme kada je Internet Explorer još uvijek bio dominantan preglednik, s Firefoxom koji je bio drugi, ali je počeo gubiti tržišni udio zbog Chromea koji je brzo stjecao popularnost. Iako su se Chrome i Firefox prilično dobro složili oko web standarda, okruženja u kojima su se izvodile naše aplikacije značila su da smo morali podržavati IE6 dugo vremena. Čak i kad nam je bilo dopušteno podržavati IE8, morali smo se nositi s mnogo razlika između preglednika. I ne samo to, već web tog vremena jednostavno nije imao toliko mogućnosti ugrađenih izravno u platformu.
Brzo naprijed do danas. Stvari su se strahovito promijenile. Ne samo da imamo više ovih mogućnosti nego ikad prije, već se povećala i stopa kojom postaju dostupne. Dopustite mi da ponovno postavim pitanje: Bi li vam danas pomoglo izdvajanje vremena da saznate više o tome kako web funkcionira i što je dostupno na platformi? Apsolutno da. Naučiti razumjeti i koristiti web platformu danas vam daje veliku prednost u odnosu na druge programere. Bilo da radite na performansama, pristupačnosti, odzivu, svima njima zajedno, ili samo isporučujete značajke korisničkog sučelja, ako to želite učiniti kao odgovoran inženjer, poznavanje alata koji su vam dostupni pomaže vam da brže i bolje postignete svoje ciljeve. Za neke stvari možda više nećete trebati knjižnicu Znajući što preglednici danas podržavaju, pitanje je, dakle, što možemo odbaciti? Trebamo li div komponentu za izradu zaobljenih kutova u 2025.? Naravno, nemamo. Svojstvo border-radius u ovom trenutku podržavaju svi trenutno korišteni preglednici više od 15 godina. A kutni oblik također dolazi uskoro, za još ljepše kutove. Pogledajmo relativno nove značajke koje su sada dostupne u svim glavnim preglednicima i koje možete koristiti za zamjenu postojećih ovisnosti u svojoj bazi koda. Poanta nije odmah odbaciti sve svoje voljene biblioteke i ponovno napisati svoju bazu koda. Što se tiče svega ostalog, prvo ćete morati uzeti u obzir podršku preglednika i odlučiti na temelju drugih čimbenika specifičnih za vaš projekt. Sljedeće značajke implementirane su u tri glavna motora preglednika (Chromium, WebKit i Gecko), ali možda imate različite zahtjeve za podršku preglednika koji vas sprječavaju da ih odmah upotrijebite. Ipak, sada je još uvijek dobro vrijeme da naučite o tim značajkama i da ih možda planirate koristiti u nekom trenutku. Prozori i dijalozi Popover API, HTML element
Naravno, vjerojatno se povećala i brzina vaše internetske veze, ali to nije slučaj za sve. A nemaju svi ni iste mogućnosti uređaja. Povlačenje koda treće strane za stvari koje možete učiniti s platformom, umjesto toga, najvjerojatnije znači da šaljete više koda i stoga dosežete manje kupaca nego inače. Na webu loša izvedba učitavanja dovodi do velikih stopa napuštanja i šteti ugledu robne marke. Pokretanje manje koda na uređajima Nadalje, kod koji isporučujete na uređaje svojih kupaca vjerojatno će raditi brže ako koristi manje JavaScript apstrakcija na vrhu platforme. Vjerojatno je i osjetljiviji i pristupačniji prema zadanim postavkama. Sve to dovodi do većeg broja i sretnijih kupaca. Provjerite godišnji blog mog kolege Alexa Russella o jazu u nejednakosti u učinku, koji pokazuje da vrhunskih uređaja uglavnom nema na tržištima s milijardama korisnika zbog nejednakosti u bogatstvu. A taj jaz s vremenom samo raste.
Tlocrt ugrađenog zida Jedna značajka web platforme koja uskoro dolazi i zbog koje sam jako uzbuđen je CSS Masonry.
Dopustite mi da počnem s objašnjenjem što je masonerija. Što je masonerija Zidanje je vrsta rasporeda koju je Pinterest učinio popularnom prije mnogo godina. Stvara neovisne zapise sadržaja unutar kojih se stavke pakiraju što bliže početku zapisa.
Mnogi ljudi vide Masonstvo kao izvrsnu opciju za portfelje i galerije fotografija, što svakako može. Ali Masonry je fleksibilniji od onoga što vidite na Pinterestu i nije ograničen samo na rasporede poput vodopada. U zidanom rasporedu:
Staze mogu biti stupci ili redovi:
Tragovi sadržaja ne moraju svi biti iste veličine:
Stavke mogu obuhvaćati više zapisa:
Stavke se mogu postaviti na određene staze; ne moraju uvijek slijediti algoritam automatskog postavljanja:
Demo snimke Evo nekoliko jednostavnih demonstracija koje sam napravio koristeći nadolazeću implementaciju CSS Masonry u Chromiumu. Demonstracija fotogalerije koja pokazuje kako stavke (u ovom slučaju naslov) mogu obuhvatiti više zapisa:
Još jedna fotogalerija koja prikazuje staze različitih veličina:
Izgled web-mjesta s vijestima s nekim stazama širim od drugih, a neke stavke obuhvaćaju cijelu širinu izgleda:
Kanban ploča koja pokazuje da se stavke mogu postaviti na određene staze:
Napomena: Theprethodne demo verzije napravljene su s verzijom Chromiuma koja još nije dostupna većini korisnika weba jer se CSS Masonry tek počinje implementirati u preglednike. Međutim, web programeri već godinama rado koriste biblioteke za stvaranje zidarskih izgleda. Mjesta koja danas koriste zidarstvo Doista, masonerija je danas prilično česta na webu. Evo nekoliko primjera koje sam pronašao osim Pinteresta:
I još nekoliko, manje očitih primjera:
Dakle, kako su ovi izgledi stvoreni? Zaobilazna rješenja Jedan trik koji sam vidio je korištenje Flexbox izgleda umjesto toga, mijenjanje njegovog smjera u stupac i postavljanje da se prelomi. Na ovaj način možete postaviti predmete različitih visina u više neovisnih stupaca, ostavljajući dojam zidanog izgleda:
Postoje, međutim, dva ograničenja s ovim rješenjem:
Redoslijed stavki razlikuje se od onoga što bi bio s pravim zidarskim rasporedom. Uz Flexbox, stavke prvo popunjavaju prvi stupac, a kada je pun, idu na sljedeći stupac. S Masonryjem, predmeti bi se slagali u onom tragu (ili stupcu u ovom slučaju) koji ima više slobodnog prostora. Ali također, i možda još važnije, ovo zaobilazno rješenje zahtijeva da postavite fiksnu visinu Flexbox spremnika; inače ne bi došlo do omatanja.
Masonske biblioteke trećih strana Za naprednije slučajeve programeri su koristili biblioteke. Najpoznatija i najpopularnija biblioteka za ovo jednostavno se zove Masonry, a preuzima se oko 200 000 puta tjedno prema NPM-u. Squarespace također nudi komponentu izgleda koja prikazuje masonski raspored, kao alternativu bez koda, a mnoge je stranice koriste. Obje ove opcije koriste JavaScript kod za postavljanje stavki u izgled. Ugrađeno zidanje Zaista sam uzbuđen što se Masonry sada počinje pojavljivati u preglednicima kao ugrađena CSS značajka. S vremenom ćete moći koristiti Masonry baš kao što koristite Grid ili Flexbox, to jest, bez potrebe za zaobilaznim rješenjima ili kodom treće strane. Moj tim u Microsoftu implementirao je ugrađenu podršku za Masonry u projektu otvorenog koda Chromium, na kojem se temelje Edge, Chrome i mnogi drugi preglednici. Mozilla je zapravo bila prvi dobavljač preglednika koji je predložio eksperimentalnu implementaciju Masonryja još 2020. godine. A Apple je također bio vrlo zainteresiran da ovaj novi web izgled postane primitivan. Rad na standardizaciji značajke također napreduje, uz dogovor unutar CSS radne grupe o općem smjeru, pa čak i novom tipu prikaza: rešetkastim trakama. Ako želite saznati više o zidarstvu i pratiti napredak, pogledajte moju stranicu s CSS masonerskim resursima. S vremenom, kada Masonry postane značajka Baseline, baš poput Grida ili Flexboxa, moći ćemo ga jednostavno koristiti i imati koristi od:
Bolja izvedba, Bolji odziv, Jednostavnost korištenja i jednostavniji kod.
Pogledajmo ih pobliže. Bolja izvedba Izrada vlastitog sustava rasporeda nalik zidarstvu ili korištenje biblioteke treće strane umjesto toga znači da ćete morati pokrenuti JavaScript kod za postavljanje stavki na zaslon. To također znači da će ovaj kôd blokirati prikaz. Doista, ili se ništa neće pojaviti, ili stvari neće biti na pravim mjestima ili pravih veličina, sve dok se taj JavaScript kôd ne pokrene. Zidani raspored često se koristi za glavni dio web-stranice, što znači da bi kôd učinio da se vaš glavni sadržaj pojavi kasnije nego što bi inače mogao biti, degradirajući vaš LCP ili metriku slikanja najvećeg sadržaja, koja igra veliku ulogu u percipiranoj izvedbi i optimizaciji tražilice. Testirao sam biblioteku Masonry JS s jednostavnim izgledom i simulacijom spore 4G veze u DevTools. Biblioteka nije velika (24 KB, 7,8 KB gzipano), ali bilo je potrebno 600 ms za učitavanje pod mojim testnim uvjetima. Ovdje je snimka izvedbe koja pokazuje dugo vrijeme učitavanja od 600 ms za biblioteku Masonry i da se nijedna druga aktivnost renderiranja nije dogodila dok se to događalo:
Osim toga, nakon početnog vremena učitavanja, preuzetu skriptu trebalo je analizirati, kompajlirati i zatim pokrenuti. Sve to, kao što je prije spomenuto, blokira renderiranje stranice. Uz ugrađenu implementaciju Masonryja u pregledniku, nećemo imati skriptu za učitavanje i pokretanje. Motor preglednika samo će učiniti svoje tijekom početnog koraka prikazivanja stranice. Bolji odziv Slično kao kada se stranica prvi put učitava, promjena veličine prozora preglednika dovodi do ponovnog renderiranja izgleda na toj stranici. Međutim, u ovom trenutku, ako stranica koristi biblioteku Masonry JS, nema potrebe ponovno učitavati skriptu jer je većovdje. Međutim, kod koji premješta stavke na prava mjesta mora se pokrenuti. Čini se da je ova određena biblioteka prilično brza u tome kada se stranica učitava. Međutim, animira stavke kada se trebaju premjestiti na drugo mjesto pri promjeni veličine prozora, a to čini veliku razliku. Naravno, korisnici ne troše toliko vremena na promjenu veličine prozora preglednika koliko mi programeri. Ali ovo iskustvo animiranog mijenjanja veličine može biti prilično uznemirujuće i povećava percipirano vrijeme koje je potrebno da se stranica prilagodi novoj veličini. Lakoća upotrebe i jednostavniji kod Koliko je jednostavno koristiti web-značajku i koliko jednostavno kôd izgleda važni su čimbenici koji mogu napraviti veliku razliku za vaš tim. Oni, naravno, nikada ne mogu biti važni kao konačno korisničko iskustvo, ali iskustvo programera utječe na mogućnost održavanja. Korištenje ugrađene web značajke donosi važne prednosti na tom planu:
Programeri koji već poznaju HTML, CSS i JS najvjerojatnije će moći lako koristiti tu značajku jer je dizajnirana da se dobro integrira i bude dosljedna s ostatkom web platforme. Ne postoji rizik od pokvarenih promjena koje se uvode u način korištenja značajke. Postoji gotovo nula rizika da ta značajka postane zastarjela ili da se ne održava.
U slučaju ugrađenog Masonryja, budući da je to primitivan raspored, koristite ga iz CSS-a, baš kao Grid ili Flexbox, bez uključenog JS-a. Također, druga CSS svojstva povezana s izgledom, kao što je praznina, rade onako kako biste očekivali. Ne postoje trikovi ili zaobilazna rješenja o kojima treba znati, a stvari koje naučite dokumentirane su na MDN-u. Za Masonry JS lib, inicijalizacija je pomalo složena: zahtijeva atribut podataka s specifičnom sintaksom, zajedno sa skrivenim HTML elementima za postavljanje veličina stupaca i razmaka. Osim toga, ako želite obuhvatiti stupce, morate sami uključiti veličinu razmaka kako biste izbjegli probleme:
Usporedimo ovo s onim kako bi izgledala ugrađena implementacija Masonryja:
Jednostavniji, kompaktniji kod koji može koristiti samo stvari kao što je razmak i gdje se spajanje staza vrši s rasponom 2, baš kao u mreži, i ne zahtijeva da izračunate pravu širinu koja uključuje veličinu razmaka. Kako znati što je dostupno i kada je dostupno? Općenito, pitanje nije trebate li koristiti ugrađeni Masonry umjesto JS knjižnice, već kada. Masonry JS biblioteka je nevjerojatna i već godinama popunjava prazninu u web platformi i za mnoge sretne programere i korisnike. Ima nekoliko nedostataka ako ga usporedite s ugrađenom implementacijom Masonryja, naravno, ali one nisu važne ako ta implementacija nije spremna. Lako mi je navesti ove cool nove značajke web platforme jer radim za dobavljača preglednika i stoga znam što dolazi. Ali programeri često govore, anketa za anketom, da je teško pratiti nove stvari. Teško je biti informiran, a tvrtke ionako ne daju uvijek prioritet učenju. Kako bismo vam pomogli u tome, evo nekoliko izvora koji pružaju ažuriranja na jednostavne i kompaktne načine kako biste mogli brzo dobiti potrebne informacije:
Web platforma sadrži web mjesto za istraživanje: Mogla bi vas zanimati stranica s bilješkama o izdanju. A, ako vam se sviđa RSS, provjerite sažetak sadržaja s bilješkama o izdanju, kao i osnovni izvor novodostupnih i široko dostupnih izvora.
WebNadzorna ploča statusa platforme: Mogli bi vam se svidjeti njegove različite stranice o osnovnim godinama.
Stranica s planom statusa platforme Chrome.
Ako imate malo više vremena, možda će vas zanimati i napomene o izdanju dobavljača preglednika:
Chrome Rub Firefox Safari
Za još više resursa pogledajte moju tablicu za navigaciju web platformom. Moja stvar još uvijek nije implementirana To je druga strana problema. Čak i ako nađete vremena, energije i načina za praćenje, još uvijek postoji frustracija zbog toga što se vaš glas čuje i implementiraju vaše omiljene značajke. Možda ste godinama čekali da se određeni bug riješi ili da se određena značajka pošalje u preglednik u kojem još uvijek nedostaje. Ono što ću reći je da proizvođači preglednika slušaju. Dio sam nekoliko međuorganizacijskih timova u kojima cijelo vrijeme razgovaramo o signalima i povratnim informacijama programera. Proučavamo mnoge različite izvore povratnih informacija, kako unutarnje kod svakog dobavljača preglednika, tako i vanjske/javne na forumima, projektima otvorenog koda, blogovima i anketama. I uvijek pokušavamo stvoriti bolje načine za programere da dijele svoje specifične potrebe i slučajeve korištenja. Stoga, ako možete, zahtijevajte više od dobavljača preglednika i vršite pritisak na nas da implementiramo značajke koje su vam potrebne. Shvaćam da treba vremena, a može biti i zastrašujuće (da ne spominjem visoku prepreku ulasku), ali također djeluje. Evo nekoliko načina na koje možete postići da se vaš (ili glas vaše tvrtke) čuje: Ispunite godišnje ankete o stanju JS-a, stanju CSS-a i stanju HTML-a. Oni igraju veliku ulogu u tome kako dobavljači preglednika daju prioritet svom radu. Ako trebate određeni API temeljen na standardima koji će se dosljedno implementirati u svim preglednicima, razmislite o podnošenju prijedloga u sljedećoj iteraciji Interop projekta. Zahtijeva više vremena, ali razmislite o tome kako su Shopify i RUMvision podijelili svoje popise želja za Interop 2026. Detaljne informacije poput ove mogu biti vrlo korisne za dobavljače preglednika za određivanje prioriteta. Za više korisnih veza za utjecaj na dobavljače preglednika pogledajte moju tablicu za navigaciju web platformom. Zaključak Za kraj, nadam se da vam je ovaj članak ostavio nekoliko stvari za razmišljanje:
Uzbuđenje za Masonry i druge nadolazeće web značajke. Nekoliko web značajki koje biste mogli početi koristiti. Nekoliko dijelova prilagođenog koda ili koda treće strane koje biste mogli ukloniti u korist ugrađenih značajki. Nekoliko načina da pratite što dolazi i utječete na dobavljače preglednika.
Još važnije, nadam se da sam vas uvjerio u prednosti korištenja web platforme u punom potencijalu.
