Txog 15 xyoo dhau los, kuv tau ua haujlwm ntawm ib lub tuam txhab uas peb tsim cov apps rau cov neeg ua haujlwm mus ncig, cov neeg ua haujlwm hauv tshav dav hlau, thiab cov tuam txhab dav hlau. Peb kuj tau tsim peb tus kheej lub hauv paus hauv tsev rau UI Cheebtsam thiab ib nplooj ntawv app muaj peev xwm. Peb muaj cov khoom xyaw rau txhua yam: teb, nyees khawm, tabs, ntau yam, datatables, menus, datepickers, selects, thiab multiselects. Peb txawm muaj div tivthaiv. Peb cov div tivthaiv tau zoo los ntawm txoj kev, nws tso cai rau peb ua qhov sib npaug ntawm txhua qhov browser, uas, ntseeg nws lossis tsis, tsis yog ib qho yooj yim ua thaum lub sijhawm.

Peb txoj haujlwm tau tshwm sim ntawm qhov chaw hauv peb keeb kwm thaum JS, Ajax, thiab dynamic HTML tau pom tias yog kev hloov pauv uas coj peb mus rau yav tom ntej. Tam sim ntawd, peb tuaj yeem hloov kho nplooj ntawv dynamically, tau txais cov ntaub ntawv los ntawm lub server, thiab zam kom tsis txhob mus rau lwm nplooj ntawv, uas tau pom tias qeeb thiab flashed ib daim duab plaub loj dawb ntawm lub vijtsam ntawm ob nplooj ntawv. Muaj ib kab lus, ua nrov los ntawm Jeff Atwood (tus tsim ntawm StackOverflow), uas nyeem: "Txhua daim ntawv thov uas tuaj yeem sau rau hauv JavaScript thaum kawg yuav raug sau rau hauv JavaScript." - Jeff Atwood

Rau peb thaum lub sijhawm, qhov no xav zoo li qhov twv yuav raug mus thiab tsim cov apps. Nws zoo li daim pam tso cai ua txhua yam nrog JS. Yog li peb tau ua txhua yam nrog JS, thiab peb tsis tshua siv sijhawm los tshawb nrhiav lwm txoj hauv kev ua haujlwm. Peb tsis tau xav tias qhov kev txhawb siab kom kawm tau zoo li cas HTML thiab CSS tuaj yeem ua tau. Peb tsis tshua pom lub vev xaib ua qhov hloov kho app platform hauv nws tag nrho. Peb feem ntau pom nws yog ib yam dab tsi peb xav tau los ua haujlwm ib puag ncig, tshwj xeeb tshaj yog thaum nws los txog rau kev txhawb nqa browser. Peb tsuas tuaj yeem pov ntau JS ntawm nws kom ua tiav. Puas yuav siv sijhawm los kawm ntxiv txog seb lub vev xaib ua haujlwm li cas thiab muaj dab tsi hauv lub platform tau pab kuv? Tseeb, kuv tuaj yeem tau shaved ib pawg ntawm cov lej uas tsis xav tau tiag tiag. Tab sis, thaum lub sij hawm, tej zaum tsis yog li ntawd ntau. Koj pom, qhov sib txawv ntawm qhov browser tau zoo nkauj heev thaum ntawd. Qhov no yog lub sijhawm thaum Internet Explorer tseem yog qhov tseem ceeb browser, nrog Firefox yog qhov thib ob ze, tab sis pib poob kev lag luam vim Chrome tau txais cov koob meej sai. Txawm hais tias Chrome thiab Firefox tau zoo heev ntawm kev pom zoo ntawm cov qauv hauv web, qhov chaw uas peb cov apps tau khiav txhais tau tias peb yuav tsum txhawb IE6 ntev. Txawm tias thaum peb raug tso cai los txhawb IE8, peb tseem yuav tsum tau nrog ntau qhov sib txawv ntawm browsers. Tsis tas li ntawd xwb, tab sis lub vev xaib ntawm lub sijhawm tsuas yog tsis muaj ntau lub peev xwm ua tau rau hauv lub platform.

