Malunga neminyaka eyi-15 eyadlulayo, ndandisebenza kwinkampani apho sakha iiapps zeearhente zokuhamba, abasebenzi besikhululo seenqwelomoya, neenkampani zeenqwelomoya. Sakha eyethu isakhelo sangaphakathi samalungu e-UI kunye nobuchule be-app yephepha elinye. Besinamacandelo ayo yonke into: amasimi, amaqhosha, iithebhu, uluhlu, uluhlu lwedatha, iimenyu, abakhethi bemihla, abakhethiweyo, kunye neenketho ezininzi. Sade saba necandelo le-div. Icandelo lethu le-div lalilungile ngendlela, lisivumele ukuba senze iikona ezijikelezileyo kuzo zonke iiphequluli, ezithi, kholwa okanye hayi, kwakungeyonto ilula ukuyenza ngelo xesha.

Umsebenzi wethu wenzeke kwinqanaba kwimbali yethu xa i-JS, i-Ajax, kunye ne-HTML eguquguqukayo ibonwa njengenguqu eyasizisa kwixesha elizayo. Ngequbuliso, sinokuhlaziya iphepha ngamandla, sifumane idatha kumncedisi, kwaye sigweme ukukhangela amanye amaphepha, abonwa njengokucotha kwaye akhanyise uxande olukhulu olumhlophe kwisikrini phakathi kwamaphepha amabini. Kwakukho ibinzana, elenziwe laziwa nguJeff Atwood (umseki weStackOverflow), elifundeka ngolu hlobo: “Nasiphi na isicelo esinokubhalwa kwiJavaScript ekugqibeleni siya kubhalwa kwiJavaScript.”— UJeff Atwood

Kuthi ngelo xesha, oku kwavakala ngathi kukoyika ukuya kuyila ezoapps. Kwaba ngathi kukuvunywa kwengubo ukwenza yonke into nge-JS. Ngoko senza yonke into nge-JS, kwaye asizange sithathe ixesha lokuphanda ngezinye iindlela zokwenza izinto. Asizange siyive ngokwenene inkuthazo yokufunda ngokufanelekileyo ukuba yintoni enokwenziwa yiHTML kunye neCSS. Asizange siyiqonde iwebhu njengeqonga le-app eliguqukayo lilonke. Ubukhulu becala sayibona njengento ekufuneka sisebenze ngayo, ngakumbi xa kufikwa kwinkxaso yomkhangeli zincwadi. Singavele sijule ngakumbi i-JS kuyo ukuze senze izinto. Ngaba ukuthatha ixesha lokufunda ngakumbi malunga nendlela iwebhu esebenza ngayo kunye nento ekhoyo eqongeni indincedile? Ngokuqinisekileyo, bendinokucheba iqela lekhowudi ebingafuneki ngokwenene. Kodwa, ngelo xesha, mhlawumbi akunjalo. Uyabona, umahluko webhrawuza wawubaluleke kakhulu ngelo xesha. Eli yayilixesha apho i-Internet Explorer yayisesona sikhangeli siphambili, kunye neFirefox ibe yeyesibini esisondeleyo, kodwa iqala ukuphulukana nesabelo semakethi ngenxa yeChrome ifumana ukuthandwa ngokukhawuleza. Nangona iChrome kunye neFirefox zazilungile ekuvumelaneni ngemigangatho yewebhu, iimeko-bume apho usetyenziso lwethu lwalusebenza luthetha ukuba kufuneka sixhase i-IE6 ixesha elide. Naxa savunyelwa ukuba sixhase i-IE8, bekusafuneka sijongane nokwahlukana okuninzi phakathi kwabakhangeli. Ayisiyiyo loo nto kuphela, kodwa iwebhu yelo xesha yayingenazo izinto ezininzi ezakhelwe eqongeni.

