Mga 15 ka tuig na ang milabay, nagtrabaho ko sa usa ka kompanya diin nagtukod mi og mga app para sa mga ahente sa pagbiyahe, mga trabahante sa airport, ug mga kompanya sa ayroplano. Nagtukod usab kami sa among kaugalingon nga sulud sa balay alang sa mga sangkap sa UI ug mga kapabilidad sa usa ka panid nga app. Adunay kami mga sangkap alang sa tanan: mga natad, butones, tab, range, datatable, menu, datepicker, pili, ug multiselect. Naa pa gani mi div component. Ang among div component maayo kaayo, kini nagtugot kanamo sa paghimo sa mga rounded corners sa tanan nga mga browser, nga, motuo kini o dili, dili sayon buhaton niadtong panahona.
Ang among trabaho nahitabo sa usa ka punto sa among kasaysayan kung ang JS, Ajax, ug dinamikong HTML nakita nga usa ka rebolusyon nga nagdala kanamo sa umaabot. Sa kalit, mahimo namong i-update ang usa ka panid sa dinamikong paagi, makakuha og data gikan sa usa ka server, ug malikayan ang pag-navigate sa ubang mga panid, nga nakita nga hinay ug nag-flash sa usa ka dako nga puti nga rektanggulo sa screen taliwala sa duha ka mga panid. Adunay usa ka hugpong sa mga pulong, nga gipasikat ni Jeff Atwood (ang nagtukod sa StackOverflow), nga mabasa: “Bisan unsang aplikasyon nga masulat sa JavaScript sa kataposan masulat sa JavaScript.”—Jeff Atwood
Alang kanamo niadtong panahona, gibati kini nga usa ka pangahas nga moadto ug maghimo sa mga app. Morag usa ka habol nga pag-apruba nga buhaton ang tanan sa JS. Mao nga gibuhat namo ang tanan sa JS, ug wala gyud kami mogahin og panahon sa pagsiksik sa ubang mga paagi sa pagbuhat sa mga butang. Wala gyud namo gibati ang insentibo nga makat-on sa husto kung unsa ang mahimo sa HTML ug CSS. Wala gyud namo gitan-aw ang web isip usa ka nag-uswag nga plataporma sa app sa kinatibuk-an. Kanunay namong nakita kini isip usa ka butang nga kinahanglan namong trabahuon, ilabi na kon bahin sa suporta sa browser. Mahimo ra naton ihulog ang daghang JS niini aron mahuman ang mga butang. Nakatabang ba kanako ang paggahin ug oras sa pagkat-on ug dugang bahin sa kung giunsa ang web ug kung unsa ang magamit sa plataporma? Sigurado, mahimo nako nga naahit ang usa ka hugpong sa code nga dili gyud kinahanglan. Apan, sa panahon, tingali dili kaayo. Nakita nimo, ang mga kalainan sa browser labi ka hinungdanon kaniadto. Kini ang panahon sa dihang ang Internet Explorer mao gihapon ang dominanteng browser, nga ang Firefox mao ang duol nga ikaduha, apan nagsugod sa pagkawala sa bahin sa merkado tungod sa Chrome nga paspas nga nakakuha sa pagkapopular. Bisan kung ang Chrome ug Firefox maayo kaayo sa pag-uyon sa mga sumbanan sa web, ang mga palibot diin nagdagan ang among mga app nagpasabut nga kinahanglan namon nga suportahan ang IE6 sa dugay nga panahon. Bisan kung gitugotan kami nga suportahan ang IE8, kinahanglan gihapon namon nga atubangon ang daghang mga kalainan tali sa mga browser. Dili lang kana, apan ang web sa panahon wala’y daghang mga kapabilidad nga natukod sa plataporma.
Fast forward hangtod karon. Ang mga butang nausab pag-ayo. Dili lamang nga kita adunay labaw pa niini nga mga kapabilidad kaysa kaniadto, apan ang rate kung diin kini magamit miuswag usab. Tugoti ako nga mangutana pag-usab, unya: Ang paggahin ba ug oras sa pagkat-on og dugang bahin sa kung giunsa ang web nagtrabaho ug kung unsa ang magamit sa plataporma makatabang kanimo karon? Oo gyud. Ang pagkat-on sa pagsabot ug paggamit sa web platform karon nagbutang kanimo sa usa ka dako nga bentaha sa ubang mga developers. Nagtrabaho ka man sa performance, accessibility, responsiveness, silang tanan dungan, o pagpadala lang sa mga feature sa UI, kung gusto nimo nga buhaton kini isip usa ka responsable nga inhenyero, ang pagkahibalo sa mga himan nga anaa kanimo makatabang kanimo sa pagkab-ot sa imong mga tumong nga mas paspas ug mas maayo. Pipila ka mga Butang Mahimong Dili Na Nimo Kinahanglang Usa ka Library Kay nahibal-an kung unsa ang gisuportahan sa mga browser karon, ang pangutana, kung ingon-ana, mao: Unsa ang mahimo natong biyaan? Nagkinahanglan ba kita og usa ka div component aron mahimo ang mga rounded corners sa 2025? Siyempre, dili kita. Ang property sa border-radius gisuportahan sa tanang gigamit karon nga mga browser sulod sa kapin sa 15 ka tuig niining puntoha. Ug ang porma sa eskina moabut usab sa dili madugay, alang sa labi ka labi nga mga kanto. Atong tan-awon ang medyo bag-o nga mga bahin nga magamit na karon sa tanan nga dagkong mga browser, ug mahimo nimong gamiton aron mapulihan ang mga naglungtad nga dependency sa imong codebase. Ang punto mao nga dili dayon isalikway ang tanan nimong minahal nga mga librarya ug isulat pag-usab ang imong codebase. Sama sa uban pa, kinahanglan nimo nga tagdon una ang suporta sa browser ug magdesisyon base sa ubang mga hinungdan nga piho sa imong proyekto. Ang mosunod nga mga feature gipatuman sa tulo ka nag-unang browser engines (Chromium, WebKit, ug Gecko), apan mahimo nga adunay lain-laing mga kinahanglanon sa suporta sa browser nga makapugong kanimo sa paggamit niini diha-diha dayon. Karon pa ang usa ka maayong panahon sa pagkat-on bahin sa kini nga mga bahin, bisan pa, ug tingali nagplano nga gamiton kini sa usa ka punto. Mga Popover Ug Mga Dialog Ang Popover API, ang
Sigurado, ang imong katulin sa koneksyon sa internet tingali miuswag usab, apan dili kana ang kahimtang sa tanan. Ug dili tanan adunay parehas nga kapabilidad sa aparato. Ang pagbira sa code sa ikatulo nga partido alang sa mga butang nga mahimo nimo sa plataporma, sa baylo, lagmit nagpasabut nga nagpadala ka daghang code, ug busa maabot ang mas gamay nga mga kostumer kaysa sa imong naandan. Sa web, ang dili maayo nga pasundayag sa pagkarga mosangput sa daghang mga rate sa pagbiya ug makadaot sa reputasyon sa brand. Pagdagan nga Mas Gamay nga Code Sa Mga Device Dugang pa, ang code nga imong gipadala sa mga aparato sa imong mga kostumer lagmit nga modagan nga mas paspas kung mogamit kini labi ka gamay nga abstraction sa JavaScript sa ibabaw sa plataporma. Kini usab tingali mas responsive ug mas accessible pinaagi sa default. Kining tanan nagdala ngadto sa mas daghan ug mas malipayon nga mga kustomer. Susiha ang akong kauban sa trabaho nga si Alex Russell nga tinuig nga performance inequality gap blog, nga nagpakita nga ang mga premium nga mga himan sa kadaghanan wala sa mga merkado nga adunay binilyon nga mga tiggamit tungod sa pagkadili managsama sa bahandi. Ug kini nga kal-ang nagkadako lamang sa paglabay sa panahon.
Gitukod-sa Layout sa Masonry Usa ka bahin sa platform sa web nga moabut sa dili madugay ug nga akong gikalipay kaayo mao ang CSS Masonry.
Tugoti ako nga magsugod pinaagi sa pagpasabut kung unsa ang Masonry. Unsa ang Masonry Ang Masonry usa ka matang sa layout nga gihimong popular sa Pinterest mga tuig na ang milabay. Naghimo kini og mga independente nga track sa sulod diin ang mga butang nagputos sa ilang kaugalingon nga duol sa pagsugod sa track kutob sa ilang mahimo.
Daghang mga tawo ang nagtan-aw sa Masonry ingon usa ka maayong kapilian alang sa mga portfolio ug mga galeriya sa litrato, nga siguradong mahimo niini. Apan ang Masonry mas flexible kaysa sa imong makita sa Pinterest, ug dili limitado sa mga layout nga sama sa waterfall. Sa usa ka layout sa Masonry:
Ang mga track mahimong mga kolum o mga laray:
Ang mga track sa sulod dili kinahanglan nga parehas ang gidak-on:
Ang mga butang mahimong mosangkad sa daghang mga track:
Ang mga butang mahimong ibutang sa piho nga mga track; dili nila kinahanglan nga sundon kanunay ang algorithm sa awtomatikong pagbutang:
Mga demo Ania ang pipila ka yano nga mga demo nga akong gihimo pinaagi sa paggamit sa umaabot nga pagpatuman sa CSS Masonry sa Chromium. Usa ka demo sa gallery sa litrato, nga nagpakita kung giunsa ang mga butang (ang titulo sa kini nga kaso) mahimo’g mosangkap sa daghang mga track:
Laing photo gallery nga nagpakita sa mga track nga lainlain ang gidak-on:
Usa ka layout sa site sa balita nga adunay pipila ka mga track nga mas lapad kaysa sa uban, ug pipila ka mga butang nga naglangkob sa tibuuk nga gilapdon sa layout:
Usa ka kanban board nga nagpakita nga ang mga butang mahimong ibutang sa piho nga mga track:
Mubo nga sulat: AngAng miaging mga demo gihimo gamit ang usa ka bersyon sa Chromium nga dili pa magamit sa kadaghanan sa mga tiggamit sa web, tungod kay ang CSS Masonry bag-o pa lang nagsugod nga ipatuman sa mga browser. Bisan pa, ang mga nag-develop sa web malipayong naggamit sa mga librarya aron makahimo mga layout sa Masonry sa daghang mga tuig na. Mga Site nga Naggamit sa Masonry Karon Sa tinuud, kasagaran ang Masonry sa web karon. Ania ang pipila ka mga pananglitan nga akong nakit-an gawas sa Pinterest:
Ug pipila pa, dili kaayo klaro, mga pananglitan:
Busa, giunsa paghimo kini nga mga layout? Mga workaround Usa ka limbong nga akong nakita nga gigamit mao ang paggamit sa usa ka layout sa Flexbox sa baylo, pagbag-o sa direksyon niini sa kolum, ug pagbutang niini aron maputos. Niining paagiha, mahimo nimong ibutang ang mga butang nga lainlain ang gitas-on sa daghang, independente nga mga kolum, nga maghatag impresyon sa usa ka layout sa Masonry:
Adunay, bisan pa, duha ka mga limitasyon sa kini nga workaround:
Ang han-ay sa mga butang lahi sa kung unsa kini sa usa ka tinuud nga layout sa Masonry. Uban sa Flexbox, ang mga butang pun-on una ang unang kolum ug, kung puno na, dayon adto sa sunod nga kolum. Uban sa Masonry, ang mga butang mag-stack sa bisan unsang track (o kolum sa kini nga kaso) adunay daghang espasyo nga magamit. Apan usab, ug tingali labi ka hinungdanon, kini nga workaround nanginahanglan nga magbutang ka usa ka piho nga gitas-on sa sulud sa Flexbox; kay kon dili, walay wrapping mahitabo.
Third-party nga Masonry Libraries Alang sa mas abante nga mga kaso, ang mga developer naggamit sa mga librarya. Ang labing ilado ug popular nga librarya alang niini gitawag lamang nga Masonry, ug kini ma-download mga 200,000 ka beses kada semana sumala sa NPM. Naghatag usab ang Squarespace og usa ka sangkap sa layout nga naghubad sa usa ka layout sa Masonry, alang sa usa ka alternatibo nga walay code, ug daghang mga site ang naggamit niini. Ang duha niini nga mga kapilian naggamit sa JavaScript code aron ibutang ang mga butang sa layout. Gitukod-sa Masonry Nalipay kaayo ko nga ang Masonry nagsugod na karon sa pagpakita sa mga browser ingon usa ka built-in nga bahin sa CSS. Sa paglabay sa panahon, mahimo nimong gamiton ang Masonry sama sa imong gibuhat sa Grid o Flexbox, nga mao, nga wala magkinahanglan bisan unsang mga workaround o third-party code. Ang akong team sa Microsoft nagpatuman sa built-in nga suporta sa Masonry sa Chromium open source project, diin gibase sa Edge, Chrome, ug daghan pang mga browser. Ang Mozilla sa tinuud ang una nga tigbaligya sa browser nga nagsugyot usa ka eksperimento nga pagpatuman sa Masonry kaniadtong 2020. Ug ang Apple usab interesado kaayo sa paghimo niining bag-ong web layout nga primitive nga mahitabo. Ang trabaho sa pag-standardize sa feature nagpadayon usab, nga adunay kasabutan sulod sa CSS working group mahitungod sa kinatibuk-ang direksyon ug bisan sa usa ka bag-ong display type nga display: grid-lanes. Kung gusto nimo mahibal-an ang dugang bahin sa Masonry ug pagsubay sa pag-uswag, tan-awa ang akong panid sa CSS Masonry resources. Sa paglabay sa panahon, kung ang Masonry mahimong usa ka bahin sa Baseline, sama sa Grid o Flexbox, magamit ra naton kini ug makabenepisyo gikan sa:
Mas maayo nga performance, Mas maayo nga pagtubag, Kasayon sa paggamit ug mas simple nga code.
Atong tan-awon pag-ayo kini. Mas Maayo nga Pagganap Ang paghimo sa imong kaugalingon nga sistema sa layout nga sama sa Masonry, o gamit ang usa ka librarya sa ikatulo nga partido, nagpasabut nga kinahanglan nimo nga ipadagan ang code sa JavaScript aron ibutang ang mga butang sa screen. Kini usab nagpasabot nga kini nga code mahimong render blocking. Sa tinuud, bisan kung wala’y makita, o ang mga butang wala sa husto nga mga lugar o sa husto nga gidak-on, hangtod nga ang JavaScript code modagan. Ang Layout sa Masonry kasagarang gigamit alang sa nag-unang bahin sa usa ka web page, nga nagpasabot nga ang kodigo maghimo sa imong nag-unang sulod nga makita sa ulahi kay sa mahimo niini, makapaubos sa imong LCP, o Pinakadako nga Contentful Paint metric, nga adunay dakong papel sa gitan-aw nga performance ug pag-optimize sa search engine. Gisulayan nako ang librarya sa Masonry JS nga adunay usa ka yano nga layout ug pinaagi sa pagsundog sa usa ka hinay nga koneksyon sa 4G sa DevTools. Ang librarya dili kaayo dako (24KB, 7.8KB gzipped), apan nagkinahanglan og 600ms aron makarga ubos sa akong mga kondisyon sa pagsulay. Ania ang usa ka pagrekord sa pasundayag nga nagpakita sa taas nga 600ms nga oras sa pagkarga alang sa librarya sa Masonry, ug nga wala’y lain nga kalihokan sa paghubad nga nahitabo samtang kana nahitabo:
Dugang pa, pagkahuman sa inisyal nga oras sa pagkarga, ang na-download nga script kinahanglan nga ma-parse, ma-compile, ug dayon modagan. Ang tanan niini, sama sa nahisgutan na kaniadto, nagpugong sa paghubad sa panid. Uban sa usa ka built-in nga pagpatuman sa Masonry sa browser, wala kami usa ka script nga i-load ug ipadagan. Ang makina sa browser mobuhat lang sa iyang butang sa panahon sa inisyal nga lakang sa paghubad sa panid. Mas Maayo nga Pagtubag Sama sa dihang ang usa ka panid unang nag-load, ang pag-usab sa gidak-on sa browser window mosangpot sa pag-render sa layout sa maong panid pag-usab. Niini nga punto, bisan pa, kung ang panid naggamit sa Masonry JS library, dili na kinahanglan nga i-load pag-usab ang script, tungod kay kini na.dinhi. Bisan pa, ang code nga nagpalihok sa mga butang sa husto nga mga lugar kinahanglan nga modagan. Karon kini nga partikular nga librarya ingon og medyo paspas sa pagbuhat niini kung ang panid nag-load. Bisan pa, kini nagpalihok sa mga butang kung kinahanglan nila nga mobalhin sa usa ka lahi nga lugar sa pagbag-o sa bintana, ug kini naghimo usa ka dako nga kalainan. Siyempre, ang mga tiggamit dili mogugol ug panahon sa pag-usab sa ilang browser windows sama sa among mga developers. Apan kini nga animated nga pagbag-o sa gidak-on nga kasinatian mahimo’g makapakurat ug makadugang sa gitan-aw nga oras nga gikinahanglan alang sa panid sa pagpahiangay sa bag-ong gidak-on niini. Kasayon Sa Paggamit Ug Mas Simple nga Code Unsa kadali ang paggamit sa usa ka bahin sa web ug kung unsa ka yano ang hitsura sa code hinungdanon nga mga hinungdan nga makahimo usa ka dako nga kalainan alang sa imong team. Dili gyud sila mahimong sama ka hinungdanon sa katapusan nga kasinatian sa tiggamit, siyempre, apan ang kasinatian sa developer adunay epekto sa pagpadayon. Ang paggamit sa usa ka built-in nga bahin sa web adunay hinungdanon nga mga benepisyo sa kana nga atubangan:
Ang mga nag-develop nga nahibal-an na ang HTML, CSS, ug JS lagmit nga dali nga magamit ang kana nga bahin tungod kay kini gidisenyo aron mahiusa nga maayo ug mahiuyon sa nahabilin nga platform sa web. Wala’y peligro sa paglapas sa mga pagbag-o nga gipaila kung giunsa gigamit ang bahin. Adunay hapit zero nga peligro sa kana nga bahin nga mahimong dili na magamit o dili mapadayon.
Sa kaso sa built-in nga Masonry, tungod kay kini usa ka layout primitive, imong gigamit kini gikan sa CSS, sama sa Grid o Flexbox, walay JS nga nalambigit. Usab, ang ubang mga kabtangan sa CSS nga may kalabotan sa layout, sama sa gintang, molihok sama sa imong gipaabut nga buhaton nila. Wala'y mga limbong o mga solusyon nga mahibal-an, ug ang mga butang nga imong nakat-unan gidokumento sa MDN. Para sa Masonry JS lib, medyo komplikado ang initialization: nanginahanglan kini og data attribute nga adunay espesipikong syntax, kauban ang mga tinago nga HTML nga mga elemento aron mabutang ang column ug gap sizes. Dugang pa, kung gusto nimo nga magsangkap sa mga kolum, kinahanglan nimo nga ilakip ang gidak-on sa gintang aron malikayan ang mga problema:
Atong itandi kini sa kung unsa ang hitsura sa usa ka built-in nga pagpatuman sa Masonry:
Mas simple, mas compact code nga makagamit lang sa mga butang sama sa gap ug kung asa ang spanning tracks gihimo gamit ang span 2, sama sa grid, ug wala nimo kinahanglana nga kuwentahon ang saktong gilapdon nga naglakip sa gap size. Sa Unsang Paagi Mahibal-an Unsa ang Anaa Ug Kanus-a Kini Magamit? Sa kinatibuk-an, ang pangutana dili gyud kung kinahanglan nimo gamiton ang built-in nga Masonry sa usa ka librarya sa JS, apan kung kanus-a. Ang librarya sa Masonry JS talagsaon ug nagpuno sa usa ka gintang sa web platform sulod sa daghang katuigan, ug alang sa daghang malipayon nga mga developer ug tiggamit. Kini adunay pipila ka mga kakulangan kung imong itandi kini sa usa ka built-in nga pagpatuman sa Masonry, siyempre, apan dili kana hinungdanon kung kana nga pagpatuman dili pa andam. Sayon alang kanako ang paglista niining mga bag-ong dagway sa web platform tungod kay nagtrabaho ako sa usa ka vendor sa browser, ug busa nahibal-an nako kung unsa ang umaabot. Apan ang mga developers kanunay nga nagpaambit, survey human sa survey, nga ang pagsubay sa bag-ong mga butang lisud. Ang pagpabilin nga nahibal-an lisud, ug ang mga kompanya dili kanunay nga unahon ang pagkat-on. Aron makatabang niini, aniay pipila ka mga kahinguhaan nga naghatag og mga update sa yano ug compact nga mga paagi aron dali nimo makuha ang impormasyon nga imong gikinahanglan:
Ang Web platform adunay explorer site: Mahimong interesado ka sa panid sa mga nota sa pagpagawas niini. Ug, kung gusto nimo ang RSS, tan-awa ang feed sa mga nota sa pagpagawas, ingon man ang Baseline nga Bag-ong Magamit ug Daghang Magamit nga mga feed.
Ang WebDashboard sa Status sa Platform: Mahimo nimong gusto ang lainlaing mga panid sa tuig sa Baseline.
panid sa roadmap sa Status sa Chrome Platform.
Kung adunay ka gamay nga oras, mahimo ka usab nga interesado sa mga nota sa pagpagawas sa mga vendor sa browser:
Chrome Edge Firefox Safari
Alang sa dugang nga mga kapanguhaan, tan-awa ang akong Pag-navigate sa Web Platform Cheatsheet. Ang Akong Butang Wala Gihapon Gipatuman Kana ang pikas bahin sa problema. Bisan kung nakit-an nimo ang oras, kusog, ug mga paagi aron masubay, naa gihapon ang kasagmuyo sa pagpadungog sa imong tingog ug pag-implementar sa imong paborito nga mga bahin. Tingali naghulat ka sa daghang tuig alang sa usa ka piho nga bug nga masulbad, o usa ka piho nga bahin nga ipadala sa usa ka browser diin wala pa kini. Ang akong isulti mao nga ang mga tigbaligya sa browser naminaw. Kabahin ko sa daghang grupo sa cross-organization diin kanunay natong hisgutan ang mga signal sa developer ug feedback. Among gitan-aw ang daghang lain-laing tinubdan sa feedback, parehong internal sa matag browser vendor ug external/public sa mga forum, open source nga mga proyekto, blog, ug survey. Ug, kanunay kaming naningkamot sa paghimo og mas maayong mga paagi alang sa mga developers sa pagpaambit sa ilang piho nga mga panginahanglan ug mga kaso sa paggamit. Busa, kung mahimo nimo, palihog pangayo ug dugang gikan sa mga tigbaligya sa browser ug pugson kami sa pagpatuman sa mga bahin nga imong gikinahanglan. Nahibal-an nako nga kini nagkinahanglan og panahon, ug mahimo usab nga makahadlok (wala pay labot ang usa ka taas nga babag sa pagsulod), apan kini usab molihok. Ania ang pipila ka mga paagi nga imong madungog ang imong (o imong kompanya) nga tingog: Kuhaa ang tinuig nga State of JS, State of CSS, ug State of HTML nga mga survey. Dako ang ilang papel kung giunsa pag-una sa mga vendor sa browser ang ilang trabaho. Kung kinahanglan nimo ang usa ka piho nga standard-based nga API nga ipatuman kanunay sa mga browser, hunahunaa ang pagsumite sa usa ka sugyot sa sunod nga pag-usab sa proyekto sa Interop. Nagkinahanglan kini og dugang nga oras, apan hunahunaa kung giunsa gipaambit sa Shopify ug RUMvision ang ilang mga lista sa pangandoy alang sa Interop 2026. Ang detalyado nga kasayuran nga sama niini mahimong mapuslanon kaayo alang sa mga tigbaligya sa browser nga unahon. Alang sa mas mapuslanon nga mga link aron maimpluwensyahan ang mga tigbaligya sa browser, tan-awa ang akong Pag-navigate sa Web Platform Cheatsheet. Panapos Sa pagtapos, nanghinaut ko nga kini nga artikulo nagbilin kanimo og pipila ka mga butang nga hunahunaon:
Kahinam alang sa Masonry ug uban pang umaabot nga mga bahin sa web. Pipila ka mga bahin sa web nga mahimo nimong sugdan sa paggamit. Pipila ka piraso sa custom o 3rd-party nga code nga mahimo nimong tangtangon pabor sa mga built-in nga feature. Pipila ka mga paagi aron masubay kung unsa ang umaabot ug maimpluwensyahan ang mga tigbaligya sa browser.
Labaw sa tanan, nanghinaut ko nga nakombinsir ko ikaw sa mga benepisyo sa paggamit sa web platform sa hingpit nga potensyal niini.