Cia siab rau hnub no. Tej yam tau hloov pauv loj heev. Tsis tsuas yog peb muaj ntau lub peev xwm ntau dua li yav dhau los, tab sis tus nqi uas lawv tau dhau los tau nce ntxiv thiab. Cia kuv nug cov lus nug dua, tom qab ntawd: Puas yuav siv sijhawm los kawm ntxiv txog seb lub vev xaib ua haujlwm li cas thiab muaj dab tsi hauv lub platform pab koj hnub no? Yog lawm. Kev kawm kom nkag siab thiab siv lub vev xaib niaj hnub no ua rau koj muaj txiaj ntsig zoo dua lwm tus tsim tawm. Txawm hais tias koj ua haujlwm ntawm kev ua tau zoo, kev nkag mus tau, kev teb, tag nrho lawv ua ke, lossis tsuas yog xa UI cov yam ntxwv, yog tias koj xav ua nws ua tus kws ua haujlwm lub luag haujlwm, paub txog cov cuab yeej uas muaj rau koj pab koj mus txog koj lub hom phiaj sai dua thiab zoo dua. Tej yam uas koj yuav tsis xav tau ib lub tsev qiv ntawv ntxiv lawm Paub txog dab tsi browsers txhawb hnub no, cov lus nug, yog li ntawd, yog: Peb tuaj yeem ua dab tsi? Peb puas xav tau lub div tivthaiv los ua cov ces kaum sib npaug hauv 2025? Tau kawg, peb tsis ua. Cov cuab yeej ciam teb-kub tau txais kev txhawb nqa los ntawm txhua qhov browsers siv tam sim no rau ntau tshaj 15 xyoo ntawm qhov no. Thiab ces kaum-puab kuj yuav los sai sai, rau txawm fancier fab. Cia peb saib cov yam ntxwv tsis ntev los no uas tam sim no muaj nyob hauv txhua qhov browsers loj, thiab koj tuaj yeem siv los hloov cov kev vam khom uas twb muaj lawm hauv koj cov codebase. Lub ntsiab lus tsis yog kom tshem tawm tag nrho koj cov tsev qiv ntawv uas koj hlub thiab rov sau koj cov codebase. Raws li rau txhua yam ntxiv, koj yuav tsum coj tus browser txhawb nqa ua ntej thiab txiav txim siab raws li lwm yam tshwj xeeb rau koj qhov project. Cov yam ntxwv hauv qab no yog siv nyob rau hauv peb lub ntsiab browser xyaw (Chromium, WebKit, thiab Gecko), tab sis koj yuav muaj qhov sib txawv ntawm qhov browser uas yuav tiv thaiv koj ntawm kev siv tam sim ntawd. Tam sim no tseem yog lub sijhawm zoo los kawm txog cov yam ntxwv no, txawm li cas los xij, thiab tej zaum yuav npaj siv lawv ntawm qee lub sijhawm. Popovers Thiab Dialogs Lub Popover API,