Khawuleza ukuya namhlanje. Izinto zitshintshe kakhulu. Asiphelelanga nje ngokuba ngaphezulu kwezi zakhono kunangaphambili, kodwa izinga ezifumaneka ngalo liye landa nalo. Makhe ndibuze umbuzo kwakhona, emva koko: Ngaba ukuthatha ixesha lokufunda ngakumbi malunga nendlela iwebhu esebenza ngayo kunye nento ekhoyo eqongeni kukunceda namhlanje? Ewe kunjalo. Ukufunda ukuqonda nokusebenzisa iqonga lewebhu namhlanje kukubeka kuncedo olukhulu ngaphezu kwabanye abaphuhlisi. Nokuba usebenza ekusebenzeni, ukufikeleleka, ukuphendula, zonke kunye, okanye ukuthumela nje iimpawu ze-UI, ukuba ufuna ukuyenza njengenjineli enoxanduva, ukwazi izixhobo ezifumanekayo kuwe kukunceda ufikelele kwiinjongo zakho ngokukhawuleza nangcono. Ezinye izinto onokuthi ungasayifuni iThala leencwadi kwakhona Ukwazi ukuba zeziphi izikhangeli ezixhasayo namhlanje, umbuzo, ke, ngulo: Yintoni esinokuyiyeka? Ngaba sifuna icandelo le-div ukwenza iikona ezingqukuva ngo-2025? Kakade ke, asikho. Ipropathi yerediyasi yomda ixhaswe zizo zonke iziphequluli ezisetyenziswa ngoku ngaphezulu kweminyaka eyi-15 kweli nqanaba. Kwaye ikona-imilo nayo iyeza kungekudala, nakwiikona ezithandekayo. Makhe sijonge kwiimpawu zamva nje ezikhoyo ngoku kuzo zonke iziphequluli eziphambili, kwaye onokuzisebenzisa ukubuyisela ukuxhomekeka okukhoyo kwikhowudi yakho. Inqaku asikokuyeka kwangoko onke amathala eencwadi owathandayo kwaye ubhale kwakhona ikhowudi yakho. Kuyo yonke enye into, kuya kufuneka uthathele ingqalelo inkxaso yesikhangeli kuqala kwaye uthathe isigqibo ngokusekwe kwezinye izinto ezikhethekileyo kwiprojekthi yakho. Ezi mpawu zilandelayo ziphunyezwa kwiinjini ezintathu eziphambili zebrawuza (Chromium, WebKit, kunye neGecko), kodwa unokuba neemfuno ezahlukeneyo zenkxaso yesikhangeli ezikuthintela ukuba uzisebenzise kwangoko. Noko ke, ngoku kuselixesha elifanelekileyo lokufunda ngezi nkalo, yaye mhlawumbi ucebe ukuzisebenzisa ngaxa lithile. Popovers kunye neengxoxo IPopover API, i

