Lilemong tse ka bang 15 tse fetileng, ke ne ke sebetsa k'hamphaning eo ho eona re neng re etsa li-apps bakeng sa baemeli ba maeto, basebetsi ba boema-fofane le lik'hamphani tsa lifofane. Re boetse re iketselitse moralo oa rona oa kahare bakeng sa likarolo tsa UI le bokhoni ba sesebelisoa sa leqephe le le leng. Re ne re e-na le likarolo bakeng sa ntho e 'ngoe le e' ngoe: masimo, likonopo, li-tab, mekhahlelo, litafole tsa data, menyetla, likhetho tsa matsatsi, likhetho le likhetho tse ngata. Re bile re e-na le karolo ea div. Karolo ea rona ea div e ne e le ntle ka tsela, e re lumelletse ho etsa likhutlo tse pota-potileng libatli tsohle, tseo, ho lumela kapa che, e neng e se ntho e bonolo ho e etsa ka nako eo.

Mosebetsi oa rona o etsahetse nakong ea nalane ea rona ha JS, Ajax, le HTML e matla li bonoa e le phetoho e re tliselitseng bokamosong. Ka tšohanyetso, re ne re ka ntlafatsa leqephe ka matla, ra fumana lintlha ho tswa ho seva, 'me ra qoba ho ea maqepheng a mang, a neng a nkoa e le a liehang' me a bonesa khutlonnetsepa e kholo e tšoeu skrineng pakeng tsa maqephe a mabeli. Ho ne ho e-na le poleloana, e ileng ea tsebahala ke Jeff Atwood (mothehi oa StackOverflow), e neng e baleha: “Kopo leha e le efe e ka ngoloang ka JavaScript qetellong e tla ngoloa ka JavaScript.”— Jeff Atwood

Ho rona ka nako eo, sena se ne se utloahala e le ho iteta sefuba ho ea theha lits'ebetso tseo. Ho ne ho utloahala eka ke tumello ea ho etsa ntho e 'ngoe le e 'ngoe ka JS. Kahoo re ile ra etsa ntho e ’ngoe le e ’ngoe ka JS, ’me ha rea ​​ka ra ipha nako ea ho etsa lipatlisiso ka litsela tse ling tsa ho etsa lintho. Ha rea ​​ka ra utloa khothatso ea ho ithuta hantle hore na HTML le CSS li ka etsa eng. Ha rea ​​​​ka ra nka sebaka sa marang-rang e le sethala sa lisebelisoa tse tsoelang pele ka botlalo. Hangata re ne re e bona e le ntho eo re neng re hloka ho sebetsana le eona, haholo ha ho tluoa ho tšehetso ea sebatli. Re ka lahlela JS e ngata ho eona ho etsa lintho. Na ho ipha nako ea ho ithuta haholoanyane ka hore na webosaete e sebelitse joang le se neng se le teng sethaleng ho ka nthusa? Ehlile, nka be ke behile sehlopha sa khoutu e neng e sa hlokehe. Empa, ka nako eo, mohlomong ha ho joalo. Ua bona, liphapang tsa sebatli li ne li le bohlokoa haholo mehleng eo. Ena e ne e le nako eo Internet Explorer e neng e ntse e le sebatli se hlahelletseng, Firefox e le motsotsoana o haufi, empa e qala ho lahleheloa ke karolo ea mmaraka ka lebaka la hore Chrome e tumme ka potlako. Leha Chrome le Firefox li ne li le hantle ho lumellana ka maemo a webo, maemo ao lits'ebetso tsa rona li neng li sebetsa ho ona a ne a bolela hore re tlameha ho ts'ehetsa IE6 nako e telele. Le ha re ne re lumelloa ho tšehetsa IE8, re ne re ntse re tlameha ho sebetsana le liphapang tse ngata lipakeng tsa li-browser. Eseng hoo feela, empa tepo ea nako eo e ne e se na bokhoni bo bokaalo bo hahelletsoeng sethaleng.

