Nêzîkî 15 sal berê, ez li pargîdaniyek dixebitim ku me ji bo ajansên rêwîtiyê, xebatkarên balafirgehê û pargîdaniyên balafirgehê sepan çêkir. Me di heman demê de ji bo pêkhateyên UI û kapasîteyên sepana yek-rûpelê çarçoveya xweya hundurîn ava kir. Ji bo her tiştî hêmanên me hebûn: zevî, bişkok, tablo, rêze, tabloyên daneyan, pêşek, hilbijarkên tarîx, hilbijartî û pirhilbijartî. Heta pêkhateyeke me ya div jî hebû. Bi awayê, pêkhateya meya div-ê pir xweş bû, hişt ku em li ser hemî gerokan quncikên dorpêçkirî bikin, ku, bawer bikin an na, di wê demê de ne tiştek hêsan bû.
Xebata me di xalek di dîroka me de cih girt ku JS, Ajax, û HTML-a dînamîk wekî şoreşek ku me anî pêşerojê hate dîtin. Ji nişkê ve, me dikaribû rûpelek dînamîkî nûve bike, daneyan ji serverek werbigire, û ji navgîniya rûpelên din dûr bikevin, ku ew hêdî dihat dîtin û li ser ekranê di navbera her du rûpelan de çargoşeyek spî ya mezin dibiriqe. Hevokek hebû, ku ji hêla Jeff Atwood (damezrînerê StackOverflow) ve hatî populer kirin, ku xwend: "Her serîlêdana ku di JavaScriptê de were nivîsandin dê di dawiyê de bi JavaScriptê were nivîsandin." - Jeff Atwood
Ji me re wê demê, ev mîna wêrek bû ku em bi rastî biçin û wan sepanan biafirînin. Mîna erêkirinek betal hîs dikir ku meriv her tiştî bi JS re bike. Ji ber vê yekê me her tişt bi JS re kir, û me bi rastî wext negirt ku em li awayên din ên kirina tiştan lêkolîn bikin. Me bi rastî hîs nedikir ku em bi rêkûpêk fêr bibin ka HTML û CSS dikarin çi bikin. Me bi rastî tevne wekî platformek sepanê ya pêşkeftî bi tevahî fêm nekir. Me bi piranî ew wekî tiştek dît ku em hewce ne ku li dora xwe bixebitin, nemaze dema ku ew hat ser piştgirîya gerokê. Em tenê dikarin zêdetir JS bavêjin ser wê da ku tiştan bikin. Ma wê wextê ku meriv bêtir fêr bibe ka tevn çawa xebitî û tiştê ku li ser platformê peyda bû ji min re bibe alîkar? Bê guman, min dikaribû komek kodek ku bi rastî ne hewce bû bibira. Lê, di wê demê de, dibe ku ne ewqas. Hûn dibînin, cûdahiyên gerokê wê hingê pir girîng bûn. Ev demek bû ku Internet Explorer hîn jî geroka serdest bû, ku Firefox duyemîn duyemîn bû, lê ji ber ku Chrome bi lezûbez populerbûna xwe bi dest xist, para bazarê winda kir. Her çend Chrome û Firefox di lihevkirina standardên malperê de pir baş bûn, hawîrdorên ku sepanên me tê de dixebitin tê vê wateyê ku em neçar in ku ji bo demek dirêj piştgirî bidin IE6. Tewra gava ku me destûr da ku em piştgirî bidin IE8, dîsa jî me neçar ma ku di navbera gerokên pir cûdahiyan de mijûl bibin. Ne tenê ew, lê tevna wê demê ew qas kapasîteyên ku rast di platformê de hatine çêkirin tune bû.
Bi lez ji bo îro. Tişt pir hatine guhertin. Ne tenê ji berê zêdetir van kapasîteyên me hene, lê rêjeya peydabûna wan jî zêde bûye. Bila ez dîsa pirsê bipirsim, wê gavê: Ma dê wextê xwe bavêje ku bêtir fêr bibe ka tevn çawa dixebite û ya ku li ser platformê heye îro ji we re bibe alîkar? Bêguman erê. Fêrbûna fêmkirin û karanîna platforma webê îro we li hember pêşdebirên din dixe avantajek mezin. Ku hûn li ser performans, gihîştin, bersivdan, hemî wan bi hev re bixebitin, an tenê taybetmendiyên UI-yê bişînin, ger hûn dixwazin wekî endezyarek berpirsiyar wiya bikin, zanîna amûrên ku ji we re hene ji we re dibe alîkar ku hûn zûtir û çêtir bigihîjin armancên xwe. Hin Tiştên Dibe ku Hûn Êdî Ji Kitêbxaneyek Ne hewce nebin Dizanin ku îro çi gerok piştgirî dikin, pirs ev e: Em dikarin çi biterikînin? Ma ji me re pêkhateyek div hewce ye ku di sala 2025-an de quncikên dorpêçkirî bikin? Bê guman, em nakin. Taybetmendiya sînor-radius ji hêla hemî gerokên ku niha têne bikar anîn ji 15 salan zêdetir di vê nuqteyê de piştgirî tê kirin. Û şiklê quncikê jî di demek nêzîk de tê, ji bo quncikên hê xweşiktir. Werin em nihêrînek li taybetmendiyên nûjen ên ku naha di hemî gerokên sereke de hene, û yên ku hûn dikarin bikar bînin da ku li şûna girêdanên heyî di bingeha koda xwe de biguhezînin. Mebest ne ev e ku hûn tavilê hemî pirtûkxaneyên xweyên delal bavêjin û bingeha koda xwe ji nû ve binivîsin. Wekî her tiştê din, hûn ê hewce ne ku pêşî li piştgiriya gerokê bigirin û li ser bingeha faktorên din ên taybetî yên projeya we biryar bidin. Taybetmendiyên jêrîn di sê motorên gerokê yên sereke (Chromium, WebKit, û Gecko) de têne bicîh kirin, lê dibe ku hûn hewceyên cûda yên piştevaniya gerokê hebin ku nahêlin hûn tavilê wan bikar bînin. Naha hîn jî demek baş e ku meriv li ser van taybetmendiyan fêr bibe, her çend, û dibe ku plan bikin ku di hin xalan de wan bikar bînin. Popovers And Dialogs Popover API, hêmana
Bê guman, leza pêwendiya weya înternetê jî dibe ku zêde bûye, lê ew ji bo her kesî ne wusa ye. Û ne her kes xwedî heman kapasîteyên amûrê ne. Kişandina koda partiya sêyemîn ji bo tiştên ku hûn dikarin bi platformê re bikin, li şûna wê, bi îhtîmalek mezin tê vê wateyê ku hûn bêtir kodê dişînin, û ji ber vê yekê digihîjin kêmtir xerîdar ji ya ku hûn normal dikin. Li ser tevneyê, performansa barkirina xirab dibe sedema rêjeyên mezin terikandin û zirarê dide navûdengê brandê. Li ser Amûrên Kêm Kodê Dikeve Wekî din, koda ku hûn li ser cîhazên xerîdarên xwe dişînin heke ew li ser platformê kêmtir abstractionên JavaScript-ê bikar bîne dibe ku zûtir dimeşe. Di heman demê de dibe ku ew ji hêla xwerû ve bersivdartir û gihîştîtir e. Hemî ev dibe sedema xerîdarên bêtir û dilxweştir. Bloga valahiya newekheviya performansa salane ya hevkarê min Alex Russell binihêrin, ku destnîşan dike ku amûrên premium ji ber newekheviya dewlemendiyê bi giranî ji bazarên bi mîlyaran bikarhêneran tune ne. Û ev valahî tenê bi demê re mezin dibe.
Avakirin-li Masonry Layout Yek taybetmendiyek platforma webê ya ku di demek nêzîk de tê û ku ez jê pir kêfxweş im CSS Masonry e.
Bila ez bi ravekirina Masonry çi ye dest pê bikim. Masonrî çi ye Masonry celebek sêwiranê ye ku sal berê ji hêla Pinterest ve populer hate çêkirin. Ew rêçên naverokê yên serbixwe diafirîne ku di hundurê wan de hêman xwe bi qasî ku dikarin nêzî destpêka rêyê pak bikin.
Pir kes Masonry ji bo portfolios û galeriyên wêneyan vebijarkek girîng dibînin, ku ew bê guman dikare bike. Lê Masonry ji ya ku hûn li ser Pinterest dibînin maqûltir e, û ew tenê bi sêwiranên mîna avî-avê re sînordar nabe. Di çarçoveyek Masonrî de:
Şop dikarin stûn an rêz bin:
Pêdivî ye ku şopên naverokê hemî heman mezinahî bin:
Tişt dikarin gelek rêgezan bişopînin:
Tişt dikarin li ser rêyên taybetî bêne danîn; ew ne hewce ne ku her gav algorîtmaya danîna otomatîkî bişopînin:
Demos Li vir çend demoyên hêsan hene ku min bi karanîna pêkanîna dahatû ya CSS Masonry li Chromium çêkir. Demoyek galeriya wêneyan, ku destnîşan dike ka tişt (di vê rewşê de sernav) çawa dikare çend rêgezan bigire:
Galeriyek wêneya din a ku şopên bi mezinahiyên cihêreng nîşan dide:
Plansaziyek malpera nûçeyan a ku hin şop ji yên din firehtir e, û hin tiştên ku li seranserê firehiya sêwiranê vedigirin:
Tabloyek kanban ku destnîşan dike ku tişt dikarin li ser rêyên taybetî werin danîn:
Nîşe: Thedemoyên berê bi guhertoyek Chromium-ê ku hîn ji piraniya bikarhênerên malperê re peyda nebûye hatine çêkirin, ji ber ku CSS Masonry tenê di gerokan de dest pê dike. Lêbelê, pêşdebirên malperê bi salan berê bi kêfxweşî pirtûkxaneyan bikar tînin da ku nexşeyên Masonry çêbikin. Malperên ku îro Masonry bikar tînin Bi rastî, Masonrî îro li ser torê pir gelemperî ye. Li vir çend mînakên ku min ji bilî Pinterest dîtin hene:
Û çend mînakên din, kêmtir eşkere:
Ji ber vê yekê, ev sêwiran çawa hatin afirandin? Workarounds Yek hîleyek ku min dîtiye ev e ku li şûna wê sêwirana Flexbox bikar tîne, rêça wê di stûnê de diguhezîne, û wê pêve dike. Bi vî rengî, hûn dikarin hêmanên bi bilindahiyên cihêreng di stûnên pirjimar, serbixwe de bi cîh bikin, ku dîmenek sêwirana Masonî bide:
Lêbelê, du sînor bi vê rêgezê re hene:
Rêzkirina tiştan ji ya ku dê bi sêwirana Masoniya rastîn be cûda ye. Bi Flexbox re, tişt pêşî stûna yekem tije dikin û, gava ku ew tije dibe, dûv re diçin stûna din. Bi Masonry re, tişt dê li kîjan rêgezê (an stûnê di vê rewşê de) cîhê wê yê zêde hebe bicivînin. Lê di heman demê de, û belkî ya girîngtir jî, ev çareserî hewce dike ku hûn li konteynera Flexbox bilindiyek sabît destnîşan bikin; Wekî din, pêçan çênabe.
Pirtûkxaneyên Masonî yên partiya sêyemîn Ji bo rewşên pêşkeftî, pêşdebiran pirtûkxane bikar tînin. Pirtûkxaneya herî naskirî û populer a ji bo vê bi tenê Masonry tê gotin, û li gorî NPM-ê heftê 200,000 caran tê dakêşandin. Squarespace di heman demê de ji bo alternatîfek bê-kod, hêmanek sêwiranê peyda dike ku sêwirana Masonrî dide, û gelek malper wê bikar tînin. Van her du vebijarkan koda JavaScript-ê bikar tînin da ku tiştan di sêwiranê de bi cîh bikin. Avakirin-li Masonry Ez bi rastî kêfxweş im ku Masonry naha dest pê dike ku di gerokan de wekî taybetmendiyek CSS-ya çêkirî xuya bibe. Bi demê re, hûn ê bikaribin mîna ku hûn Grid an Flexbox-ê dikin Masonry-ê bikar bînin, ango, bêyî ku hewcedariya rêgez an kodek sêyemîn hebe. Tîmê min li Microsoft-ê di projeya çavkaniya vekirî ya Chromium de, ku Edge, Chrome, û gelek gerokên din li ser bingeha wê ne, piştgiriya Masonry-ya çêkirî bicîh tîne. Mozilla bi rastî yekem firoşkarê gerokê bû ku di sala 2020-an de pêkanîna ceribandinek Masonry pêşniyar kir. Û Apple jî pir eleqedar bû ku vê sêwirana tevna nû ya primitive pêk bîne. Xebata standardîzekirina taybetmendiyê jî bi pêş de diçe, digel lihevhatina di nav koma xebatê ya CSS de derbarê rêgezek giştî û tewra nîşanek celebek nû ya xuyangê: grid-lanes. Heke hûn dixwazin di derbarê Masonry de bêtir fêr bibin û pêşkeftinê bişopînin, rûpela min a çavkaniyên CSS Masonry binihêrin. Di demê de, gava ku Masonry bibe taybetmendiyek Bingehîn, mîna Grid an Flexbox, em ê karibin bi hêsanî wê bikar bînin û jê sûd werbigirin:
Performansa çêtir, Bersivdana çêtir, Bikaranîna hêsan û koda hêsantir.
Ka em ji nêz ve li van binêrin. Performansa çêtir Çêkirina pergala xweya sêwirana mîna Masonry, an li şûna wê karanîna pirtûkxaneyek partiya sêyemîn, tê vê wateyê ku hûn ê koda JavaScript-ê bimeşînin da ku tiştan li ser ekranê bi cîh bikin. Ev jî tê vê wateyê ku ev kod dê bibe astengkirin. Bi rastî, heta ku ew koda JavaScript-ê neyê xebitandin, an dê tiştek xuya neke, an tişt dê ne li cîhên rast an di pîvanên rast de bin. Plansaziya Masonry bi gelemperî ji bo beşa sereke ya rûpelek malperê tête bikar anîn, ku tê vê wateyê ku kod dê naveroka weya sereke dereng xuya bike ji ya ku wekî din xuya dike, metrîka weya LCP, an Naveroka Mezintirîn Paint, ku di performansa têgihîştin û xweşbîniya motora lêgerînê de rolek mezin dilîze. Min pirtûkxaneya Masonry JS bi sêwiranek hêsan û bi simulkirina pêwendiyek hêdî 4G di DevTools de ceriband. Pirtûkxane ne pir mezin e (24KB, 7.8KB gzipped), lê di bin şert û mercên ceribandina min de barkirina 600 ms girt. Li vir tomarek performansê ye ku nîşan dide ku dema barkirina dirêj a 600ms ji bo pirtûkxaneya Masonry, û ku di dema ku ew diqewime ti çalakiyek din a renderkirinê çênebûye:
Wekî din, piştî dema barkirina destpêkê, skrîpta dakêşandî wê hingê pêdivî bû ku were pars kirin, berhev kirin, û dûv re were xebitandin. Hemî, wekî ku berê jî behs kirin, pêşandana rûpelê asteng dikir. Di gerokê de bi pêkanîna Masonry-ya çêkirî, em ê skrîptek tune ku were barkirin û xebitandin. Motora gerokê dê tenê di gava gava destpêkê ya vegotina rûpelê de tiştê xwe bike. Bersivdariya çêtir Mîna ku gava yekem rûpelek tê barkirin, mezinkirina pencereya gerokê rê li ber danasîna sêwirana wê rûpelê vedike. Di vê nuqteyê de, her çend, heke rûpel pirtûkxaneya Masonry JS bikar tîne, ne hewce ye ku ji nû ve nivîsê bar bike, ji ber ku ew berê yevir. Lêbelê, koda ku tiştan li cîhên rast vediguhezîne pêdivî ye ku were xebitandin. Naha ev pirtûkxaneya taybetî dema ku rûpel bar dike di kirina vê yekê de pir zû dixuye. Lêbelê, dema ku ew hewce ne ku li ser mezinbûna pencereyê berbi cîhek din ve biçin, ew tiştan zindî dike, û ev cûdahiyek mezin çêdike. Bê guman, bikarhêner bi qasî ku em pêşdebiran dikin dem derbas nakin ku paceyên geroka xwe veguherînin. Lê ev tecrubeya veguheztina anîmasyonî dikare pir jar be û dema têgihîştinê ya ku pêdivî ye ku rûpel bi mezinahiya xweya nû re biguncîne zêde dike. Hêsaniya Bikaranînê Û Koda Hêsantir Çiqas hêsan e ku meriv taybetmendiyek malperê bikar bîne û kod çiqas hêsan xuya dike faktorên girîng in ku dikarin ji bo tîmê we cûdahiyek mezin çêbikin. Ew çu carî nikarin wekî ezmûna bikarhênerê paşîn girîng bin, bê guman, lê ezmûna pêşdebir bandorê li domdariyê dike. Bikaranîna taybetmendiyek malperê ya çêkirî li ser vê yekê feydeyên girîng tê:
Pêşdebirên ku jixwe HTML, CSS, û JS dizanin dê bi îhtîmalek mezin karibin wê taybetmendiyê bi hêsanî bikar bînin ji ber ku ew hatî sêwirandin ku baş tevde bibe û bi platforma mayî ya malperê re hevaheng be. Xetereya şikandina guhertinên ku di awayê karanîna taybetmendiyê de têne destnîşan kirin tune. Hema hema sifir metirsiya ku ew taybetmendî ji holê rabe an neyê domandin heye.
Di doza Masoniya çêkirî de, ji ber ku ew sêwiranek bingehîn e, hûn wê ji CSS-ê bikar tînin, mîna Grid an Flexbox, JS tê de tune. Di heman demê de, taybetmendiyên din ên CSS-ê yên girêdayî layout-ê, wek gap, wekî ku hûn ji wan hêvî dikin dixebitin. Ti hîle û rêgir tune ku meriv pê zanibe, û tiştên ku hûn fêr dibin li ser MDN-ê têne belge kirin. Ji bo Masonry JS lib, destpêkkirin hinekî tevlihev e: ew taybetmendiyek daneyê bi hevoksaziyek taybetî, digel hêmanên HTML-ê yên veşartî hewce dike ku stûn û mezinahiyên valahiyê destnîşan bike. Zêdeyî, heke hûn dixwazin stûnan bişopînin, hûn hewce ne ku mezinahiya valahiyê bi xwe ve bikin da ku ji pirsgirêkan dûr nekevin:
Werin em vê yekê bidin ber hev ku dê pêkanîna Masoniya çêkirî çawa xuya bike:
Koda sadetir, kompakttir ku tenê dikare tiştên mîna valahiyê bikar bîne û li ku derê rêçên berbelav bi span 2-ê têne çêkirin, mîna di torê de, û hewce nake ku hûn firehiya rast hesab bikin ku mezinahiya valahiyê vedihewîne. Meriv Çawa Bizane Çi Berdest e û Kengî Berdest e? Bi tevayî, pirs bi rastî ne ew e ku hûn Masonry-ya çêkirî li ser pirtûkxaneyek JS bikar bînin, lê belê kengê. Pirtûkxaneya Masonry JS ecêb e û ji gelek salan ve di platforma malperê de, û ji bo gelek pêşdebir û bikarhênerên kêfxweş, valahiyek dagirtî ye. Ger hûn wê bi pêkanîna Masoniya çêkirî re berhev bikin, bê guman çend kêmasiyên wê hene, lê heke ew pêkanîn ne amade be ew ne girîng in. Ji min re hêsan e ku ez van taybetmendiyên nû yên platforma malperê navnîş bikim ji ber ku ez li firoşkarek gerokê dixebitim, û ji ber vê yekê ez mêl dikim ku zanibim ka çi tê. Lê pêşdebiran bi gelemperî parve dikin, anket piştî anketê, ku şopandina tiştên nû dijwar e. Agahdar bimînin dijwar e, û pargîdan her gav pêşî li fêrbûnê nagirin. Ji bo ku hûn bi vê yekê re bibin alîkar, li vir çend çavkanî hene ku nûvekirinan bi awayên hêsan û tevlihev peyda dikin da ku hûn zû agahdariya ku hûn hewce ne bigirin:
Platforma Webê malpera gerokê vedihewîne: Dibe ku hûn bi rûpela notên berdana wê re eleqedar bibin. Û, heke hûn ji RSS-ê hez dikin, li ser feed notên berdanê, û hem jî Feydeyên Bingehîn ên Nû Berdest û Berfireh Berdest binihêrin.
The WebTabloya Rewşa Platformê: Dibe ku hûn ji rûpelên wê yên sala bingehîn ên cihêreng hez bikin.
Rûpelê nexşeya rê ya Rewşa Platforma Chrome.
Ger demek we hinekî din hebe, dibe ku hûn bala xwe bidin notên berdana firoşkarên gerokê jî:
Chrome Edge Firefox Safari
Ji bo hê bêtir çavkaniyan, li Cheatsheet-a Navîgasyona Platforma Webê ya min binihêrin. Tiştê Min Hîn Ne Pêkanîna Ew aliyê din ê pirsgirêkê ye. Tewra ku hûn dem, enerjî û awayên şopandinê bibînin, dîsa jî ji bihîstina dengê we û pêkanîna taybetmendiyên weyên bijare aciziyek heye. Dibe ku hûn bi salan li bendê ne ku xeletiyek taybetî were çareser kirin, an taybetmendiyek taybetî ku di gerokek ku ew hîn jî winda ye bişîne. Ya ku ez ê bibêjim ev e ku firoşkarên gerokê guhdarî dikin. Ez beşek ji çend tîmên nav-rêxistinê me ku em her dem li ser nîşan û bertekên pêşdebiran nîqaş dikin. Em li gelek çavkaniyên cihêreng ên bersivdayînê dinêrin, hem li hundurê her firoşkarê gerokê û hem jî li ser foruman, projeyên çavkaniya vekirî, blog û anketan li derve/gelemperî. Û, em her gav hewl didin ku rêyên çêtir biafirînin ku pêşdebiran hewcedariyên xwe yên taybetî parve bikin û dozên bikar bînin. Ji ber vê yekê, heke hûn dikarin, ji kerema xwe ji firoşkarên gerokê bêtir daxwaz bikin û zextê li me bikin ku em taybetmendiyên ku hûn hewce ne bicîh bînin. Ez dibînim ku ew dem digire, û di heman demê de dikare bibe tirsnak (nebêjin astengiyek bilind a têketinê), lê ew di heman demê de dixebite. Li vir çend awayên ku hûn dikarin dengê xwe (an pargîdaniya xwe) bibihîzin hene: Lêkolînên salane yên Dewleta JS, Dewleta CSS, û Dewleta HTML-ê bistînin. Ew rolek mezin dileyzin ka ka firoşkarên gerokê çawa karê xwe pêşîn dikin. Ger hûn hewce ne ku API-ya standard-based taybetî ku bi domdarî li seranserê gerokan were bicîh kirin, di dubarekirina projeya Interop-ê ya paşîn de pêşniyarek bişînin. Zêdetir dem hewce dike, lê binihêrin ka Shopify û RUMvision çawa navnîşên xwestekên xwe ji bo Interop 2026 parve kirin. Agahiyên hûrgulî yên bi vî rengî dikarin ji bo firoşkarên gerokê pir bikêr bin ku pêşî lê bidin. Ji bo girêdanên bikêrtir ên ku bandorê li firoşkarên gerokê dikin, li Cheatsheet-a Navîgasyona Platforma Webê ya min binihêrin. Encam Ji bo girtinê, ez hêvî dikim ku vê gotarê ji we re çend tiştan hiştiye ku hûn li ser bifikirin:
Heyecan ji bo Masonry û taybetmendiyên din ên malperê yên pêşeroj. Hin taybetmendiyên malperê ku hûn dixwazin dest bi karanîna xwe bikin. Çend perçeyên koda xwerû an 3rd-partî ku hûn dikarin di berjewendiya taybetmendiyên çêkirî de jêbirin. Çend awayên şopandina tiştê ku tê û bandorê li firoşkarên gerokê dikin.
Ya girîngtir, ez hêvî dikim ku min we ji feydeyên karanîna platforma malperê bi tevahî potansiyela xwe qanih kir.