HTML element, thiab ::backdrop pseudo-element tuaj yeem pab koj tshem tawm cov kev vam khom ntawm cov popup,tooltip, thiab cov tsev qiv ntawv sib tham, xws li Floating UI, Tippy.js, Tether, lossis React Tooltip. Lawv tswj kev nkag mus tau yooj yim thiab kev tswj xyuas kom pom tseeb rau koj, tawm ntawm lub npov, tuaj yeem hloov kho tau yooj yim los ntawm kev siv CSS, thiab tuaj yeem ua kom yooj yim. Accordions Cov ntsiab lus , nws lub npe cwj pwm rau kev sib koom ua ke, thiab cov ::details-cov ntsiab lus pseudo-element tshem tawm qhov xav tau rau cov khoom siv accordion xws li Bootstrap Accordion lossis React Accordion tivthaiv. Tsuas yog siv lub platform ntawm no txhais tau tias nws yooj yim dua rau cov neeg uas paub HTML / CSS kom nkag siab koj cov cai yam tsis tas yuav tsum xub kawm siv lub tsev qiv ntawv tshwj xeeb. Nws kuj txhais tau tias koj muaj kev tiv thaiv kom tsis txhob hloov pauv hauv lub tsev qiv ntawv lossis kev txiav tawm ntawm lub tsev qiv ntawv ntawd. Thiab, ntawm chav kawm, nws txhais tau tias tsawg code mus download tau thiab khiav. Kev sib koom ua ke cov ntsiab lus tsis tas yuav tsum tau JS qhib, kaw, lossis ua haujlwm. CSS Syntax Cov khaubncaws sab nraud povtseg, rau kev sib koom ua ke CSS codebase, CSS zes, rau ntau compact CSS, cov xim tshiab, cov xim txheeb ze, thiab xim sib xyaw, cov lej tshiab xws li abs(), kos npe(), pow() thiab lwm tus pab txo qis kev vam khom rau CSS pre-processors, cov tsev qiv ntawv siv hluav taws xob zoo li Bootstrap thiab Tailwind, lossis txawm tias runtime CSS-in- Lub game changer : has(), ib tug ntawm cov feem ntau thov nta rau lub sij hawm ntev, tshem tawm qhov yuav tsum tau rau ntau nyuaj JS-raws li kev daws teeb meem. JS Utilities Niaj hnub nimno Array txoj kev zoo li findLast(), los yog ntawm (), nrog rau cov txheej txheem xws li qhov sib txawv(), kev sib tshuam(), union() thiab lwm tus tuaj yeem txo cov kev vam khom ntawm cov tsev qiv ntawv zoo li Lodash. Ntim Cov Lus Nug Cov lus nug ntim khoom ua rau cov khoom siv UI teb rau lwm yam uas tsis yog qhov loj ntawm qhov chaw saib, thiab yog li ntawd ua rau lawv rov siv tau ntau dua nyob rau hauv cov ntsiab lus sib txawv. Tsis tas yuav siv lub tsev qiv ntawv JS-heavy UI rau qhov no ntxiv lawm, thiab tsis tas yuav siv polyfill ib yam nkaus. Layout Daim phiaj, subgrid, flexbox, lossis ntau kab tau nyob ib puag ncig ntev tam sim no, tab sis saib cov txiaj ntsig ntawm Lub Xeev ntawm CSS cov kev tshawb fawb, nws pom tseeb tias cov neeg tsim khoom yuav tsum ceev faj heev nrog kev siv cov khoom tshiab, thiab tos ntev heev ua ntej lawv ua. Cov yam ntxwv no tau ua Baseline ntev ntev thiab koj tuaj yeem siv lawv kom tshem tawm cov kev vam khom ntawm cov khoom xws li Bootstrap's grid system, Foundation Framework's flexbox utilities, Bulma fixed grid, Materialize grid, or Tailwind columns. Kuv tsis tau hais tias koj yuav tsum tso koj lub moj khaum. Koj pab neeg tau txais nws vim li cas, thiab tshem tawm nws yuav yog qhov project loj. Tab sis saib dab tsi lub vev xaib platform tuaj yeem muab yam tsis muaj tus neeg thib peb wrapper nyob rau sab saum toj los nrog ntau cov txiaj ntsig. Tej yam uas koj yuav tsis xav tau ntxiv lawm yav tom ntej Tam sim no, cia peb saib sai ntawm qee yam uas koj yuav tsis xav tau lub tsev qiv ntawv rau yav tom ntej. Qhov ntawd yog hais tias, cov khoom hauv qab no tsis tau npaj txhij rau kev saws loj, tab sis kev paub txog lawv thiab kev npaj rau kev siv yav tom ntej tuaj yeem pab tau. Anchor Positioning CSS anchor positioning tuav txoj hauj lwm ntawm popovers thiab cov lus qhia ntsig txog lwm cov ntsiab lus, thiab saib xyuas kom lawv saib, txawm tias thaum tsiv, scrolling, lossis resize nplooj ntawv. Qhov no yog qhov ua tau zoo ntxiv rau Popover API tau hais ua ntej, uas yuav ua rau nws yooj yim dua rau kev tsiv mus nyob deb ntawm ntau qhov kev ua tau zoo-kev daws teeb meem JS. Navigation API Cov Navigation API tuaj yeem siv los tswj kev taw qhia hauv ib nplooj ntawv apps thiab tej zaum yuav yog ib qho zoo ntxiv, lossis txawm tias hloov pauv, rau React Router, Next.js routing, lossis Angular routing cov haujlwm. Saib Transitions API View Transitions API tuaj yeem ua rau muaj kev cuam tshuam ntawm cov xeev sib txawv ntawm nplooj ntawv. Ntawm ib nplooj ntawv thov, qhov no ua rau kev hloov pauv ntawm cov xeev yooj yim heev, thiab tuaj yeem pab koj tshem tawm cov tsev qiv ntawv animation xws li Anime.js, GSAP, lossis Motion.dev. Txawm zoo dua, API tuaj yeem siv nrog ntau nplooj ntawv. Nco ntsoov ua ntej, thaum kuv hais tias yog vim li cas peb tsim ib nplooj ntawv apps ntawm lub tuam txhab uas kuv ua haujlwm 15 xyoo dhau los yog kom tsis txhob muaj lub ntsej muag dawb ntawm nplooj ntawv reloads thaum navigating? Yog tias API tau muaj nyob rau lub sijhawm, peb yuav muaj peev xwm ua tiav cov nplooj ntawv hloov pauv zoo nkauj yam tsis muaj nplooj ntawv ib leeg thiab tsis muaj qhov pib loj loj ntawm tag nrho cov app. Scroll-tsav Animations Scroll-tsav animations khiav ntawm tus neeg siv txoj haujlwm scroll, ntau dua li lub sijhawm, ua rau lawv muaj txiaj ntsig zoo rau kev hais dab neeg thiab cov khoom ncig xyuas. Qee tus neeg tau dhau mus me ntsis saum toj nrog nws, tab sis thaum siv tau zoo, qhov no tuaj yeem yog cov cuab yeej tsim tau zoo, thiab tuaj yeem pab tshem tawm cov tsev qiv ntawv xws li: ScrollReveal, GSAP Scroll, lossisWOW.js. Customizable Xaiv Ib tug customizable xaiv yog ib txwm lub ntsiab lus uas tso cai rau koj hloov kho nws cov tsos thiab cov ntsiab lus, thaum ua kom muaj kev nkag tau thiab cov txiaj ntsig kev ua tau zoo. Qhov no tau ntev los lawm, thiab qhov kev thov siab heev, thiab nws zoo kawg nkaus pom nws tuaj rau lub vev xaib sai sai. Nrog rau kev xaiv tsim los tsim tau, koj tuaj yeem thaum kawg ditch tag nrho cov no nyuaj-rau-tso JS code rau koj cov kev cai xaiv cov khoom. CSS Masonry CSS Masonry yog lwm lub vev xaib platform tshiab uas kuv xav siv sijhawm ntxiv. Nrog CSS Masonry, koj tuaj yeem ua tiav cov txheej txheem uas nyuaj heev, lossis txawm tias ua tsis tau, nrog flex, kab sib chaws, lossis lwm yam tsim hauv CSS layout primitives. Cov neeg tsim khoom feem ntau siv cov tsev qiv ntawv thib peb kom ua tiav Masonry layouts, xws li Masonry JS lub tsev qiv ntawv. Tab sis, ntxiv rau qhov ntawd tom qab. Cia peb qhwv cov ntsiab lus no ua ntej mus rau Masonry. Vim Li Cas Koj Yuav Tsum Saib Xyuas Kev ua lag luam ua lag luam yog tag nrho ntawm cov neeg tsim khoom hauv lub vev xaib nrog kev paub dhau los hauv JavaScript thiab cov qauv tshiab ntawm hnub. Yog li, tiag tiag, dab tsi yog qhov tseem ceeb hauv kev kawm siv lub vev xaib platform primitives ntau dua, yog tias koj tuaj yeem ua tib yam nrog cov tsev qiv ntawv, cov khoom siv hluav taws xob, thiab cov txheej txheem uas koj twb paub niaj hnub no? Thaum tag nrho kev lag luam tso siab rau cov txheej txheem no, thiab koj tuaj yeem rub tawm hauv lub tsev qiv ntawv zoo, tsis yog browser neeg muag khoom tsuas yog ua haujlwm nrog cov tsev qiv ntawv no kom lawv thauj khoom thiab khiav nrawm dua, tsis yog sim ntxias cov neeg tsim khoom siv lub platform hloov? Ua ntej tshaj plaws, peb ua haujlwm nrog cov neeg sau ntawv hauv tsev qiv ntawv, thiab peb ua cov txheej txheem zoo dua los ntawm kev kawm txog yam lawv siv thiab txhim kho thaj chaw ntawd. Tab sis qhov thib ob, "tsuas yog siv lub platform" tuaj yeem nqa cov txiaj ntsig tseem ceeb. Xa Tsawg Code rau Devices Qhov txiaj ntsig tseem ceeb yog tias koj xaus xa cov lej tsawg dua rau koj cov neeg siv khoom. Raws li 2024 Web Almanac, qhov nruab nrab ntawm HTTP thov yog nyob ib ncig ntawm 70 ib qhov chaw, feem ntau yog vim JavaScript nrog 23 thov. Nyob rau hauv 2024, JS overtook dluab raws li hom ntaub ntawv tseem ceeb heev. Tus naj npawb nruab nrab ntawm nplooj ntawv thov rau JS cov ntaub ntawv yog 23, nce 8% txij li xyoo 2022. Thiab nplooj ntawv loj hlob zuj zus xyoo dhau xyoo. Cov nplooj ntawv nruab nrab hnyav yog nyob ib ncig ntawm 2MB tam sim no, uas yog 1.8MB ntau dua li 10 xyoo dhau los.