HTML element, kunye ::backdrop pseudo-element inokukunceda ukulahla ukuxhomekeka kwi popup,incam yesixhobo, kunye neelayibrari zencoko yababini, njenge-Floating UI, iTippy.js, iTether, okanye iReact Tooltip. Bajongana nofikelelo kunye nolawulo logqaliselo lwakho, ngaphandle kwebhokisi, zenziwe ngokwezifiso kakhulu ngokusebenzisa i-CSS, kwaye ziyakwazi ukwenziwa zibe lula. Iiccordions I isiqalelo, uphawu lwegama loyelelwano lweziqalelo ezizimeleyo, kunye ::inkcukacha-umxholo upseudo-element isusa imfuno yamacandelo ekhokodiyoni njengeBootstrap Accordion okanye icandelo leReact Accordion. Ukusebenzisa nje iqonga apha kuthetha ukuba kulula kubantu abayaziyo iHTML/CSS ukuqonda ikhowudi yakho ngaphandle kokuba baqale bafunde ukusebenzisa ithala leencwadi elithile. Kukwathetha ukuba ukhuselekile ekwaphuleni utshintsho kwithala leencwadi okanye ukuyekiswa kwethala leencwadi. Kwaye, ewe, kuthetha ikhowudi encinci yokukhuphela kunye nokusebenza. Iinkcukacha ezikhethekileyo ngokudibeneyo azidingi i-JS ukuze ivule, ivale, okanye iphile. ISintaksi yeCSS I-Cascade layers, ye-codebase ye-CSS elungelelanisiweyo, i-CSS nesting, ye-CSS ehlangeneyo, imisebenzi emitsha yombala, imibala ehambelanayo, kunye nomxube wombala, imisebenzi yeMathematika emitsha efana ne-abs (), uphawu (), pow () kunye nezinye zinceda ukunciphisa ukuxhomekeka kwi-CSS pre-processors, iilayibrari eziluncedo ezifana ne-Bootstrap kunye ne-Tailwind, okanye i-runtime CSS-in-JS. Umtshintshi womdlalo :unayo (), enye yezona zinto ziceliwe ixesha elide, isusa imfuno yezisombululo ezintsonkothileyo ezisekelwe kwi-JS. JS Utility Iindlela ze-Array zangoku ezifana ne-findLast (), okanye ku-(), kunye ne-Seta iindlela ezinjengomahluko (), ukudibana (), umanyano () kunye nezinye kunokunciphisa ukuxhomekeka kumathala eencwadi afana neLodash. Imibuzo yesikhongozeli Imibuzo yesikhongozeli yenza amacandelo e-UI aphendule kwizinto ezingezizo ubungakanani bendawo yokujonga, kwaye ke ngoko izenze zisebenziseke ngakumbi kwimixholo eyahlukeneyo. Akukho sidingo sokusebenzisa ilayibrari ye-UI enzima ye-JS kule nto kwakhona, kwaye akukho mfuneko yokusebenzisa i-polyfill. Uyilo Igridi, i-subgrid, i-flexbox, okanye i-multi-column sele ikhona ixesha elide ngoku, kodwa ngokujonga iziphumo ze-State of CSS surveys, kuyacaca ukuba abaphuhlisi bavame ukuba balumke kakhulu ngokwamkela izinto ezintsha, kwaye balinde ixesha elide kakhulu ngaphambi kokuba benze. Ezi mpawu beziyisiseko sexesha elide kwaye unokuzisebenzisa ukulahla ukuxhomekeka kwizinto ezifana nenkqubo yegridi yeBootstrap, izixhobo ze-flexbox zeSiseko seSiseko, igridi esisigxina yeBulma, igridi yeMaterialize, okanye iikholamu zeTailwind. Anditsho ukuba kufuneka ulahle isakhelo sakho. Iqela lakho liyamkele ngesizathu, kwaye ukuyisusa kunokuba yiprojekthi enkulu. Kodwa ukujonga ukuba iqonga lewebhu linokubonelela ngantoni ngaphandle kokusonga umntu wesithathu phezulu kuza neenzuzo ezininzi. Izinto onokuthi ungasazifuni kwikamva elikufutshane Ngoku, makhe sijonge ngokukhawuleza kwezinye zezinto ongayi kufuna ithala leencwadi kwixesha elizayo elingekude. Oko kukuthi, ezi zinto zingezantsi azikakulungeli kwaphela ukuthathwa komntwana ngobuninzi, kodwa ukuzazi kunye nokucwangcisa ukusetyenziswa kwexesha elizayo kunokuba luncedo. Ukuma kweAnchor Indawo ye-ankile ye-CSS iphatha ukubekwa kweepopovers kunye neengcebiso zesixhobo ngokunxulumene nezinye izinto, kwaye iyakhathalela ukuzigcina zijonge, naxa ushukuma, uyaskrola, okanye uhlengahlengisa ubungakanani bephepha. Oku kukuncedisana okukhulu kwi-Popover API ekhankanywe ngaphambili, eya kwenza kube lula ukufuduka kude nezisombululo ze-JS ezisebenza kakhulu. Navigation API I-Navigation API ingasetyenziselwa ukuphatha ukukhangela kwi-apps zephepha elinye kwaye inokuba ngumphelelisi omkhulu, okanye nokutshintshwa, kwi-React Router, i-Next.js yomzila, okanye imisebenzi ye-Angular. Jonga iinguqu API Imboniselo yeeNguquko API inokuphila phakathi kweemeko ezahlukeneyo zephepha. Kwisicelo sephepha elinye, oku kwenza utshintsho olugudileyo phakathi kwelizwe lube lula kakhulu, kwaye kunokukunceda ukuba ulahle amathala eencwadi oopopayi anjenge Anime.js, GSAP, okanye Motion.dev. Nangcono, i-API ingasetyenziswa kunye nezicelo zamaphepha amaninzi. Khumbula ngaphambili, xa ndandisithi isizathu sokuba sakhe usetyenziso olunephepha elinye kwinkampani endandisebenza kuyo kwiminyaka eli-15 eyadlulayo yayikukunqanda ukukhanya okumhlophe kokuphinda kulayishwe iphepha xa uzulazula? Ukuba loo API ibikhona ngelo xesha, besikwazile ukufikelela kwiziphumo zoguqulo lwephepha elihle ngaphandle kwesakhelo sephepha elinye kwaye ngaphandle kokhuphelo olukhulu lweapp yonke. Uopopayi oqhutywa ngokuskrola Oopopayi abaqhutywa ngokuskrola basebenza kwindawo yokuskrola yomsebenzisi, kunokuba ixesha elide, libenze babe sisisombululo esihle sokubalisa amabali kunye nokhenketho lwemveliso. Abanye abantu baye bahamba kancinci ngayo, kodwa xa isetyenziswe kakuhle, oku kunokuba sisixhobo soyilo esisebenzayo, kwaye kunokunceda ukususa amathala eencwadi anje: ScrollReveal, GSAP Skrola, okanyeWOW.js. Customizable Khetha Ukukhetha okwenziwe ngokwezifiso kuyinto eqhelekileyo into ekuvumela ukuba wenze ngokwezifiso ukubonakala kwayo kunye nomxholo, ngelixa uqinisekisa ukufikeleleka kunye nokusebenza kweenzuzo. Eli lixesha elide liza, kunye nenqaku elicelwe kakhulu, kwaye kuyamangalisa ukuyibona isiza kwiqonga lewebhu kungekudala. Ngokhetho olwakhelwe ngaphakathi, unokuyeka yonke le khowudi ye-JS ekunzima ukuyigcina kumacandelo akho akhethiweyo. I-CSS Masonry I-CSS Masonry lelinye iqonga lewebhu elizayo endifuna ukuchitha ixesha elininzi kulo. Nge-CSS Masonry, unokufezekisa uyilo olunzima kakhulu, okanye olungenakwenzeka, kunye ne-flex, igridi, okanye enye i-CSS eyakhelwe-ngaphakathi yokuqala. Abaphuhlisi bahlala bebhenela ekusebenziseni amathala eencwadi eqela lesithathu ukuphumeza uyilo lweMasonry, njengethala leencwadi leMasonry JS. Kodwa, ngakumbi ngaloo nto kamva. Masisonge eli nqaku ngaphambi kokuba sidlulele kwiMasonry. Kutheni Ufanele Ukhathalele Imarike yomsebenzi igcwele abaphuhlisi bewebhu abanamava kwiJavaScript kunye nesakhelo samva nje sosuku. Ke, eneneni, ithini inqaku ekufundeni ukusebenzisa iiprimitives zeqonga lewebhu ngakumbi, ukuba unokwenza izinto ezifanayo ngamathala eencwadi, izinto eziluncedo, kunye nesakhelo esele usazi namhlanje? Xa lonke ishishini lixhomekeke kwezi zicwangciso, kwaye unokutsala nje kwithala leencwadi elifanelekileyo, akufuneki ukuba abathengisi bebrawuza basebenze nje nala mathala eencwadi ukuwenza alayishe kwaye abaleke ngokukhawuleza, kunokuzama ukukholisa abaphuhlisi ukuba basebenzise iqonga endaweni yoko? Okokuqala, sisebenza kunye nababhali bamathala eencwadi, kwaye siyazenza ngcono izikhokelo ngokufunda ngezinto abazisebenzisayo nokuphucula ezo ndawo. Kodwa okwesibini, "ukusebenzisa nje iqonga" kunokuzisa iingenelo ezibalulekileyo. Ukuthumela iKhowudi encinci kwiZixhobo Eyona nzuzo iphambili kukuba ugqibe ekubeni uthumela ikhowudi encinci kakhulu kwizixhobo zabathengi bakho. Ngokutsho kwe-Web Almanac ye-2024, inani eliqhelekileyo lezicelo ze-HTTP lijikeleze i-70 kwindawo nganye, eninzi ngenxa yeJavaScript enezicelo ze-23. Ngo-2024, i-JS yafumana imifanekiso njengolona hlobo lwefayile lubalaseleyo. Inani eliphakathi lezicelo zephepha leefayile ze-JS ngama-23, linyuke nge-8% ukususela ngo-2022. Kwaye ubungakanani bephepha buqhubeka bukhula unyaka nonyaka. Ubunzima bephepha eliphakathi bujikeleze i-2MB ngoku, eyi-1.8MB ngaphezulu kune-10 kwiminyaka eyadlulayo.