Ka pele ho fihlela kajeno. Lintho li fetohile haholo. Hase feela hore re na le matla a mangata ana ho feta leha e le neng pele, empa lebelo leo li fumanehang ka lona le eketsehile. E re ke botse potso hape, joale: Na ho ipha nako ea ho ithuta haholoanyane ka hore na webosaete e sebetsa joang le hore na se fumanehang sethaleng ho ka u thusa joang kajeno? Ehlile ho joalo. Ho ithuta ho utloisisa le ho sebelisa sethala sa marang-rang kajeno ho u beha molemo o moholo ho feta bahlahisi ba bang. Hore na o sebetsa mabapi le ts'ebetso, phihlello, karabelo, kaofela ha tsona hammoho, kapa feela ho romella likarolo tsa UI, haeba u batla ho e etsa joalo ka moenjiniere ea nang le boikarabelo, ho tseba lisebelisoa tse fumanehang ho uena ho u thusa ho finyella lipakane tsa hau kapele le ho feta. Lintho tse ling tseo u ka 'nang ua se ke ua hlola u li hloka Laeborari Ka ho tseba hore na li-browser li tšehetsa eng kajeno, potso ke hore: Re ka lahla eng? Na re hloka karolo ea div ho etsa likhutlo tse pota-potiloeng ka 2025? Ehlile, ha re etse joalo. Thepa ea moeli oa moeli e tšehelitsoe ke libatli tsohle tse sebelisoang hajoale ka lilemo tse fetang 15 ntlheng ena. 'Me sebopeho sa sekhutlo le sona se tla tla haufinyane, bakeng sa likhutlo tse monate haholo. Ha re shebeng likarolo tsa morao-rao tse seng li fumaneha ho libatli tsohle tse kholo, le tseo u ka li sebelisang ho khutlisa litšepeho tse teng ho codebase ea hau. Taba ha se ho lahla hanghang lilaebrari tsohle tseo u li ratang ebe u ngola khoutu ea hau hape. Ha e le ntho e 'ngoe le e' ngoe, u tla hloka ho ela hloko tšehetso ea sebatli pele 'me u etse qeto ho latela lintlha tse ling tse tobileng morero oa hau. Lintlha tse latelang li kentsoe tšebetsong lienjineng tse tharo tsa mantlha tsa sebatli (Chromium, WebKit, le Gecko), empa u kanna oa ba le litlhoko tse fapaneng tsa tšehetso ea sebatli tse u thibelang ho li sebelisa hanghang. Leha ho le joalo, hona joale e sa ntsane e le nako e ntle ea ho ithuta ka likarolo tsena, ’me mohlomong u rera ho li sebelisa ka nako e itseng. Popovers Le Dialog Popover API,

