Tata ki te 15 tau ki muri, i mahi ahau i tetahi kamupene i hangaia e matou he tono mo nga kaihoko haere, kaimahi rererangi, me nga kamupene rererangi. I hangaia ano e matou a maatau ake anga-whare mo nga waahanga UI me nga kaha o te tono wharangi kotahi. I a matou nga waahanga mo nga mea katoa: nga mara, nga paatene, nga ripa, nga awhe, nga ripanga raraunga, nga tahua, nga kaikohikohi ra, nga kowhiri, me nga kowhiringa maha. I a matou ano he waahanga div. He rawe to taatau waahanga div, na reira i taea ai e maatau te mahi i nga kokonga porotaka ki runga i nga kaitirotiro katoa, e whakapono ana kaore ranei, ehara i te mea ngawari ki te mahi i tera wa.
I puta a maatau mahi i tetahi wa i roto i to maatau hitori i te wa i kitea ai a JS, Ajax, me te HTML hihiri hei hurihanga i kawe mai i a maatau ki te heke mai. Inamata, ka taea e matou te whakahou i tetahi whaarangi, te tiki raraunga mai i te tūmau, me te karo ki te whakatere ki etahi atu wharangi, i kitea he puhoi me te kanapa he tapawha ma nui i runga i te mata i waenga i nga wharangi e rua. He rerenga korero, i rongonuihia e Jeff Atwood (te kaiwhakarewa o StackOverflow), e penei ana: "Ko nga tono ka taea te tuhi ki te JavaScript ka tuhia ki te JavaScript." - Jeff Atwood
Ki a matou i tera wa, he ahua maia tenei ki te haere ki te hanga i aua taupānga. He rite ki te whakaaetanga paraikete ki te mahi i nga mea katoa me JS. Na i mahia e matou nga mea katoa me JS, a kaore matou i tino whai wa ki te rangahau i etahi atu huarahi mahi. Kaore matou i tino mohio ki te ako tika i nga mahi ka taea e HTML me CSS. Kaore matou i tino mohio ko te paetukutuku he papaaapono e tipu haere ana i tona katoa. I te nuinga o te wa i kite matou he mea e tika ana kia mahia, ina koa mo te tautoko tirotiro. Ka taea e matou te maka atu i etahi atu JS ki reira kia oti ai nga mahi. Na te whai wa ki te ako atu mo te mahi o te paetukutuku me nga mea e waatea ana i runga i te papaaho i awhina i ahau? Ae, ka taea pea e au te heu i te tini o nga waehere kaore i tino hiahiatia. Engari, i taua wa, kaore pea i te nui. Ka kite koe, he tino nui nga rereketanga o te tirotiro i tera wa. Koinei te wa i noho tonu ai a Internet Explorer te kaitirotiro rangatira, ko Firefox te tuarua tuarua, engari kua timata te ngaro o nga wahanga maakete na te kaha o te rongonui o Chrome. Ahakoa he tino pai a Chrome me Firefox ki te whakaae ki nga paerewa paetukutuku, ko nga taiao e whakahaere ana a maatau taupānga me tautoko i te IE6 mo te wa roa. Ahakoa i whakaaetia matou ki te tautoko i te IE8, he maha tonu nga rereketanga i waenga i nga kaitirotiro. Ehara i te mea ko tera anake, engari ko te paetukutuku o te waa kaore i te maha nga kaha i hangaia ki te papa.
Tere tonu ki tenei ra. Kua tino rerekee nga mea. Ehara i te mea he maha ake o tatou kaha ki era atu o mua, engari kua piki ake ano te reiti e waatea ana. Ka patai ano ahau i te patai: Ka whai waahi koe ki te ako atu mo te mahi o te paetukutuku me nga mea e waatea ana i runga i te papanga hei awhina i a koe i tenei ra? Tino ae. Ko te ako ki te mohio me te whakamahi i te papaaho tukutuku i enei ra ka nui ake te painga ki a koe ki etahi atu kaihanga. Ahakoa kei te mahi koe i runga i te mahi, te urunga, te urupare, te katoa o enei mea katoa, te tuku noa ranei i nga ahuatanga UI, mena kei te pirangi koe ki te mahi hei miihini whai mana, ma te mohio ki nga taputapu e waatea ana ki a koe ka awhina koe ki te eke tere me te pai ake o o whaainga. Ko etahi mea Kaore pea koe e hiahia ki te Whare Pukapuka Ake Ma te mohio he aha nga kaitirotiro e tautoko ana i enei ra, ko te patai, ko te: He aha ta tatou e tuku? Kei te hiahia tatou i tetahi waahanga div hei mahi koki porotaka i te tau 2025? Ko te tikanga, kaore matou. Kua tautokohia te taonga rohe-radius e nga kaitirotiro kua whakamahia inaianei mo nga tau neke atu i te 15 i tenei wa. A kei te tata mai ano te ahua kokonga, mo nga kokonga pai ake. Me titiro ki nga ahuatanga hou e waatea ana i roto i nga kaitirotiro nui katoa, a ka taea e koe te whakamahi hei whakakapi i nga whakawhirinakitanga kei roto i to turanga waehere. Ko te kaupapa ehara i te mea ko te whakarere tonu i o whare pukapuka aroha katoa me te tuhi ano i to turanga waehere. Mo nga mea katoa, me whai whakaaro koe ki te tautoko tirotiro tuatahi me te whakatau i runga i etahi atu mea e pa ana ki to kaupapa. Ko nga ahuatanga e whai ake nei ka whakatinanahia i roto i nga miihini tirotiro matua e toru (Chromium, WebKit, me Gecko), engari he rereke pea nga whakaritenga tautoko tirotiro hei aukati i a koe ki te whakamahi tonu. He wa pai tonu tenei ki te ako mo enei ahuatanga, ahakoa, ka whakamahere pea ki te whakamahi i etahi wa. Popovers Me Nga Korero Ka taea e te Popover API, te
Ae, kua piki ake pea to tere hononga ipurangi, engari ehara i te mea mo te katoa. A kaore nga tangata katoa e rite ana nga taputapu taputapu. Ko te toia i roto i te waehere tuatoru mo nga mea ka taea e koe te mahi me te papaaho, engari ko te tikanga ka tukuna e koe he waehere nui ake, na reira ka iti ake nga kaihoko mai i a koe i mua. I runga i te paetukutuku, ko nga mahi uta kino ka arahi ki nga reiti whakarerenga nui, ka mamae te ingoa o te waitohu. He iti ake te Waehere i runga i nga taputapu I tua atu, ko te waehere ka tukuna e koe i runga i nga taputapu a o kaihoko ka tere ake te tere mena ka iti ake te whakamahi i nga tangohanga JavaScript i runga ake o te papanga. He pai ake pea te urupare me te waatea noa ma te taunoa. Ko enei mea katoa ka nui ake nga kaihoko me te harikoa. Tirohia taku hoa mahi a Alex Russell i ia tau mo nga mahi koretake o te purongo aputa, e whakaatu ana kei te ngaro nga taputapu moni mai i nga maakete me nga piriona o nga kaiwhakamahi na te koretake o te rawa. A ko tenei waahi kei te tipu noa i te waa.
Tahora Masonry Hanga-i roto Ko tetahi ahuatanga o te papanga paetukutuku ka tata nei ka tino koa ahau ko CSS Masonry.
Me timata ahau ma te whakamarama he aha te Masonry. He aha te Masonry Ko te Masonry tetahi momo tahora i rongonuihia e Pinterest i nga tau ki muri. Ka hangaia e ia he ara motuhake o nga ihirangi kei roto i nga taonga e mau ana i a ratou ano kia tata ki te timatanga o te huarahi ka taea.
He maha nga tangata e kite ana i te Masonry he whiringa pai mo nga kopaki me nga taiwhanga whakaahua, ka taea e ia. Engari he ngawari ake a Masonry i nga mea e kitea ana e koe i runga i Pinterest, a kaore i te whakawhäitihia ki nga whakatakotoranga rite-wairere noa. I roto i te whakatakotoranga Masonry:
Ko nga riu he pou, he rarangi ranei:
Kaua e rite te rahi o nga riu ihirangi:
Ka taea e nga taonga te toro i nga riu maha:
Ka taea te whakanoho i nga taonga ki runga i nga ara motuhake; e kore ratou e whai i nga wa katoa i te algorithm tuunga aunoa:
Whakaaturanga Anei etahi whakaaturanga ngawari i mahia e au ma te whakamahi i te whakatinanatanga o te CSS Masonry i Chromium. He whakaaturanga taiwhanga whakaahua, e whakaatu ana me pehea e taea ai e nga taonga (te taitara i tenei keehi) te whanui i nga ara maha:
Ko tetahi atu taiwhanga whakaahua e whakaatu ana i nga ara rereke te rahi:
He tahora pae purongo me etahi riu he whanui ake i etahi atu, me etahi tuemi kei te whanui katoa o te tahora:
He papa kanban e whakaatu ana ka taea te whakanoho i nga mea ki runga i nga ara motuhake:
Tuhipoka: Ko teKo nga whakaaturanga o mua i hangaia me te putanga o Chromium kaore ano kia waatea ki te nuinga o nga kaiwhakamahi paetukutuku, na te mea ka timata noa te CSS Masonry ki te whakatinana i nga kaitirotiro. Heoi, kua harikoa nga kaiwhakawhanake paetukutuku ki te whakamahi i nga whare pukapuka ki te hanga whakatakotoranga Masonry mo nga tau kua hipa. Nga Pae e whakamahi ana i te Masonry i enei ra Ae, he tino noa te Masonry ki runga ipurangi i enei ra. Anei etahi tauira i kitea e au i tua atu i a Pinterest:
Me etahi atu tauira, he iti ake te maarama:
Na, i pehea enei whakatakotoranga? Nga mahi whakatika Ko tetahi tinihanga i kitea e au ko te whakamahi i te whakatakotoranga Flexbox hei utu, ka huri i tana ahunga ki te pou, me te whakanoho ki te takai. Ma tenei ara, ka taea e koe te whakanoho i nga mea rereke rereke i roto i nga pou maha, motuhake, e whakaatu ana i te whakatakotoranga Masonry:
Heoi ano, e rua nga here mo tenei mahi:
He rereke te raupapa o nga taonga mai i te ahua o te whakatakotoranga Masonry. Ma te Flexbox, ka whakakiia nga taonga i te pou tuatahi, a, ka ki tonu, ka haere ki te pou e whai ake nei. Ma te Masonry, ka tapae nga taonga ki te ara (ko te pou ranei i tenei keehi) he nui ake te waahi e waatea ana. Engari ano, me te mea nui ake pea, me whakarite e koe he teitei teitei ki te ipu Flexbox; ki te kore, karekau he takai e puta.
Tuatoru-rōpū Masonry Libraries Mo nga keehi matatau ake, kua whakamahia e nga kaihanga nga whare pukapuka. Ko te whare pukapuka tino rongonui me te rongonui mo tenei ka kiia ko Masonry, a ka tangohia mo te 200,000 nga wa ia wiki e ai ki a NPM. Ka whakarato ano hoki a Squarespace i tetahi waahanga tahora e whakaatu ana i te whakatakotoranga Masonry, mo te kore-waehere rereke, a he maha nga waahi e whakamahi ana. Ko enei waahanga e rua e whakamahi ana i te waehere JavaScript hei tuu i nga taonga ki te tahora. Masonry Hanga-i roto Kei te tino koa ahau kei te timata a Masonry ki te puta ki nga kaitirotiro hei waahanga CSS kua hangaia. Ka roa te wa, ka taea e koe te whakamahi i te Masonry pera i a koe e mahi ana i te Grid, i te Flexbox ranei, ara, me te kore e hiahia ki nga mahi whakatika, ki te waehere tuatoru ranei. Ko taku roopu i Microsoft kei te whakatinana i te tautoko Masonry i roto i te kaupapa puna tuwhera Chromium, i ahu mai a Edge, Chrome, me te maha atu o nga kaitirotiro. Ko Mozilla te kaihoko kaitirotiro tuatahi ki te tono mo te whakatinanatanga whakamatautau mo te Masonry i te tau 2020. A kua tino aro nui a Apple ki te hanga i tenei whakatakotoranga paetukutuku hou. Kei te anga whakamua ano te mahi ki te whakataurite i te ahuatanga, me te whakaaetanga i roto i te roopu mahi CSS mo te ahunga whanui tae atu ki tetahi whakaaturanga momo whakaaturanga hou: nga huarahi-maiti. Mena kei te pirangi koe ki te ako atu mo te Masonry me te whai i te ahunga whakamua, tirohia taku wharangi rauemi CSS Masonry. I te wa, ka noho a Masonry hei waahanga Raina, pera i te Matiti, i te Flexbox ranei, ka taea e tatou te whakamahi noa me te whai hua mai i:
He pai ake te mahi, He pai ake te whakautu, He ngawari te whakamahi me te waehere ngawari.
Kia ata titiro ki enei. He pai ake te mahinga Ko te hanga i to ake punaha whakatakotoranga penei i te Masonry, me te whakamahi ranei i te whare pukapuka tuatoru, ko te tikanga me whakahaere e koe te waehere JavaScript hei tuu i nga taonga ki te mata. Ko te tikanga ano tenei ko tenei waehere ka aukati. Ae, karekau he mea ka puta, karekau ranei nga mea i nga waahi tika, i nga rahi tika ranei, kia rere ra ano taua waehere JavaScript. He maha nga wa ka whakamahia te whakatakotoranga Masonry mo te waahanga matua o te wharangi paetukutuku, ko te tikanga ko te tohu ka puta mai to ihirangi matua i muri mai i tera pea ka puta, ka whakaheke i to LCP, i te inenga Pee Ihirangi Nui ranei, e whai waahi nui ana ki nga mahi ka kitea me te arotautanga miihini rapu. I whakamatauria e ahau te whare pukapuka Masonry JS me te whakatakotoranga ngawari me te whakataurite i te hononga 4G puhoi ki DevTools. Ehara i te mea tino nui te whare pukapuka (24KB, 7.8KB gzipped), engari 600ms te roa ki te uta i raro i aku tikanga whakamatautau. Anei tetahi rekoata mahi e whakaatu ana he 600ms te roa o te wa uta mo te whare pukapuka Masonry, a kaore he mahi whakaputa i puta i te wa e mahi ana:
I tua atu, i muri i te wa uta tuatahi, ka hiahia te tuhi i te tuhinga kua tikiakehia me porotiti, whakahiato, ka whakahaere. Ko enei katoa, pera i korero i mua, i aukati i te whakaputanga o te whaarangi. Ma te whakaurunga Masonry i roto i te tirotiro, karekau he tuhinga hei uta me te whakahaere. Ko te miihini tirotiro ka mahi noa i tana mahi i te waa tuatahi o te whakaputa whaarangi. Pai ake te Whakautu He rite ki te wa ka utaina tuatahi te wharangi, ko te whakarereke i te rahi o te matapihi tirotiro ka puta ano te tahora ki tera wharangi. I tenei wa, ahakoa, mena kei te whakamahi te wharangi i te whare pukapuka Masonry JS, kaore he take ki te uta ano i te tuhinga, na te mea kua oti ke.konei. Heoi, me rere te waehere e nuku ana i nga taonga ki nga waahi tika. Inaianei kei te tino tere te mahi i tenei whare pukapuka i te wa e utaina ana te wharangi. Heoi, ka whakakorikori i nga taonga ina hiahia ratou ki te nuku ki tetahi waahi rereke i runga i te rahi o te matapihi, a he mea nui tenei. Ko te tikanga, kaore nga kaiwhakamahi e whakapau wa ki te whakarereke i o raatau matapihi tirotiro pera i a maatau nga kaihanga. Engari ko tenei wheako whakarereke i te rahi ka taea e koe te tino pukuriri me te taapiri atu ki te waa e whakaarohia ana mo te wharangi ki te urutau ki tona rahi hou. He Maamaa Me Te Waehere Maamaa He ngawari te whakamahi i tetahi waahanga paetukutuku me te ngawari o te ahua o te waehere he mea nui ka puta he rereketanga nui mo to roopu. Kaore e taea e raatau te mea nui ki te wheako kaiwhakamahi whakamutunga, engari ko te wheako kaiwhakawhanake ka pa ki te pupuri. Ma te whakamahi i tetahi waahanga paetukutuku hanga-i roto ka whai hua nui ki tera taha:
Ko nga kaiwhakawhanake kua mohio kua mohio ki te HTML, CSS, me te JS ka kaha ki te whakamahi i taua ahuatanga na te mea i hangaia kia pai te whakauru me te rite ki era atu o te papaaho tukutuku. Karekau he tupono ka pakaru nga huringa ka whakauruhia ki te whakamahi i te waahanga. Karekau he tupono ka ngaro, ka kore ranei e tiakina.
I roto i te take o te Masonry i hangaia, na te mea he tahora tuuturu, ka whakamahia e koe mai i te CSS, penei i te Grid, Flexbox ranei, kaore he JS i uru. Ano, ko etahi atu waahanga CSS e pa ana ki te whakatakotoranga, penei i te aputa, ka mahi pera me taau e hiahia ana. Karekau he tinihanga, he huarahi mahi ranei hei mohio, ko nga mea e akohia ana e koe ka tuhia ki MDN. Mo te Masonry JS lib, he ahua uaua te arawhiti: me whai huanga raraunga me te wetereo motuhake, me nga huānga HTML huna hei whakarite i te rahi o te pou me te aputa. I tua atu, ki te hiahia koe ki te awhi i nga pou, me whakauru koe i te rahi o te aputa hei karo i nga raru:
Me whakatauritea tenei ki te ahua o te whakatinanatanga Masonry i hangaia:
Waehere ngawari ake, kiato noa ka taea te whakamahi i nga mea penei i te aputa me te waahi ka mahia nga ara awha ki te whanganga 2, pera ano i te matiti, kaore koe e hiahia ki te tatau i te whanui tika e uru ana ki te rahi o te aputa. Me pehea te mohio he aha nga mea e waatea ana me te wa e waatea ana? I roto i te katoa, ko te patai ehara i te mea mena ka whakamahi koe i te Masonry i roto i te whare pukapuka JS, engari ko te wa. He mea whakamiharo te whare pukapuka a Masonry JS, a kua whakakiia e ia he waahi i roto i te papaaho tukutuku mo nga tau maha, me te maha o nga kaihanga me nga kaiwhakamahi koa. He iti noa nga ngoikoretanga mena ka whakatauritea e koe ki te whakatinanatanga Masonry kua oti te hanga, engari kaore he mea nui mena kaore i rite te whakatinanatanga. He ngawari noa ki ahau te whakararangi i enei ahuatanga papaaho tukutuku hou na te mea kei te mahi ahau i tetahi kaihoko kaitirotiro, na reira ka mohio au ki nga mea kei te haere mai. Engari he maha nga korero a nga kaihanga, rangahau i muri i nga rangahau, he uaua ki te pupuri i nga mea hou. He uaua te noho whakamohiotanga, kaore nga kamupene e aro ki te ako i nga wa katoa. Hei awhina i tenei, koinei etahi o nga rauemi e whakarato ana i nga whakahoutanga i roto i nga huarahi ngawari me te ngawari kia taea ai e koe te tiki tere i nga korero e hiahia ana koe:
Kei te papanga Tukutuku te pae kaihōpara: Kei te pirangi pea koe ki tana wharangi korero tuku. A, ki te pai koe ki te RSS, tirohia te whangai tuhipoka tuku, tae atu ki nga whangai Baseline Newly Wātea me te Wātea Whānui.
Te TukutukuPapatohu Tūnga Papatohu: Ka pai pea koe ki ona wharangi tau turanga.
Te Wharangi Mahere Paerewa Chrome.
Mena he iti ake to wa, ka aro pea koe ki nga korero tuku a nga kaihoko tirotiro:
Chrome Tapa Firefox Safari
Mo etahi atu rauemi, tirohia taku Navigating the Web Platform Cheatsheet. Kare ano taku mea i whakatinanahia Ko tera tera taha o te raru. Ahakoa ka kitea e koe te wa, te kaha, me nga huarahi ki te whaiwhai haere, kei te pouri tonu te rongo i to reo me te whakatinana i o ahuatanga tino pai. Akene kua tatari koe mo nga tau mo tetahi bug motuhake kia whakatauhia, he waahanga motuhake ranei hei tuku i roto i te tirotiro kei te ngaro tonu. Ko taku korero ko nga kaihoko tirotiro kei te whakarongo. He wahanga ahau o te maha o nga roopu roopu whakahaere e korero ana matou mo nga tohu kaiwhakawhanake me nga urupare i nga wa katoa. Ka tirohia e matou he maha nga momo puna urupare, o roto o ia kaihoko tirotiro me waho/iwi i runga i nga huinga, kaupapa puna tuwhera, blogs, me nga rangahau. Ana, kei te ngana tonu matou ki te hanga huarahi pai ake mo nga kaiwhakawhanake ki te tiri i o raatau hiahia me te whakamahi keehi. Na, ki te taea e koe, tono mai i nga kaihoko tirotiro me te akiaki i a maatau ki te whakatinana i nga ahuatanga e hiahia ana koe. Ki taku mohio ka roa te wa, ka taea hoki te whakamataku (kaore i te whakahua i te arai nui ki te urunga), engari ka mahi ano. Anei etahi huarahi e taea ai e koe te rongo i to reo (o to kamupene ranei): Tangohia nga rangahau a-tau mo te State of JS, State of CSS, me te State of HTML. Ka whai waahi nui ratou ki te mahi a nga kaihoko tirotiro i a raatau mahi. Mena kei te hiahia koe ki tetahi API e pa ana ki te paerewa hei whakatinana i nga wa katoa puta noa i nga kaitirotiro, whakaarohia te tuku tono i te waahanga kaupapa Interop e whai ake nei. Me nui ake te wa, engari me whakaaro me pehea te tohatoha a Shopify me te RUMvision i o raatau rarangi hiahia mo Interop 2026. Ko nga korero taipitopito penei ka tino whai hua mo nga kaihoko tirotiro ki te kaupapa matua. Mo etahi atu hononga whaihua ki te whakaawe i nga kaihoko kaitirotiro, tirohia taku Navigation the Web Platform Cheatsheet. Whakamutunga Hei kati, kei te tumanako ahau kua waiho e tenei tuhinga etahi mea hei whakaaro maau:
Te harikoa mo te Masonry me etahi atu waahanga paetukutuku kei te heke mai. Ko etahi ahuatanga tukutuku ka hiahia koe ki te timata ki te whakamahi. Ko etahi waahanga o te waehere ritenga, tuatoru-rōpū ranei ka taea e koe te tango hei pai mo nga waahanga whakauru. He huarahi torutoru hei aroturuki i nga mea kei te haere mai me te whakaawe i nga kaihoko tirotiro.
Ko te mea nui ake, ko taku tumanako kua whakapono ahau ki a koe mo nga painga o te whakamahi i te papaaho tukutuku ki tona kaha katoa.