Ngokuqinisekileyo, isantya soqhagamshelo lwakho lwe-intanethi mhlawumbi sonyukile, naso, kodwa akunjalo kumntu wonke. Kwaye ayinguye wonke umntu onezixhobo ezifanayo. Ukutsalela ikhowudi yomntu wesithathu ngezinto onokuzenza ngeqonga, endaweni yoko, uninzi luthetha ukuba uthumela ikhowudi eninzi, kwaye ke ngoko ufikelele kubathengi abambalwa kunesiqhelo. Kwiwebhu, ukusebenza kakubi kokulayisha kukhokelela kumazinga amakhulu okulahla kwaye kulimaza isidima sohlobo. Ukubaleka iKhowudi encinci kwiZixhobo Ngaphaya koko, ikhowudi oyithumelayo kwizixhobo zabathengi bakho inokuthi ibaleke ngokukhawuleza ukuba isebenzisa izinto ezimbalwa zeJavaScript ngaphezulu kweqonga. Kwakhona mhlawumbi iphendula ngakumbi kwaye ifikeleleke ngakumbi ngokuzenzekelayo. Konke oku kukhokelela kubathengi abaninzi kwaye abonwabileyo. Jonga umlingane wam u-Alex Russell we-blog ye-gap ye-gap yonyaka, ebonisa ukuba izixhobo zeprimiyamu azikho kakhulu kwiimarike kunye neebhiliyoni zabasebenzisi ngenxa yokungalingani kobutyebi. Kwaye lo msantsa ukhula kuphela ngokuhamba kwexesha.