HTML element, le ::backdrop pseudo element li ka u thusa ho tlosa ho its'etleha ho popup,ntlha ea lisebelisoa, le lilaeborari tsa puisano, joalo ka Floating UI, Tippy.js, Tether, kapa React Tooltip. Li sebetsana le phihlello le taolo ea tsepamiso bakeng sa hau, ntle le lebokose, li ka etsoa ka mokhoa o ikhethileng ka ho sebelisa CSS, 'me li ka phelisoa habonolo. Li-accordions Karolo ea
, tšobotsi ea lebitso la eona bakeng sa likarolo tse fapaneng, le ::details-content pseudo-element e tlosa tlhoko ea likarolo tsa accordion joalo ka Bootstrap Accordion kapa karolo ea React Accordion. Ho sebelisa sethala mona ho bolela hore ho bonolo ho batho ba tsebang HTML/CSS ho utloisisa khoutu ea hau ntle le ho qala ho ithuta ho sebelisa laebrari e itseng. Ho boetse ho bolela hore ha o na monyetla oa ho senya liphetoho laebraring kapa ho felisoa ha laeborari eo. Mme, ehlile, ho bolela khoutu e nyane ho jarolla le ho e tsamaisa. Lintlha tse ikhethileng ka bobeli ha li hloke hore JS e bule, e koale, kapa e phele. Syntax ea CSS Likarolo tsa Cascade, bakeng sa codebase e hlophisitsoeng haholoanyane ea CSS, CSS nesting, bakeng sa CSS e kopaneng haholoanyane, mesebetsi e mecha ea mebala, mebala e amanang, le motsoako oa mebala, mesebetsi e mecha ea Maths joalo ka abs(), sign(), pow() le tse ling li thusa ho fokotsa ho its'etleha ho li-pre-processors tsa CSS, lilaebrari tsa ts'ebeliso joalo ka Bootstrap le Tailwind, kapa esita le li-libraries tsa CSS-in-JS. Mofetoleli oa lipapali :has (), e 'ngoe ea likarolo tse kōptjoang ka ho fetisisa ka nako e telele, e tlosa tlhokahalo ea litharollo tse rarahaneng tse thehiloeng ho JS. Lisebelisoa tsa JS Mekhoa ea sejoale-joale ea Array joalo ka findLast(), kapa ho(), hammoho le Seta mekhoa joalo ka phapang(), intersection(), union() le tse ling li ka fokotsa ho its'etleha lilaeboraring tse kang Lodash. Lipotso tsa setshelo Lipotso tsa Container li etsa hore likarolo tsa UI li arabele linthong tse ling ntle le boholo ba sebaka sa pono, ka hona li etsa hore li sebelisoe hape maemong a fapaneng. Ha ho sa na tlhoko ea ho sebelisa laeborari ea JS-heavy UI bakeng sa sena, 'me ha ho na lebaka la ho sebelisa polyfill. Sebopeho Grid, subgrid, flexbox, kapa li-column tse ngata li bile teng ka nako e telele joale, empa ha u sheba liphello tsa lipatlisiso tsa Naha ea CSS, ho hlakile hore bahlahisi ba atisa ho ba hlokolosi haholo ka ho amohela lintho tse ncha, 'me ba emetse nako e telele haholo pele ba etsa joalo. Likarolo tsena e bile Baseline ka nako e telele 'me u ka li sebelisa ho tlosa ho its'etleha linthong tse joalo ka sistimi ea Bootstrap, lisebelisoa tsa flexbox tsa Motheo oa Motheo, grid e tsitsitseng ea Bulma, gridize Materialize, kapa litšiea tsa Tailwind. Ha ke re o lokela ho tlohela moralo oa hau. Sehlopha sa hau se e amohetse ka lebaka, 'me ho e tlosa e ka ba morero o moholo. Empa ho sheba hore na sethala sa marang-rang se ka fana ka eng ntle le sekoaelo sa motho oa boraro holimo se tla le melemo e mengata. Lintho tseo u ka 'nang ua se ke ua hlola u li hloka nakong e tlang e haufi Joale, a re hlahlobeng ka potlako tse ling tsa lintho tseo u ke keng ua li hloka laebrari nakong e tlang e haufi. Ka mantsoe a mang, lintho tse ka tlase ha li e-s'o lokele ho nkeloa ka lapeng ka bongata, empa ho li ela hloko le ho rera ho li sebelisa hamorao ho ka thusa. Anchor Positioning CSS ankora positioning e sebetsana le boemo ba li-popovers le lisebelisoa tsa lisebelisoa tse amanang le likarolo tse ling, 'me e hlokomela ho li boloka li le teng, leha u tsamaea, u tsamaisa, kapa u fetola boholo ba leqephe. Ena ke tlatsetso e ntle ho Popover API e boletsoeng pejana, e tla etsa hore ho be bonolo le ho feta ho falla hole le tharollo e matla ea JS. Navigation API Navigation API e ka sebelisoa ho tsamaisa lisebelisoa tsa leqephe le le leng 'me e ka thusa haholo, kapa ea e nkela sebaka, ho React Router, Next.js routing, kapa mesebetsi ea Angular routing. Sheba Transitions API View Transitions API e ka phela lipakeng tsa libaka tse fapaneng tsa leqephe. Ts'ebelisong ea leqephe le le leng, sena se etsa hore ho be bonolo ho feta lipakeng tsa linaha, 'me se ka u thusa ho tlosa lilaebrari tsa anime.js, GSAP, kapa Motion.dev. Ho betere le ho feta, API e ka sebelisoa le lits'ebetso tsa maqephe a mangata. Hopola pejana, ha ke ne ke re lebaka leo ka lona re hahileng lits'ebetso tsa leqephe le le leng k'hamphaning eo ke neng ke sebetsa ho eona lilemong tse 15 tse fetileng e ne e le ho qoba khanya e tšoeu ea ho romelloa ha maqephe ha u ntse u tsamaea? Hoja API eo e ne e le teng ka nako eo, re ka be re khonne ho fihlela litlamorao tse ntle tsa phetisetso ea leqephe ntle le moralo oa leqephe le le leng le ntle le ho khoasolla ho hoholo ha sesebelisoa kaofela. Lipopae tse tsamaisoang ke moqolo Lipopae tse tsamaisoang ke moqolo li sebetsa sebakeng sa moqolo oa mosebelisi, ho fapana le ho feta nako, li li etsa tharollo e ntle bakeng sa ho pheta lipale le maeto a lihlahisoa. Batho ba bang ba fetetse holimo ka eona, empa ha e sebelisoa hantle, sena e ka ba sesebelisoa se sebetsang haholo sa moralo, 'me se ka thusa ho tlosa lilaebrari tse kang: ScrollReveal, GSAP Scroll, kapaWOW.js. Customizable Khethang Khetho eo u ka e khethang ke ntho e tloaelehileng ea e u lumellang hore u iketsetse ponahalo ea eona le litaba tsa eona ka botlalo, ha u ntse u netefatsa ho fumaneha le melemo ea ts'ebetso. Sena e se e le nako e telele se tlang, 'me ke karolo e batloang haholo,' me hoa makatsa ho e bona e tla sethaleng sa marang-rang haufinyane. Ka khetho eo u ka e khethang e hahelletsoeng, qetellong u ka lahla khoutu ena eohle ea JS e thata ho e boloka bakeng sa likarolo tsa hau tse khethiloeng. CSS Masonry CSS Masonry ke karolo e 'ngoe e tlang ea sethala sa marang-rang eo ke batlang ho qeta nako e eketsehileng ho eona. Ka CSS Masonry, o ka fihlela meralo e thata haholo, kapa e ke keng ea khoneha, ka flex, grid, kapa tse ling tse hahiloeng ka har'a sebopeho sa CSS. Hangata bahlahisi ba khetha ho sebelisa lilaeborari tsa mokha oa boraro ho fihlela meralo ea Masonry, joalo ka laeborari ea Masonry JS. Empa, ho feta ka seo hamorao. Ha re phethe ntlha ena pele re fetela ho Masonry. Lebaka Leo ka Lona U Lokelang ho Tsotella Mmaraka oa mesebetsi o tletse ka baetsi ba marang-rang ba nang le boiphihlelo ho JavaScript le meralo ea morao-rao ea letsatsi. Joale, ha e le hantle, ho bohlokoa hakae ho ithuta ho sebelisa lits'ebetso tsa sethala sa marang-rang haholoanyane, haeba u ka etsa lintho tse tšoanang ka lilaeborari, lisebelisoa le meralo eo u seng u ntse u e tseba kajeno? Ha indasteri eohle e itšetlehile ka meralo ena, 'me u ka khona ho hula laebraring e nepahetseng, na barekisi ba li-browser ha baa lokela ho sebetsa feela le lilaebrari tsee ho li kenya le ho matha ka potlako, ho e-na le ho leka ho kholisa batho ba ntlafatsang ho sebelisa sethaleng ho e-na le hoo? Pele ho tsohle, re sebetsa le bangoli ba laeborari, 'me re etsa hore meralo e be betere ka ho ithuta ka seo ba se sebelisang le ho ntlafatsa libaka tseo. Empa ea bobeli, "ho sebelisa sethala feela" ho ka tlisa melemo ea bohlokoa haholo. Ho Romela Khoutu e Nyenyane ho Lisebelisoa Molemo o ka sehloohong ke hore o qetella o romela khoutu e fokolang haholo ho lisebelisoa tsa bareki ba hau. Ho latela Web Almanac ea 2024, palo e tloaelehileng ea likopo tsa HTTP e ka ba 70 sebakeng se seng le se seng, tseo boholo ba tsona li bakoang ke JavaScript e nang le likopo tse 23. Ka 2024, JS e ile ea hapa litšoantšo joalo ka mofuta oa faele o ka sehloohong. Palo e mahareng ea likopo tsa maqephe bakeng sa lifaele tsa JS ke 23, ho nyoloha ka 8% ho tloha ka 2022. 'Me boholo ba maqephe bo ntse bo eketseha selemo le selemo. Boima ba leqephe le bohareng bo ka ba 2MB hona joale, e leng 1.8MB ho feta kamoo e neng e le ka teng lilemong tse 10 tse fetileng.