Tseeb, koj qhov kev sib txuas hauv internet tau nce ntxiv, thiab, tab sis qhov ntawd tsis yog rau txhua tus. Thiab tsis yog txhua tus muaj peev xwm ua tau zoo ib yam. Rub tus lej thib peb rau tej yam uas koj tuaj yeem ua nrog lub platform, hloov pauv, feem ntau txhais tau tias koj xa ntau tus lej, thiab yog li ntawd ncav cuag cov neeg siv khoom tsawg dua li qhov koj xav tau. Hauv lub vev xaib, kev ua haujlwm tsis zoo ua rau muaj kev tso tseg loj thiab ua rau lub npe nrov nrov. Khiav Tsawg Code Ntawm Devices Tsis tas li ntawd, cov cai uas koj xa khoom ntawm koj cov neeg siv khoom yuav khiav nrawm dua yog tias nws siv tsawg dua JavaScript abstractions saum lub platform. Nws kuj tseem yuav teb tau ntau dua thiab siv tau los ntawm lub neej ntawd. Tag nrho cov no ua rau ntau dua thiab zoo siab rau cov neeg siv khoom. Tshawb xyuas kuv cov npoj yaig Alex Russell qhov kev ua tau zoo txhua xyoo tsis sib xws qhov sib txawv blog, uas qhia tau hais tias cov khoom siv zoo tshaj plaws tsis tuaj yeem los ntawm kev lag luam nrog ntau lab tus neeg siv vim muaj nyiaj tsis sib xws. Thiab qhov sib txawv no tsuas yog loj hlob dhau sijhawm.