Uyilo olwakhelwe ngaphakathi lweMasonry Inqaku elinye leqonga lewebhu eliza kungekudala kwaye endonwabe kakhulu yiCSS Masonry.

Makhe ndiqale ngokucacisa ukuba yintoni iMasonry. Yintoni iMasonry I-Masonry luhlobo loyilo olwenziwe lwathandwa yiPinterest kwiminyaka eyadlulayo. Idala iingoma ezizimeleyo zomxholo ngaphakathi apho izinto zizipakisha ngokusondeleyo ekuqaleni komzila njengoko zikwazi.

Abantu abaninzi babona iMasonry njengokhetho olukhulu lweepotfoliyo kunye neegalari zeefoto, ezinokuthi zenziwe ngokuqinisekileyo. Kodwa iMasonry ibhetyebhetye ngakumbi kunento oyibonayo kwiPinterest, kwaye ayipheleliselwanga kuyilo nje olufana nengxangxasi. Kuyilo lweMasonry:

Iingoma zinokuba yimiqolo okanye imiqolo:

Iingoma zomxholo akufuneki zilingane zonke:

Izinto zinokuhamba ngeendlela ezininzi:

Izinto zinokubekwa kwiingoma ezithile; akunyanzelekanga ukuba basoloko belandela ialgorithm yokubeka ngokuzenzekelayo:

Iidemos Nazi iidemos ezimbalwa ezilula endizenzileyo ngokusebenzisa ukuphunyezwa okuzayo kweCSS Masonry kwiChromium. Idemo yegalari yeefoto, ebonisa ukuba izinto (isihloko kulo mzekelo) zinokuthatha iingoma ezininzi:

Enye igalari yeefoto ebonisa iingoma zobukhulu obahlukeneyo:

Uyilo lwesayithi yeendaba kunye neengoma ezibanzi kunezinye, kunye nezinye izinto ezithatha ububanzi bonke boyilo:

Ibhodi ye-kanban ebonisa ukuba izinto zinokubekwa kwiingoma ezithile:

Qaphela: Iiidemos zangaphambili zenziwe ngoguqulelo lweChromium engekafumaneki kubasebenzisi abaninzi bewebhu, kuba iCSS Masonry isaqala ukuphunyezwa kwiziphequluli. Nangona kunjalo, abaphuhlisi bewebhu bebesoloko besebenzisa amathala eencwadi ukwenza iiplani zeMasonry iminyaka. IiSayithi ezisebenzisa iMasonry namhlanje Ewe, iMasonry ixhaphake kakhulu kwiwebhu namhlanje. Nantsi imizekelo embalwa endiyifumeneyo ngaphandle kwePinterest:

Kwaye imizekelo embalwa ngakumbi, engacacanga kangako:

Ke, zenziwe njani ezi ziyilo? Iindlela zokulungisa Iqhinga elinye endilibonileyo lisetyenzisiwe kukusebenzisa uyilo lweFlexbox endaweni yoko, ukutshintsha indlela eya kwikholamu, kwaye ukuseta ukuba isonge. Ngale ndlela, unokubeka izinto ezinobude obahlukeneyo kwiikholamu ezininzi, ezizimeleyo, unika imbonakalo yoyilo lweMasonry:

Kukho, nangona kunjalo, imida emibini kule workaround:

Ulungelelwaniso lwezinto luhluke kwinto ebiya kuba luyilo lokwenyani lweMasonry. NgeFlexbox, izinto zigcwalisa ikholamu yokuqala kuqala kwaye, xa igcwele, uze uye kwikholamu elandelayo. NgeMasonry, izinto ziya kupakishwa nakweyiphi na ingoma (okanye ikholamu kule meko) enendawo eninzi ekhoyo. Kodwa kwakhona, kwaye mhlawumbi kubaluleke ngakumbi, le workaround ifuna ukuba usete ubude obumiselweyo kwisingxobo seFlexbox; kungenjalo, akukho kusongwa kuya kwenzeka.