Ehlile, lebelo la khokahanyo ea hau ea inthanete le lona le eketsehile, empa ha ho joalo ho bohle. Hape ha se bohle ba nang le bokhoni bo tšoanang ba sesebelisoa. Ho hula khoutu ea motho oa boraro bakeng sa lintho tseo u ka li etsang ka sethala, ho e-na le hoo, mohlomong ho bolela hore u romella khoutu e ngata, ka hona u fihlelle bareki ba fokolang ho feta kamoo u neng u ka etsa ka tloaelo. Webosaeteng, ts'ebetso e mpe ea ho kenya e lebisa ho litefiso tse kholo tsa ho lahla le ho senya seriti sa brand. Ho Tsamaisa Khoutu e Nyenyane ho Lisebelisoa Ho feta moo, khoutu eo u e romellang ka lisebelisoa tsa bareki ba hau e kanna ea sebetsa ka potlako haeba e sebelisa likheo tse fokolang tsa JavaScript ka holim'a sethala. E kanna ea ba e arabela haholoanyane ebile e fumaneha habonolo ka ho sa feleng. Sena sohle se lebisa ho bareki ba bangata le ba thabileng haholoanyane. Sheba mosebetsi-'moho le 'na Alex Russell's gap blog ea selemo le selemo ea ts'ebetso ea ho se lekane, e bontšang hore lisebelisoa tsa premium ha li eo haholo limmarakeng tse nang le limilione tse likete tsa basebelisi ka lebaka la ho se lekane ha maruo. 'Me lekhalo lena le ntse le eketseha ha nako e ntse e feta.