Built-in Masonry Layout Ib lub vev xaib platform uas yuav los sai sai thiab qhov kuv zoo siab heev yog CSS Masonry.

Cia kuv pib los ntawm kev piav qhia tias Masonry yog dab tsi. Masonry yog dab tsi Masonry yog ib hom kev teeb tsa uas tau nrov los ntawm Pinterest xyoo dhau los. Nws tsim kev ywj pheej ntawm cov ntsiab lus nyob rau hauv uas cov khoom ntim lawv tus kheej kom ze rau qhov pib ntawm txoj kev raws li lawv tuaj yeem ua tau.

Ntau tus neeg pom Masonry yog qhov kev xaiv zoo rau cov ntaub ntawv thiab cov duab thaij duab, uas nws yeej ua tau. Tab sis Masonry hloov pauv tau ntau dua li qhov koj pom ntawm Pinterest, thiab nws tsis txwv rau cov dej tsaws tsag zoo li dej tsaws tsag. Hauv Masonry layout:

Cov kab tuaj yeem yog kab lossis kab:

Tracks ntawm cov ntsiab lus tsis yog txhua tus yuav tsum yog tib qhov loj:

Cov khoom tuaj yeem hla ntau txoj kab:

Cov khoom tuaj yeem muab tso rau ntawm qhov tshwj xeeb; lawv tsis tas yuav tsum ua raws li qhov tsis siv neeg tso algorithm:

Demos Nov yog qee qhov yooj yim demos kuv tau ua los ntawm kev siv qhov kev siv yav tom ntej ntawm CSS Masonry hauv Chromium. Daim duab kos duab demo, qhia tias cov khoom (cov npe hauv qhov no) tuaj yeem nthuav dav ntau yam:

Lwm cov duab thaij duab qhia cov kab sib txawv:

Ib qhov chaw xov xwm layout nrog qee qhov kev sib tw dav dua li lwm tus, thiab qee yam khoom nthuav dav tag nrho qhov dav ntawm qhov layout:

Lub rooj tsavxwm kanban uas qhia tias cov khoom tuaj yeem muab tso rau hauv cov kab ke tshwj xeeb:

Lus Cim: Covyav dhau los demos tau tsim nrog ib tug version ntawm Chromium uas tseem tsis tau muaj rau feem ntau cov neeg siv lub web, vim hais tias CSS Masonry tsuas yog nyuam qhuav pib siv nyob rau hauv browsers. Txawm li cas los xij, cov neeg tsim tawm lub vev xaib tau zoo siab siv cov tsev qiv ntawv los tsim Masonry layouts tau ntau xyoo lawm. Cov chaw siv Masonry Hnub no Tseeb tiag, Masonry yog qhov zoo nkauj heev hauv lub vev xaib niaj hnub no. Nov yog qee qhov piv txwv kuv pom dua li Pinterest:

Thiab ob peb yam ntxiv, tsis pom tseeb, piv txwv:

Yog li, cov layouts tau tsim li cas? Kev daws teeb meem Ib qho ua kom yuam kev uas kuv tau pom siv yog siv Flexbox layout hloov, hloov nws cov kev taw qhia mus rau kab, thiab teeb tsa nws los qhwv. Txoj kev no, koj tuaj yeem tso cov khoom ntawm qhov siab sib txawv hauv ntau cov kab ntawv ywj pheej, muab lub tswv yim ntawm Masonry layout:

Txawm li cas los xij, muaj ob qhov kev txwv nrog qhov kev daws teeb meem no:

Qhov kev txiav txim ntawm cov khoom sib txawv ntawm qhov nws yuav yog nrog rau qhov tiag Masonry layout. Nrog Flexbox, cov khoom sau thawj kab ua ntej thiab, thaum nws puv, ces mus rau kab tom ntej. Nrog Masonry, cov khoom yuav pawg nyob rau hauv qhov twg khiav (los yog kem nyob rau hauv cov ntaub ntawv no) muaj ntau qhov chaw. Tab sis kuj, thiab tej zaum tseem ceeb tshaj, qhov kev daws teeb meem no xav kom koj teeb tsa qhov siab ruaj khov rau lub thawv Flexbox; txwv tsis pub, yuav tsis muaj wrapping.