Ithala leencwadi leqela lesithathu Kwimiba ephezulu kakhulu, abaphuhlisi basebenzise amathala eencwadi. Elona thala leencwadi elaziwa kakhulu nelidumileyo ngoku libizwa ngokuba yiMasonry, kwaye likhutshelwa malunga namaxesha angama-200,000 ngeveki ngokweNPM. I-squarespace ikwabonelela ngecandelo loyilo olubonelela ngesakhiwo seMasonry, kukhetho olungenakhowudi, kwaye iisayithi ezininzi ziyayisebenzisa. Zombini ezi zikhetho zisebenzisa ikhowudi yeJavaScript ukubeka izinto kuyilo. I-Masonry eyakhelwe-ngaphakathi Ndonwabe kakhulu kukuba iMasonry ngoku iqala ukuvela kwizikhangeli njengesixhobo esakhelwe ngaphakathi seCSS. Ngokuhamba kwexesha, uya kuba nakho ukusebenzisa iMasonry njengokuba usenza iGrid okanye iFlexbox, oko kukuthi, ngaphandle kokufuna nayiphi na indlela yokusebenza okanye ikhowudi yomntu wesithathu. Iqela lam kuMicrosoft liphumeze inkxaso eyakhelwe-ngaphakathi yeMasonry kwiprojekthi yomthombo ovulekileyo weChromium, apho i-Edge, iChrome, kunye nezinye izikhangeli ezininzi ezisekwe kuyo. I-Mozilla yayiyeyona nto ithengisa umkhangeli zincwadi wokuqala ukucebisa ukuphunyezwa komfuniselo kweMasonry ngo-2020. Kwaye i-Apple ikwanomdla kakhulu ekwenzeni olu yilo lwewebhu lutsha lwenzeke. Umsebenzi wokulinganisa uphawu nawo uqhubela phambili, kunye nesivumelwano phakathi kweqela elisebenzayo leCSS malunga nesalathiso ngokubanzi kunye nohlobo olutsha lokubonisa: iindlela zegridi. Ukuba ufuna ukufunda ngakumbi malunga neMasonry kunye nokulandelela inkqubela phambili, jonga yam CSS Masonry kwiphepha lezixhobo. Ekuhambeni kwexesha, xa iMasonry iba yinto esisiseko, njengeGridi okanye iFlexbox, siya kukwazi ukuyisebenzisa ngokulula kwaye sizuze kuyo:

Ukusebenza ngcono, Ukusabela okungcono, Ukusebenziseka ngokulula kunye nekhowudi elula.

Makhe sihlolisise ezi. Ukusebenza ngcono Ukwenza eyakho inkqubo yoyilo efana neMasonry, okanye usebenzisa ithala leencwadi lesithathu endaweni yoko, kuthetha ukuba kuya kufuneka usebenzise ikhowudi yeJavaScript ukubeka izinto esikrinini. Oku kukwathetha ukuba le khowudi iya kwenza uthintelo. Ewe, nokuba akukho nto iya kuvela, okanye izinto aziyi kuba kwiindawo ezifanelekileyo okanye ubungakanani obufanelekileyo, de kube ikhowudi yeJavaScript iqhube. Uyilo lwe-Masonry luhlala lusetyenziselwa indawo ephambili yephepha lewebhu, oku kuthetha ukuba ikhowudi iya kwenza umxholo wakho oyintloko ubonakale emva kwexesha kunokuba unokuba nawo ngenye indlela, ukuthobisa i-LCP yakho, okanye iMetric yePeyinti ePhetheyo enkulu, edlala indima enkulu ekusebenzeni okubonwayo kunye nokuphucula injini yokukhangela. Ndivavanye ithala leencwadi le-Masonry JS ngoyilo olulula kunye nokulinganisa uqhagamshelo olucothayo lwe-4G kwi-DevTools. Ithala leencwadi alikho likhulu kakhulu (24KB, 7.8KB gzipped), kodwa kuthathe 600ms ukulayisha phantsi kweemeko zovavanyo lwam. Nalu ushicilelo lokusebenza olubonisa ukuba ixesha elide le-600ms lokulayisha kwithala leencwadi leMasonry, kwaye akukho msebenzi wumbi owenzekayo lo gama bekusenzeka:

Ukongeza, emva kwexesha lokuqala lokulayisha, iskripthi esikhutshelweyo emva koko kwakufuneka sicazululwe, siqulunqwe, size siqhutywe. Yonke le nto, njengoko bekutshiwo ngaphambili, ibivala unikezelo lwephepha. Ngokuphunyezwa kweMasonry eyakhelwe-ngaphakathi kwisikhangeli, asiyi kuba neskripthi sokulayisha kunye nokusebenza. I-injini yesikhangeli iya kwenza into yayo ngexesha lokuqala lenyathelo lonikezelo lwephepha. Ukusabela ngcono Ngokufana naxa iphepha lilayisha kuqala, ukwenza ubungakanani kwakhona befestile yomkhangeli zincwadi kukhokelela ekunikezelweni kobeko kwelo phepha kwakhona. Okwangoku, nangona kunjalo, ukuba iphepha lisebenzisa ithala leencwadi leMasonry JS, akukho mfuneko yokulayisha iskripthi kwakhona, kuba seleApha. Nangona kunjalo, ikhowudi ehambisa izinto kwiindawo ezifanelekileyo kufuneka iqhutywe. Ngoku eli thala leencwadi libonakala likhawuleza kakhulu ukwenza oku xa iphepha lilayisha. Nangona kunjalo, iyaziphilisa izinto xa zifuna ukuya kwindawo eyahlukileyo kwifestile, kwaye oku kwenza umahluko omkhulu. Ewe kunjalo, abasebenzisi abachithi ixesha besenza ubungakanani bebrawuza yabo windows njengoko sisenza abaphuhlisi. Kodwa la mava ophononongo okubuyisela ubungakanani anokuba yinto entle kwaye yongeza kwixesha elithathwayo ukuba iphepha liziqhelanise nobukhulu balo obutsha. Ukusebenziseka ngokulula kunye nekhowudi elula Kulula kangakanani ukusebenzisa inqaku lewebhu kunye nendlela elula ikhowudi ebonakala ngayo zizinto ezibalulekileyo ezinokwenza umehluko omkhulu kwiqela lakho. Abanakuze babaluleke njengamava okugqibela omsebenzisi, ewe, kodwa amava omphuhlisi anefuthe lokugcina. Ukusebenzisa inqaku lewebhu elakhelwe ngaphakathi liza neenzuzo ezibalulekileyo apha ngaphambili:

Abaphuhlisi abasele beyazi i-HTML, i-CSS, kunye ne-JS baya kuba nakho ukusebenzisa eli nqaku ngokulula kuba liyilelwe ukudibanisa kakuhle kwaye lihambelane neqonga lewebhu lonke. Akukho mngcipheko wokwaphula utshintsho olwenziwayo kwindlela inqaku elisetyenziswa ngayo. Kukho phantse iqanda lomngcipheko wokuba eli nqaku lingahoywa okanye lingagcinwa.

Kwimeko yeMasonry eyakhelwe-ngaphakathi, ngenxa yokuba i-layout yokuqala, uyisebenzisa kwi-CSS, njengeGridi okanye i-Flexbox, akukho JS ebandakanyekayo. Kwakhona, ezinye iipropathi ze-CSS ezinxulumene noyilo, ezinje ngomsantsa, zisebenza ngendlela obulindele ukuba benze ngayo. Akukho maqhinga okanye iindlela zokusebenza ekufuneka wazi ngazo, kwaye izinto ozifundayo zibhalwe kwi-MDN. Kwi-Masonry JS lib, ukuqaliswa kunzima kancinci: kufuna uphawu lwedatha kunye ne-syntax ethile, kunye nezinto ezifihliweyo ze-HTML ukuseta ikholamu kunye nobukhulu be-gap. Kwaye, ukuba ufuna ukunweba iikholamu, kuya kufuneka ubandakanye ubungakanani besithuba ngokwakho ukunqanda iingxaki:

.ubungakanani bengoma, .into { ububanzi: 20%; } .ubungakanani begutter { ububanzi: 1rem; } .into { ubude: 100px; umda-ibhloko-isiphelo: 1rem; } .into:nth-umntwana(ongaqhelekanga) { ubude: 200px; } .into--width2 { ububanzi: calc (40% + 1rem); }

...

Makhe sithelekise oku nendlela ukuphunyezwa kweMasonry eyakhelweyo kuya kujongeka ngayo: .isikhongozeli { bonisa: iindlela zegridi; iindlela zegridi: phinda (4, 20%); isithuba: 1rem; } .into { ubude: 100px; } .into:nth-umntwana(ongaqhelekanga) { ubude: 200px; } .into--width2 { igridi-kholamu: span 2; }

...

Ilula, ikhowudi edibeneyo enokusebenzisa nje izinto ezifana ne-gap kwaye apho iingoma ezijikelezayo zenziwe nge-span 2, njengakwigridi, kwaye ayifuni ukuba ubale ububanzi obufanelekileyo obubandakanya ubungakanani besithuba. Indlela yokwazi ukuba yintoni ekhoyo kwaye xa ifumaneka? Lilonke, umbuzo awukho ngenene ukuba kufuneka usebenzise iMasonry eyakhelwe-ngaphakathi ngaphezulu kwethala leencwadi le-JS, kodwa kunini. Ithala leencwadi le-Masonry JS liyamangalisa kwaye liye lazalisa isithuba kwiqonga lewebhu iminyaka emininzi, kunye nabaphuhlisi abaninzi abonwabileyo kunye nabasebenzisi. Inemiqobo embalwa xa uyithelekisa nokuphunyezwa kweMasonry eyakhelweyo, kunjalo, kodwa ezo azibalulekanga ukuba oko kuphunyezwa akukalungi. Kulula kum ukuba ndidwelise ezi zinto zipholileyo zeqonga lewebhu kuba ndisebenza kumthengisi wesikhangeli, kwaye ke ndihlala ndisazi ukuba kuza ntoni. Kodwa abaphuhlisi bahlala bebelana, uphando emva kophando, ukuba ukugcina umkhondo wezinto ezintsha kunzima. Ukuhlala unolwazi kunzima, kwaye iinkampani azihlali zikubeka phambili ukufunda. Ukunceda koku, nantsi izibonelelo ezimbalwa ezibonelela ngohlaziyo ngeendlela ezilula nezixineneyo ukuze ufumane ulwazi oludingayo ngokukhawuleza:

Iqonga lewebhu libonisa indawo yokuhlola: Unokuba nomdla kwiphepha layo lamanqaku okukhululwa. Kwaye, ukuba uyayithanda i-RSS, jonga ukondla kwamanqaku okukhulula, kunye nesiseko esitsha esiFumanayo kunye nesiFumaneka ngokubanzi.

IWebhuIdeshibhodi yeSimo seQonga: Ungawathanda amaphepha awohlukeneyo onyaka wesiseko.

Iphepha lemephu yendlela ye-Chrome Platform Status.

Ukuba unexesha elingakumbi, unokuba nomdla kumanqaku okukhupha abathengisi:

IChrome Edge IFirefox Safari

Ukufumana izixhobo ezingakumbi, jonga yam Ukujonga i-Web Platform Cheatsheet. Into Yam Ayikaphunyezwa Leyo yenye icala lengxaki. Nokuba uyalifumana ixesha, amandla, kunye neendlela zokugcina umkhondo, kusekho ukukhungatheka ngokuva ilizwi lakho kunye nezinto ozithandayo ziphunyeziwe. Mhlawumbi ulinde iminyaka ukuba i-bug ethile isonjululwe, okanye into ethile ukuyithumela kwisikhangeli apho isalahlekileyo. Into endiya kuyithetha abathengisi bebhrawuza bayamamela. Ndiyinxalenye yamaqela ombutho apho sixoxa ngemiqondiso yophuhlisi kunye nengxelo ngalo lonke ixesha. Sijonge kwimithombo emininzi eyahlukeneyo yeempendulo, zombini ngaphakathi kumthengisi ngamnye wesikhangeli kunye nangaphandle / esidlangalaleni kwiiforamu, iiprojekthi zomthombo ovulekileyo, iiblogi, kunye novavanyo. Kwaye, sihlala sizama ukwenza iindlela ezingcono zokuba abaphuhlisi babelane ngeemfuno zabo ezithile kunye neemeko zokusebenzisa. Ke, ukuba unako, nceda ufune ngakumbi kubathengisi besikhangeli kwaye usicinezele ukuba siphumeze iimpawu ozifunayo. Ndifumanisa ukuba kuthatha ixesha, kwaye kunokubangela ukoyikisa (singakhankanyi umqobo ophezulu wokungena), kodwa iyasebenza. Nazi iindlela ezimbalwa onokwenza ukuba ilizwi lakho (okanye lenkampani yakho) liviwe: Thatha iState of JS yonyaka, iState of CSS, kunye neState of HTML surveys. Badlala indima enkulu kwindlela abathengisi bebrawuza bawubeka phambili umsebenzi wabo. Ukuba ufuna i-API ethile esekwe emgangathweni ukuze iphunyezwe ngokungaguqukiyo kuzo zonke izikhangeli, cinga ngokungenisa isindululo kwiprojekthi elandelayo ye-Interop. Kufuna ixesha elingakumbi, kodwa qwalasela indlela u-Shopify kunye ne-RUMvision babelane ngayo ngoluhlu lweminqweno yabo ye-Interop 2026. Ulwazi oluneenkcukacha olufana nolu lunokuba luncedo kakhulu kubathengisi be-browser ukuba babeke phambili. Ukufumana amakhonkco aluncedo ngakumbi ukuphembelela abathengisi besikhangeli, jonga yam Ukujonga i-Web Platform Cheatsheet. Ukuqukumbela Ukuvala, ndiyathemba ukuba eli nqaku likushiye nezinto ezimbalwa onokucinga ngazo:

Imincili kwiMasonry kunye nezinye izinto ezizayo zewebhu. Iimpawu ezimbalwa zewebhu onokufuna ukuqala ukuzisebenzisa. Iziqwenga ezimbalwa zesiko okanye ikhowudi yomntu wesithathu onokuthi ukwazi ukuyisusa ngokuthanda izinto ezakhelwe ngaphakathi. Iindlela ezimbalwa zokugcina umkhondo wento ezayo kunye nefuthe kubathengisi bebrawuza.

Okubaluleke ngakumbi, ndiyathemba ukuba ndikuqinisekisile ngeenzuzo zokusebenzisa iqonga lewebhu ngokupheleleyo.

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free