Sebopeho sa Masonry se hahiloeng ka hare Karolo e 'ngoe ea sethala sa marang-rang e tlang haufinyane mme eo ke e thabetseng haholo ke CSS Masonry.

E re ke qale ka ho hlalosa hore na Masonry ke eng. Masonry ke Eng Masonry ke mofuta oa sebopeho o ileng oa tsebahala ke Pinterest lilemong tse fetileng. E theha lipina tse ikemetseng tsa litaba tseo lintho li iphuthelang tsona haufi le qalo ea pina ka moo li ka khonang.

Batho ba bangata ba bona Masonry e le khetho e ntle bakeng sa li-portfolio le li-galleries tsa lifoto, tseo ka sebele e ka li etsang. Empa Masonry e fetoha le maemo ho feta seo u se bonang ho Pinterest, 'me ha e felle feela ka meralo e kang phororo. Ka sebopeho sa Masonry:

Lipina e ka ba litšiea kapa mela:

Lipina tsa litaba ha lia tlameha ho lekana kaofela:

Lintho li ka aroloa ka litsela tse ngata:

Lintho li ka behoa litseleng tse khethehileng; ha baa tlameha ho lula ba latela algorithm ea ho beha othomathike:

Li-demos Mona ke li-demos tse 'maloa tse bonolo tseo ke li entseng ka ho sebelisa ts'ebetsong e tlang ea CSS Masonry ho Chromium. Sets'oants'o sa pokello ea litšoantšo, se bonts'ang hore na lintho (sehlooho tabeng ena) li ka tsamaisa lipina tse ngata joang:

Sebaka se seng sa pokello ea lifoto se bonts'a lipina tsa boholo bo fapaneng:

Ponahalo ea sebaka sa litaba se nang le lipina tse batsi ho feta tse ling, le lintho tse ling tse akaretsang bophara bohle ba moralo:

Letlapa la kanban le bonts'ang hore lintho li ka beoa lipina tse itseng:

Tlhokomeliso: Theli-demos tse fetileng li entsoe ka mofuta oa Chromium o seng o so fumanehe ho basebelisi ba bangata ba marang-rang, hobane CSS Masonry e sa tsoa qala ho kengoa ts'ebetsong ho libatli. Leha ho le joalo, baetsi ba marang-rang ba 'nile ba sebelisa lilaebrari ka thabo ho theha meralo ea Masonry ka lilemo tse ngata. Libaka tse Sebelisang Masonry Kajeno Ehlile, Masonry e atile haholo webosaeteng kajeno. Mehlala e 'maloa eo ke e fumaneng ntle le Pinterest ke ena:

Le mehlala e meng e seng mekae, e sa totobalang haholo:

Joale, libopeho tsee li entsoe joang? Mekhoa ea ho sebetsa Leqheka le leng leo ke le boneng le sebelisoa ke ho sebelisa sebopeho sa Flexbox ho fapana le hoo, ho fetola tataiso ea eona ho kholumo, le ho e beha hore e phuthele. Ka tsela ena, o ka beha lintho tsa bophahamo bo fapaneng ka likholomo tse ngata, tse ikemetseng, tse fanang ka maikutlo a sebopeho sa Masonry:

Leha ho le joalo, ho na le litšitiso tse peli mabapi le mokhoa ona:

Taelo ea lintho e fapane le seo e ka bang sona ka sebopeho sa 'nete sa Masonry. Ka Flexbox, lintho li tlatsa kholomo ea pele pele, 'me ha e tletse, ebe u ea kholomong e latelang. Ka Masonry, lintho li ne li tla bokellana pina efe kapa efe (kapa kholomo tabeng ena) e nang le sebaka se eketsehileng. Empa hape, mme mohlomong ho bohlokoa le ho feta, mokhoa ona oa ho sebetsa o hloka hore o behe bophahamo bo tsitsitseng ho setshelo sa Flexbox; ho seng joalo, ho ne ho ke ke ha phutheloa.