Third-tog Masonry Libraries Rau cov xwm txheej siab dua, cov neeg tsim khoom tau siv cov tsev qiv ntawv. Lub tsev qiv ntawv zoo tshaj plaws thiab nrov tshaj plaws rau qhov no tsuas yog hu ua Masonry, thiab nws tau rub tawm txog 200,000 zaug hauv ib lub lis piam raws li NPM. Squarespace kuj tseem muab cov txheej txheem kev teeb tsa uas ua rau Masonry layout, rau kev xaiv tsis muaj cai, thiab ntau qhov chaw siv nws. Ob qho ntawm cov kev xaiv no siv JavaScript code los tso cov khoom hauv qhov layout. Built-in Masonry Kuv zoo siab heev tias Masonry yog tam sim no pib tshwm hauv browsers raws li qhov ua tau zoo hauv CSS. Sij hawm dhau mus, koj yuav tuaj yeem siv Masonry ib yam li koj ua Grid lossis Flexbox, uas yog, tsis tas yuav muaj kev ua haujlwm lossis tus neeg thib peb code. Kuv pab neeg ntawm Microsoft tau siv cov kev txhawb nqa hauv Masonry hauv Chromium qhib qhov project, uas Edge, Chrome, thiab ntau lwm browsers raws li. Mozilla tiag tiag yog thawj tus neeg muag khoom browser los tawm tswv yim kev sim siv Masonry rov qab rau xyoo 2020. Thiab Apple kuj tau txaus siab heev los ua qhov kev teeb tsa lub vev xaib tshiab no tshwm sim. Kev ua haujlwm los ua tus qauv zoo tseem tab tom mus tom ntej, nrog kev pom zoo hauv CSS ua haujlwm pab pawg txog cov kev taw qhia dav dav thiab txawm tias muaj cov khoom siv tshiab: kab sib chaws. Yog tias koj xav paub ntau ntxiv txog Masonry thiab taug qab kev nce qib, mus saib kuv CSS Masonry cov nplooj ntawv. Nyob rau hauv lub sij hawm, thaum Masonry ua ib tug Baseline feature, ib yam li Grid los yog Flexbox, peb yuav tau yooj yim siv nws thiab tau txais txiaj ntsig los ntawm:

Kev ua tau zoo dua, Kev teb zoo dua, Yooj yim siv thiab yooj yim code.

Cia peb saib ze dua ntawm cov no. Kev ua tau zoo dua Ua koj tus kheej Masonry-zoo li layout system, los yog siv lub tsev qiv ntawv thib peb xwb, txhais tau tias koj yuav tsum tau khiav JavaScript code los tso cov khoom ntawm lub vijtsam. Qhov no kuj txhais tau hais tias qhov chaws no yuav ua rau thaiv. Tseeb, tsis muaj dab tsi yuav tshwm sim, lossis tej yam yuav tsis nyob hauv qhov chaw zoo lossis qhov loj, kom txog rau thaum JavaScript code tau khiav. Masonry layout feem ntau siv rau qhov tseem ceeb ntawm nplooj ntawv web, uas txhais tau hais tias cov cai yuav ua rau koj cov ntsiab lus tseem ceeb tshwm sim tom qab nws tuaj yeem muaj, degrading koj LCP, los yog Cov Ntsiab Lus Loj Tshaj Plaws, uas ua lub luag haujlwm loj hauv kev paub txog kev ua tau zoo thiab kev tshawb fawb cav optimization. Kuv tau sim lub tsev qiv ntawv Masonry JS nrog cov qauv yooj yim thiab los ntawm simulating qeeb 4G kev sib txuas hauv DevTools. Lub tsev qiv ntawv tsis loj heev (24KB, 7.8KB gzipped), tab sis nws siv 600ms los thauj khoom raws li kuv qhov kev xeem. Ntawm no yog ib qho kev ua yeeb yam uas qhia tias ntev 600ms lub sijhawm thauj khoom rau lub tsev qiv ntawv Masonry, thiab tsis muaj lwm yam kev ua haujlwm tshwm sim thaum qhov ntawd tshwm sim:

Tsis tas li ntawd, tom qab pib lub sijhawm thauj khoom, cov ntawv rub tawm tom qab ntawd yuav tsum tau muab cais tawm, muab tso ua ke, thiab tom qab ntawd khiav. Tag nrho cov no, raws li tau hais ua ntej, tau thaiv qhov rendering ntawm nplooj ntawv. Nrog rau kev siv Masonry built-in hauv browser, peb yuav tsis muaj tsab ntawv los thauj thiab khiav. Lub browser cav yuav cia li ua nws cov khoom thaum lub sij hawm thawj nplooj ntawv rendering kauj ruam. Kev Teb zoo dua Zoo ib yam li thaum nplooj ntawv thawj zaug loads, resizing lub qhov rais browser ua rau rendering layout nyob rau nplooj ntawv dua. Lub sijhawm no, txawm li cas los xij, yog tias nplooj ntawv siv lub tsev qiv ntawv Masonry JS, tsis tas yuav thauj cov ntawv dua, vim tias nws twb muaj lawm.ntawm no. Txawm li cas los xij, cov cai uas txav cov khoom hauv qhov chaw zoo yuav tsum tau khiav. Tam sim no lub tsev qiv ntawv tshwj xeeb no zoo li nrawm nrawm ntawm kev ua qhov no thaum nplooj ntawv thauj khoom. Txawm li cas los xij, nws animates cov khoom thaum lawv xav tau txav mus rau qhov chaw sib txawv ntawm qhov rais resize, thiab qhov no ua rau muaj qhov sib txawv loj. Tau kawg, cov neeg siv tsis siv sijhawm hloov kho lawv qhov browser qhov rai ntau npaum li peb cov neeg tsim khoom ua. Tab sis qhov animated resizing kev paub yuav ua tau zoo nkauj jarring thiab ntxiv rau lub perceived lub sij hawm nws yuav siv sij hawm rau nplooj ntawv hloov mus rau nws tshiab loj. Yooj Yim Siv Thiab Yooj Yim Code Nws yooj yim npaum li cas los siv lub vev xaib thiab qhov yooj yim npaum li cas cov cai zoo li yog qhov tseem ceeb uas tuaj yeem ua qhov sib txawv loj rau koj pab neeg. Lawv tsis tuaj yeem yog qhov tseem ceeb raws li qhov kawg ntawm cov neeg siv kev paub, tau kawg, tab sis cov kev paub tsim tawm cuam tshuam rau kev tswj xyuas. Siv lub vev xaib built-in los nrog cov txiaj ntsig tseem ceeb ntawm sab xub ntiag:

Cov neeg tsim khoom uas twb paub HTML, CSS, thiab JS feem ntau yuav tuaj yeem siv cov yam ntxwv ntawd tau yooj yim vim tias nws tau tsim los ua ke kom zoo thiab ua tau raws li qhov seem ntawm lub vev xaib. Tsis muaj kev pheej hmoo ntawm kev hloov pauv tau qhia nyob rau hauv yuav ua li cas siv cov yam ntxwv. Muaj yuav luag tsis muaj kev pheej hmoo ntawm cov yam ntxwv ntawd dhau los ua kev tsis lees paub lossis tsis tau saib xyuas.

Nyob rau hauv cov ntaub ntawv ntawm built-in Masonry, vim hais tias nws yog ib tug layout primitive, koj siv nws los ntawm CSS, ib yam li Grid los yog Flexbox, tsis muaj JS koom. Tsis tas li ntawd, lwm yam kev teeb tsa ntsig txog CSS cov khoom, xws li qhov sib txawv, ua haujlwm raws li koj xav kom lawv ua. Tsis muaj kev dag lossis kev ua haujlwm kom paub txog, thiab tej yam koj kawm tau raug sau tseg rau ntawm MDN. Rau Masonry JS lib, kev pib pib yog qhov nyuaj me ntsis: nws yuav tsum muaj cov ntaub ntawv tus cwj pwm nrog cov ntsiab lus tshwj xeeb, nrog rau cov ntsiab lus zais HTML los teeb tsa kab thiab qhov sib txawv. Ntxiv rau, yog tias koj xav hla txhua kab, koj yuav tsum suav nrog qhov sib txawv ntawm koj tus kheej kom tsis txhob muaj teeb meem:

...

Cia peb piv qhov no rau qhov kev siv Masonry built-in yuav zoo li cas:

...

Yooj yim, yooj yim dua code uas tsuas yog siv tau tej yam xws li qhov sib txawv thiab qhov twg spanning lem yog ua tiav nrog span 2, ib yam li hauv daim phiaj, thiab tsis xav kom koj xam qhov dav dav uas suav nrog qhov sib txawv loj. Yuav Ua Li Cas Paub Txog Dab Tsi Muaj Thiab Thaum Nws Muaj? Zuag qhia tag nrho, cov lus nug tsis yog tiag tiag yog tias koj yuav tsum siv cov Masonry built-in dhau lub tsev qiv ntawv JS, tab sis thaum twg. Lub tsev qiv ntawv Masonry JS yog qhov tsis txaus ntseeg thiab tau sau qhov sib txawv hauv lub vev xaib platform tau ntau xyoo, thiab rau ntau tus neeg tsim khoom zoo siab thiab cov neeg siv. Nws muaj ob peb qhov tsis zoo yog tias koj muab piv rau kev siv Masonry built-in, tau kawg, tab sis cov no tsis tseem ceeb yog tias qhov kev siv tsis tau npaj. Nws yog ib qho yooj yim rau kuv sau cov tshiab lub vev xaib platform tshiab vim tias kuv ua haujlwm ntawm tus neeg muag khoom browser, thiab yog li kuv nyiam paub dab tsi tuaj. Tab sis cov neeg tsim khoom feem ntau qhia, kev soj ntsuam tom qab kev soj ntsuam, tias kev taug qab cov khoom tshiab yog qhov nyuaj. Kev qhia paub yog qhov nyuaj, thiab cov tuam txhab lag luam tsis tas yuav ua qhov tseem ceeb rau kev kawm ib txwm muaj. Txhawm rau pab nrog qhov no, ntawm no yog ob peb qhov kev pabcuam uas muab kev hloov kho tshiab hauv txoj hauv kev yooj yim thiab kev cog lus kom koj tuaj yeem tau txais cov ntaub ntawv koj xav tau sai:

Lub vev xaib platform muaj qhov chaw tshawb nrhiav: Tej zaum koj yuav txaus siab rau nws nplooj ntawv tso tawm. Thiab, yog tias koj nyiam RSS, kos tawm cov ntawv tso tawm pub, nrog rau Cov Txheej Txheem Tshiab Tshiab Muaj thiab Dav Muaj Pub.

Lub Vev XaibPlatform Status dashboard: Tej zaum koj yuav nyiam nws ntau nplooj ntawv Baseline xyoo.

Chrome Platform Status' roadmap nplooj ntawv.

Yog tias koj muaj sijhawm me ntsis ntxiv, koj kuj tuaj yeem txaus siab rau browser neeg muag khoom cov ntawv tso tawm:

Chrome Ntug Firefox Safari

Yog xav paub ntau ntxiv, mus saib kuv Qhov Kev Tshawb Fawb Web Platform Cheatsheet. Kuv Tej Yam Tseem Tsis Tau Ua Qhov ntawd yog lwm sab ntawm qhov teeb meem. Txawm hais tias koj nrhiav tau lub sijhawm, lub zog, thiab txoj hauv kev los taug qab, tseem muaj kev ntxhov siab nrog kev hnov ​​​​koj lub suab thiab koj cov yam ntxwv nyiam ua. Tej zaum koj tau tos ntau xyoo rau cov kab mob tshwj xeeb kom daws tau, lossis ib qho tshwj xeeb rau nkoj hauv qhov browser uas nws tseem ploj lawm. Qhov kuv yuav hais yog tus neeg muag khoom browser mloog. Kuv yog ib feem ntawm ntau pab pawg sib koom ua ke uas peb tham txog cov teeb meem tsim tawm thiab tawm tswv yim txhua lub sijhawm. Peb saib ntau qhov kev tawm tswv yim sib txawv, ob qho tib si sab hauv ntawm txhua tus neeg muag khoom browser thiab sab nraud / pej xeem ntawm cov rooj sib tham, qhib qhov project, blogs, thiab kev tshawb fawb. Thiab, peb ib txwm sim tsim txoj hauv kev zoo dua rau cov neeg tsim khoom los qhia lawv cov kev xav tau tshwj xeeb thiab siv rooj plaub. Yog li, yog tias koj tuaj yeem ua tau, thov thov ntau ntxiv los ntawm cov neeg muag khoom browser thiab xav kom peb siv cov yam ntxwv koj xav tau. Kuv tau txais tias nws yuav siv sij hawm, thiab tseem tuaj yeem ua rau ntshai (tsis hais txog kev txwv siab rau kev nkag), tab sis nws kuj ua haujlwm. Nov yog ob peb txoj hauv kev uas koj tuaj yeem tau txais koj (lossis koj lub tuam txhab) lub suab tau hnov: Siv lub xeev txhua xyoo ntawm JS, Xeev ntawm CSS, thiab Xeev ntawm HTML kev tshawb fawb. Lawv ua lub luag haujlwm tseem ceeb hauv yuav ua li cas cov neeg muag khoom browser tseem ceeb rau lawv txoj haujlwm. Yog tias koj xav tau cov txheej txheem tshwj xeeb raws li API yuav tsum tau ua raws li cov browsers, xav txog kev xa cov lus pom zoo ntawm Interop project iteration tom ntej. Nws xav tau sijhawm ntxiv, tab sis xav txog yuav ua li cas Shopify thiab RUMvision qhia lawv cov npe xav tau rau Interop 2026. Cov ncauj lus kom ntxaws zoo li qhov no tuaj yeem muaj txiaj ntsig zoo rau cov neeg muag khoom browser ua ntej. Txhawm rau kom muaj txiaj ntsig zoo txuas ntxiv los cuam tshuam rau cov neeg muag khoom browser, tshawb xyuas kuv Qhov Kev Tshawb Fawb Web Platform Cheatsheet. Xaus Txhawm rau kaw, kuv vam tias tsab xov xwm no tau tso koj ob peb yam los xav txog:

Kev zoo siab rau Masonry thiab lwm yam hauv lub vev xaib tom ntej. Ob peb lub vev xaib uas koj yuav xav pib siv. Ob peb daim ntawm kev cai lossis 3rd-tog tus lej koj tuaj yeem tshem tawm hauv kev pom zoo ntawm cov nta tsim. Ob peb txoj hauv kev los taug qab qhov yuav los thiab cuam tshuam rau tus neeg muag khoom browser.

Qhov tseem ceeb tshaj, Kuv vam tias kuv tau ntseeg koj ntawm cov txiaj ntsig ntawm kev siv lub vev xaib platform kom nws muaj peev xwm tag nrho.

You May Also Like

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