Lilaebrari tsa Masonry tsa mokha oa boraro Bakeng sa linyeoe tse tsoetseng pele, bahlahisi ba ntse ba sebelisa lilaebrari. Laeborari e tsebahalang le e tsebahalang haholo bakeng sa sena e bitsoa Masonry, 'me e jarolleloa makhetlo a ka bang 200,000 ka beke ho latela NPM. Squarespace e boetse e fana ka karolo ea moralo e fanang ka sebopeho sa Masonry, bakeng sa mofuta o mong o se nang khoutu, 'me libaka tse ngata li e sebelisa. Likhetho tsena ka bobeli li sebelisa khoutu ea JavaScript ho beha lintho ka har'a sebopeho. Masonry e hahiloeng ka hare Ke thabile haholo hore ebe Masonry e se e qala ho hlaha ho libatli e le karolo ea CSS e hahelletsoeng. Kamora nako, o tla khona ho sebelisa Masonry joalo ka ha o etsa Grid kapa Flexbox, ke hore, ntle le ho hloka li-workaround kapa khoutu ea motho oa boraro. Sehlopha sa ka sa Microsoft se ntse se kenya ts'ehetso ea Masonry e hahelletsoeng ka har'a projeke ea mohloli o bulehileng oa Chromium, eo Edge, Chrome, le libatli tse ling tse ngata li thehiloeng ho eona. Mozilla e ne e hlile e le morekisi oa pele oa sebatli ho sisinya ts'ebetsong ea liteko ea Masonry morao koana ka 2020. 'Me Apple e boetse e thahasella haholo ho etsa hore sebopeho sena se secha sa webo se etsahale. Mosebetsi oa ho tiisa sebopeho le ona o ntse o tsoela pele, ka tumellano ka har'a sehlopha sa basebetsi sa CSS mabapi le tataiso e akaretsang esita le pontšo e ncha ea mofuta oa pontšo: grid-lanes. Haeba u batla ho ithuta haholoanyane ka Masonry le ho latela tsoelo-pele, sheba leqephe la ka la lisebelisoa tsa CSS Masonry. Ha nako e ntse e ea, ha Masonry e fetoha tšobotsi ea Baseline, joalo ka Grid kapa Flexbox, re tla khona ho e sebelisa feela le ho rua molemo ho:

Tshebetso e betere, Karabelo e betere, Bonolo ba tšebeliso le khoutu e bonolo.

A re ke re hlahlobeng tsena ka hloko. Tshebetso e Ntle Ho iketsetsa sistimi ea hau ea sebopeho sa Masonry, kapa ho sebelisa laeborari ea motho oa boraro, ho bolela hore o tla tlameha ho tsamaisa khoutu ea JavaScript ho beha lintho skrineng. Sena se boetse se bolela hore khoutu ena e tla fana ka thibelo. Ehlile, ha ho letho le tla hlaha, kapa lintho li ke ke tsa ba libakeng tse nepahetseng kapa tsa boholo bo nepahetseng, ho fihlela khoutu ea JavaScript e sebetsa. Sebopeho sa masonry se atisa ho sebelisoa bakeng sa karolo e kholo ea leqephe la websaete, ho bolelang hore khoutu e tla be e etsa hore litaba tsa hau tsa sehlooho li hlahe ka morao ho feta kamoo li neng li ka ba teng, ho nyenyefatsa LCP ea hau, kapa Largest Contentful Paint metric, e nang le karolo e kholo mosebetsing o lemohuoang le ho ntlafatsa mochine oa ho batla. Ke lekile laeborari ea Masonry JS ka sebopeho se bonolo le ka ho etsisa khokahano e liehang ea 4G ho DevTools. Laebrari ha e kholo haholo (24KB, 7.8KB gzipped), empa ho nkile 600ms ho kenya tlas'a maemo a ka a teko. Mona ke rekoto ea ts'ebetso e bonts'ang nako e telele ea 600ms bakeng sa laeborari ea Masonry, le hore ha ho mosebetsi o mong oa ho fana o etsahetseng nakong eo e ntseng e etsahala:

Ho phaella moo, ka mor'a nako ea pele ea mojaro, sengoloa se jarollotsoeng se ne se hloka ho aroloa, ho bokelloa, ebe ho tsamaisoa. Tsena tsohle, joalo ka ha ho boletsoe pejana, li ne li thibela ho fetoleloa ha leqephe. Ka ts'ebetsong ea Masonry e hahelletsoeng ka har'a sebatli, re ke ke ra ba le mongolo oo re ka o kenyang le ho o tsamaisa. Enjene ea sebatli e tla etsa ntho ea eona nakong ea mohato oa pele oa ho fana ka leqephe. Karabelo e Molemo Joalo ka ha leqephe le qala ho jara, ho fetola boholo ba fensetere ea sebatli ho lebisa ho hlahiseng sebopeho leqepheng leo hape. Leha ho le joalo, nakong ena, haeba leqephe le sebelisa laebrari ea Masonry JS, ha ho hlokahale hore u kenye script hape, hobane e se e ntse e le teng.Mona. Leha ho le joalo, khoutu e tsamaisang lintho libakeng tse nepahetseng e hloka ho sebetsa. Joale laeborari ena e bonahala e potlakile haholo ha e etsa sena ha leqephe le jara. Leha ho le joalo, e phelisa lintho ha li hloka ho fallela sebakeng se fapaneng ka ho fetola boholo ba fensetere, 'me sena se etsa phapang e kholo. Ehlile, basebelisi ha ba qete nako ba fetola li-browser tsa bona lifensetere joalo ka ha re etsa. Empa boiphihlelo bona bo matla ba ho fetola boholo bo ka ba bo makatsang mme bo eketsa nako eo ho nahanoang hore e nka hore leqephe le ikamahanye le boholo ba lona bo bocha. Bonolo ba ho Sebelisa Le Khoutu e Bonolo Ho bonolo hakae ho sebelisa sebopeho sa webo le hore na khoutu e shebahala e le bonolo hakae ke lintlha tsa bohlokoa tse ka etsang phapang e kholo ho sehlopha sa hau. Ha li na ho ba tsa bohlokoa joalo ka boiphihlelo ba ho qetela ba mosebelisi, ehlile, empa boiphihlelo ba nts'etsopele bo ama ts'ebetso ea ts'ebetso. Ho sebelisa sebopeho sa webo se hahelletsoeng ho tla le melemo ea bohlokoa ka pele:

Bahlahisi ba seng ba ntse ba tseba HTML, CSS, le JS ba tla khona ho sebelisa tšobotsi eo habonolo hobane e etselitsoe ho hokahana hantle le ho lumellana le sethala sa webo kaofela. Ha ho na kotsi ea ho senya liphetoho tse hlahisoang mabapi le hore na karolo e sebelisoa joang. Ho na le kotsi e ka bang lefela ea hore tšobotsi eo e ka tloheloa kapa e sa hlokomeloe.

Tabeng ea Masonry e hahiloeng, hobane ke sebopeho sa khale, u se sebelisa ho tsoa ho CSS, joalo ka Grid kapa Flexbox, ha ho na JS e amehang. Hape, lisebelisoa tse ling tse amanang le sebopeho sa CSS, joalo ka lekhalo, li sebetsa kamoo u neng u ka li lebella. Ha ho na maqheka kapa li-workaround tseo u ka li tsebang, 'me lintho tseo u ithutang tsona li ngotsoe ho MDN. Bakeng sa Masonry JS lib, ho qala ho batla ho rarahane: ho hloka tšobotsi ea data e nang le syntax e itseng, hammoho le likarolo tse patiloeng tsa HTML ho beha kholomo le boholo ba lekhalo. Hape, haeba u batla ho pharalla litšiea, u lokela ho kenyelletsa boholo ba lekhalo ka bouena ho qoba mathata:

.track-size, .ntho { bophara: 20%; } .kakaretso ea metsi { bophara: 1rem; } .ntho { bophahamo: 100px; margin-block-end: 1rem; } .item:nth-child(e makatsang) { bophahamo: 200px; } .item--width2 { bophara: calc (40% + 1rem); }

...

Ha re bapise sena le hore na ts'ebetsong ea Masonry e hahelletsoeng e ka shebahala joang: .setshelo { pontšo: marang-rang; marang-rang: pheta-pheta (4, 20%); lekhalo: 1rem; } .ntho { bophahamo: 100px; } .item:nth-child(e makatsang) { bophahamo: 200px; } .item--width2 { grid-kholomo: span 2; }

...

Khoutu e bonolo, e nang le komporo e ka sebelisang lintho tse kang lekhalo le moo lipina tsa marang-rang li etsoang ka span 2, joalo ka grid, 'me ha e hloke hore o bale bophara bo nepahetseng bo kenyelletsang boholo ba lekhalo. Joang ho Tseba Se Fumanehang le Ha se Fumaneha? Ka kakaretso, potso ha se hore na u lokela ho sebelisa Masonry e hahiloeng ka har'a laeborari ea JS, empa ho fapana le hoo. Laebrari ea Masonry JS e hlolla ebile e 'nile ea tlatsa lekhalo sethaleng sa marang-rang ka lilemo tse ngata, le bakeng sa bahlahisi ba bangata ba thabileng le basebelisi. E na le litšitiso tse 'maloa haeba u li bapisa le ts'ebetsong ea Masonry e hahiloeng, ehlile, empa tseo ha li bohlokoa haeba ts'ebetsong eo e sa itokisetsa. Ho bonolo ho 'na ho thathamisa likarolo tsena tse ncha tsa sethala sa marang-rang hobane ke sebetsa ho morekisi oa sebatli, ka hona ke tloaetse ho tseba se tlang. Empa bahlahisi ba atisa ho arolelana, lipatlisiso ka mor'a lipatlisiso, hore ho boloka tlaleho ea lintho tse ncha ho thata. Ho lula u tseba ho thata, 'me lik'hamphani ha se kamehla li etelletsang pele ho ithuta. Ho thusa ka sena, mona ke lisebelisoa tse 'maloa tse fanang ka lintlafatso ka mekhoa e bonolo le e kopanetsoeng e le hore u ka fumana lintlha tseo u li hlokang kapele:

Sethala sa Marang-rang se na le sebaka sa mofuputsi: U kanna oa khahloa ke leqephe la eona la lintlha tsa tokollo. Mme, haeba o rata RSS, sheba phepelo ya dinoutu tsa tokollo, mmoho le Diphepelo tsa Baseline Tse Ntjha Tse Fumanehang le Tse Fumanehang Haholo.

WebsaeteDashboard ea Boemo ba Sethala: U kanna ua rata maqephe a eona a fapaneng a selemo sa Baseline.

Leqephe la 'mapa oa tsela ea Sethala sa Chrome.

Haeba u na le nako e eketsehileng, u kanna ua khahloa ke lintlha tsa tokollo tsa barekisi ba sebatli:

Chrome Qetello Firefox Safari

Bakeng sa lisebelisoa tse ling, hlahloba Cheatsheet ea ka ea Sethala sa Marang-rang. Ntho eaka e ntse e sa Phethahatsoa Ke lehlakore le leng la bothata. Leha u ka fumana nako, matla, le mekhoa ea ho boloka tlaleho, ho ntse ho na le pherekano ea ho utloa lentsoe la hau le hore likarolo tseo u li ratang li kenngoe tšebetsong. Mohlomong u se u emetse lilemo tse ngata hore bothata bo itseng bo rarolloe, kapa karolo e itseng ea ho romelloa ka sebatli moo e ntseng e le sieo. Seo ke tla se bua ke barekisi ba sebatli ba mamela. Ke karolo ea lihlopha tse 'maloa tsa mekhatlo e fapaneng moo re buisanang ka matšoao a nts'etsopele le maikutlo ka linako tsohle. Re sheba mehloli e mengata e fapaneng ea maikutlo, ka hare ho morekisi e mong le e mong oa sebatli le kantle / sechaba ka liforamo, merero e bulehileng ea mohloli, li-blog, le lipatlisiso. Hape, re lula re leka ho theha mekhoa e betere ea hore baetsi ba lihlahisoa ba arolelane litlhoko tsa bona tse ikhethileng le linyeoe tsa ts'ebeliso. Kahoo, haeba u khona, ka kopo kopa ho eketsehileng ho barekisi ba li-browser 'me u re hatelle ho kenya tšebetsong likarolo tseo u li hlokang. Ke fumana hore ho nka nako, hape ho ka tšosa (ho sa bue ka mokoallo o phahameng oa ho kena), empa hape o sebetsa. Litsela tse 'maloa tseo u ka etsang hore lentsoe la hau (kapa la k'hamphani ea hau) le utluoe ka tsona: Nka liphuputso tsa selemo le selemo tsa State of JS, State of CSS, le State of HTML. Ba bapala karolo e kholo ea hore na barekisi ba li-browser ba etelletsa mosebetsi oa bona pele joang. Haeba o hloka API e ikhethileng e thehiloeng maemong a tloaelehileng hore e kenngoe tšebetsong ka linako tsohle ho libatli, nahana ka ho fana ka tlhahiso nakong e latelang ea projeke ea Interop. Ho hloka nako e eketsehileng, empa nahana kamoo Shopify le RUMvision ba arolelaneng lethathamo la litakatso tsa bona bakeng sa Interop 2026. Lintlha tse qaqileng tse kang tsena li ka ba molemo haholo bakeng sa barekisi ba marang-rang ho etelletsa pele. Bakeng sa lihokelo tse ling tse thusang ho susumetsa barekisi ba sebatli, sheba 'Navigating the Web Platform Cheatsheet. Qetello Ho koala, ke tšepa hore sengoloa sena se u sietse lintho tse 'maloa tseo u lokelang ho nahana ka tsona:

Thabo bakeng sa Masonry le likarolo tse ling tse tlang tsa webo. Likarolo tse 'maloa tsa webo tseo u ka ratang ho qala ho li sebelisa. Likarolo tse 'maloa tsa tloaelo kapa khoutu ea motho oa boraro eo u ka khonang ho e tlosa molemong oa likarolo tse hahelletsoeng. Litsela tse 'maloa tsa ho boloka tlaleho ea se tlang le ho susumetsa barekisi ba sebatli.

Habohlokoa le ho feta, ke tšepa hore ke u kholisitse melemo ea ho sebelisa sethala sa marang-rang ka botlalo.

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