Sakitar 15 taun ka pengker, abdi damel di perusahaan dimana urang ngawangun aplikasi pikeun agén perjalanan, pagawé bandara, sareng perusahaan maskapai. Urang ogé ngawangun kerangka in-house sorangan pikeun komponén UI sareng kamampuan aplikasi halaman tunggal. Kami ngagaduhan komponén pikeun sadayana: widang, tombol, tab, rentang, tabel data, ménu, pamilih tanggal, pilih, sareng multipilihan. Kami malah ngagaduhan komponén div. Komponén div kami saé pisan, éta ngamungkinkeun urang pikeun ngalakukeun sudut anu buleud dina sadaya panyungsi, anu, percanten atanapi henteu, sanés hal anu gampang dilakukeun dina waktos éta.
Karya urang lumangsung dina hiji titik dina sajarah urang nalika JS, Ajax, sarta HTML dinamis anu katempona revolusi nu mawa urang kana mangsa nu bakal datang. Ujug-ujug, urang bisa ngamutahirkeun kaca dinamis, meunang data ti server, sarta ulah ngabogaan arahkeun ka kaca séjén, nu katempona slow sarta flashed sagi opat bodas badag dina layar antara dua kaca. Aya hiji frase, dijieun populér ku Jeff Atwood (pangadeg StackOverflow), nu maca: "Sakur aplikasi anu bisa ditulis dina JavaScript antukna bakal ditulis dina JavaScript." - Jeff Atwood
Pikeun kami dina waktos éta, ieu karasaeun wani pikeun leres-leres angkat sareng nyiptakeun aplikasi éta. Ieu dirasakeun kawas persetujuan simbut pikeun ngalakukeun sagalana kalawan JS. Janten urang ngalakukeun sadayana sareng JS, sareng urang henteu leres-leres nyéépkeun waktos pikeun nalungtik cara-cara sanés pikeun ngalakukeun hal-hal. Urang teu bener ngarasa insentif pikeun leres diajar naon HTML jeung CSS bisa ngalakukeun. Kami henteu leres-leres nganggap wéb salaku platform aplikasi anu ngembang sacara lengkep. Kami biasana ningali éta salaku hal anu urang kedah dianggo, khususna nalika ngadukung browser. Urang ngan ukur tiasa ngalungkeun langkung seueur JS pikeun ngalakukeunana. Naha nyéépkeun waktos pikeun diajar langkung seueur ngeunaan kumaha wéb damel sareng naon anu sayogi dina platform ngabantosan kuring? Yakin, kuring meureun bisa geus dicukur kebat kode nu teu sabenerna diperlukeun. Tapi, dina waktos éta, meureun henteu seueur. Nu katingali, bédana browser éta geulis signifikan deui lajeng. Ieu mangrupikeun waktos nalika Internet Explorer masih janten browser anu dominan, kalayan Firefox janten kadua anu caket, tapi mimiti kaleungitan pangsa pasar kusabab Chrome gancang nampi popularitas. Sanaos Chrome sareng Firefox lumayan saé dina satuju kana standar wéb, lingkungan dimana aplikasi urang dijalankeun hartosna urang kedah ngadukung IE6 kanggo waktos anu lami. Sanaos urang diidinan ngadukung IE8, urang tetep kedah nganyahokeun seueur bédana antara panyungsi. Henteu ngan éta, tapi wéb waktos éta henteu ngagaduhan seueur kamampuan anu diwangun langsung kana platform éta.
Maju gancang ka poé ieu. Hal geus robah tremendously. Henteu ngan ukur kami gaduh langkung seueur kamampuan ieu ti kantos, tapi tingkat dimana aranjeunna sayogi parantos ningkat ogé. Hayu atuh naroskeun deui, teras: Naha nyandak waktos pikeun diajar langkung seueur ngeunaan cara wéb sareng naon anu sayogi dina platform ngabantosan anjeun ayeuna? Leres pisan enya. Diajar ngartos sareng nganggo platform wéb ayeuna masihan anjeun kauntungan anu ageung tibatan pamekar anu sanés. Naha anjeun ngerjakeun kinerja, aksesibilitas, responsif, sadayana babarengan, atanapi ngan ukur ngirimkeun fitur UI, upami anjeun hoyong ngalakukeunana salaku insinyur anu tanggung jawab, terang alat anu sayogi pikeun anjeun ngabantosan anjeun ngahontal tujuan anjeun langkung gancang sareng langkung saé. Sababaraha Hal Anu Anjeun Henteu Peryogikeun Perpustakaan deui Nyaho naon browser ngarojong kiwari, patarosan, lajeng, nyaeta: Naon tiasa urang solokan? Naha urang peryogi komponén div pikeun ngalakukeun sudut anu buleud dina 2025? Tangtu, urang henteu. Properti radius wates parantos dirojong ku sadaya panyungsi anu ayeuna dianggo langkung ti 15 taun dina waktos ieu. Jeung sudut-bentuk ogé datang pas, pikeun sudut malah fancier. Hayu urang tingali fitur anu kawilang anyar anu ayeuna sayogi dina sadaya panyungsi utama, sareng anu anjeun tiasa dianggo pikeun ngagentos katergantungan anu aya dina basis kode anjeun. Intina henteu langsung ngaleungitkeun sadaya perpustakaan anu anjeun pikahoyong sareng nyerat deui basis kode anjeun. Sedengkeun pikeun sagalana sejenna, Anjeun bakal kedah nyandak pangrojong browser kana akun munggaran tur mutuskeun dumasar kana faktor séjén husus pikeun proyék Anjeun. Fitur di handap ieu dilaksanakeun dina tilu mesin browser utama (Chromium, WebKit, sareng Gecko), tapi anjeun tiasa gaduh syarat pangrojong browser anu béda anu nyegah anjeun langsung ngagunakeunana. Ayeuna masih waktos anu saé pikeun diajar ngeunaan fitur-fitur ieu, sanaos, sareng panginten badé dianggo dina sababaraha waktos. Popovers Jeung Dialogs Popover API,
Pasti, laju sambungan internét anjeun ogé parantos ningkat, tapi éta sanés pikeun sadayana. Sareng henteu sadayana gaduh kamampuan alat anu sami. Narik kode pihak katilu pikeun hal-hal anu anjeun tiasa laksanakeun sareng platform, sigana mah hartosna anjeun ngirimkeun langkung seueur kode, sahingga ngahontal langkung seueur palanggan tibatan biasana. Dina web, kinerja loading goréng ngabalukarkeun ongkos abandonment badag tur hurts reputasi brand. Ngajalankeun Kode Kurang Dina Alat Salajengna, kodeu anu anjeun kirimkeun dina alat palanggan anjeun sigana bakal langkung gancang upami ngagunakeun langkung seueur abstraksi JavaScript dina luhureun platform. Éta ogé sigana langkung responsif sareng langkung diaksés sacara standar. Sadaya ieu nyababkeun langkung seueur konsumén anu langkung bahagia. Pariksa blog gap kateusaruaan kinerja taunan batur sapagawean kuring Alex Russell, nu nunjukeun yen alat premium nu sakitu legana bolos ti pasar jeung milyaran pamaké alatan kateusaruaan kabeungharan. Jeung gap ieu ngan tumuwuh ngaliwatan waktu.
Diwangun-di Masonry Layout Salah sahiji fitur platform wéb anu bakal datang sareng anu kuring bungah pisan nyaéta CSS Masonry.
Hayu atuh mimitian ku ngajelaskeun naon Masonry. Naon Dupi Masonry Masonry mangrupikeun jinis perenah anu didamel populer ku Pinterest sababaraha taun ka pengker. Nyiptakeun lagu-lagu bebas tina eusi dimana barang-barang ngarangkepkeun diri sacaketna ka awal lagu.
Seueur jalma ningali Masonry salaku pilihan anu hadé pikeun portopolio sareng galeri poto, anu pasti tiasa dilakukeun. Tapi Masonry langkung fleksibel tibatan anu anjeun tingali dina Pinterest, sareng éta henteu dugi ka perenah sapertos curug. Dina tata perenah Masonry:
Lagu tiasa janten kolom atanapi baris:
Lagu eusi henteu sadayana kedah sami ukuran:
Item bisa ngawengku sababaraha lagu:
Item bisa disimpen dina lagu husus; aranjeunna henteu kedah salawasna nuturkeun algoritma panempatan otomatis:
Démo Ieu sababaraha demo saderhana anu kuring dilakukeun ku ngagunakeun palaksanaan CSS Masonry anu bakal datang dina Chromium. Démo galeri poto, nunjukkeun kumaha item (judul dina hal ieu) tiasa ngalangkungan sababaraha lagu:
Galeri poto sanésna nunjukkeun lagu tina ukuran anu béda:
Tata perenah situs warta sareng sababaraha lagu anu langkung lega tibatan anu sanés, sareng sababaraha item anu ngalangkungan sadayana lebar perenah:
Papan kanban anu nunjukkeun yén barang-barang tiasa disimpen dina lagu khusus:
Catetan: Thedemo saméméhna dijieun kalawan versi Chromium nu teu acan sadia pikeun paling pamaké web, sabab CSS Masonry ngan mimiti dilaksanakeun dina browser. Nanging, pamekar wéb parantos resep ngagunakeun perpustakaan pikeun nyiptakeun perenah Masonry salami mangtaun-taun. Situs Ngagunakeun Masonry Dinten Mémang, Masonry cukup umum dina wéb ayeuna. Ieu sababaraha conto anu kuring mendakan salian ti Pinterest:
Jeung sababaraha deui, kirang atra, conto:
Janten, kumaha perenah ieu diciptakeun? Workarounds Hiji trik anu kuring parantos dianggo nyaéta ngagunakeun perenah Flexbox, ngarobih arahna kana kolom, sareng nyetél éta bungkus. Ku cara ieu, anjeun tiasa nempatkeun barang-barang jangkung anu béda dina sababaraha kolom anu mandiri, masihan kesan tina tata perenah Masonry:
Sanajan kitu, aya dua watesan jeung workaround ieu:
Urutan barang béda ti anu bakal aya sareng perenah Masonry anu nyata. Kalayan Flexbox, barang-barang ngeusian kolom kahiji heula sareng, nalika pinuh, teras angkat ka kolom salajengna. Kalayan Masonry, barang-barang bakal tumpukan dina lagu mana waé (atanapi kolom dina hal ieu) ngagaduhan langkung seueur rohangan. Tapi ogé, jeung sugan leuwih importantly, workaround ieu merlukeun anjeun nyetel jangkungna tetep wadahna Flexbox; disebutkeun, euweuh wrapping bakal lumangsung.
Perpustakaan Masonry pihak katilu Pikeun kasus anu langkung maju, pamekar parantos nganggo perpustakaan. Perpustakaan anu paling terkenal sareng populér pikeun ieu ngan saukur disebut Masonry, sareng diunduh sakitar 200,000 kali per minggu numutkeun NPM. Squarespace ogé nyayogikeun komponén perenah anu ngajantenkeun perenah Masonry, pikeun alternatif tanpa kode, sareng seueur situs anu ngagunakeunana. Kadua pilihan ieu nganggo kode JavaScript pikeun nempatkeun barang dina perenah. Diwangun-di Masonry Abdi bungah pisan yén Masonry ayeuna mimiti muncul dina panyungsi salaku fitur CSS anu diwangun. Kana waktosna, anjeun bakal tiasa nganggo Masonry sapertos anu anjeun lakukeun Grid atanapi Flexbox, nyaéta, tanpa peryogi jalan-jalan atanapi kode pihak katilu. Tim kuring di Microsoft parantos ngalaksanakeun dukungan Masonry anu diwangun dina proyék sumber terbuka Chromium, anu didasarkeun ku Edge, Chrome, sareng seueur panyungsi sanés. Mozilla saleresna mangrupikeun vendor browser munggaran anu ngusulkeun palaksanaan ékspérimén Masonry di 2020. Sareng Apple ogé resep pisan pikeun ngajantenkeun perenah wéb énggal ieu kajantenan. Pagawean pikeun ngabakukeun fitur ieu ogé maju, kalayan kasapukan dina grup kerja CSS ngeunaan arah umum komo tampilan tipe tampilan anyar: grid-jalur. Upami anjeun hoyong langkung seueur ngeunaan Masonry sareng ngalacak kamajuan, pariksa halaman sumber CSS Masonry kuring. Dina waktosna, nalika Masonry janten fitur Baseline, sapertos Grid atanapi Flexbox, urang ngan saukur tiasa nganggo éta sareng nyandak kauntungan tina:
Kinerja anu langkung saé, Responsiveness hadé, Gampang dianggo sareng kode anu langkung sederhana.
Hayu urang nyandak hiji tampilan ngadeukeutan dina ieu. Performance hadé Nyiptakeun sistem perenah sapertos Masonry anjeun nyalira, atanapi nganggo perpustakaan pihak katilu, hartosna anjeun kedah ngajalankeun kode JavaScript pikeun nempatkeun barang dina layar. Ieu ogé hartosna yén kode ieu bakal diblokir. Mémang, teu aya anu bakal muncul, atanapi hal-hal henteu aya dina tempat anu leres atanapi ukuran anu leres, dugi ka kode JavaScript parantos dijalankeun. Tata perenah Masonry sering dianggo pikeun bagian utama halaman wéb, anu hartosna kodeu bakal ngajantenkeun eusi utama anjeun muncul engké tibatan anu sanés, ngahinakeun LCP anjeun, atanapi métrik Cat Pangeusian Terbesar, anu maénkeun peran anu ageung dina kinerja anu ditanggap sareng optimasi mesin pencari. Kuring nguji perpustakaan Masonry JS kalawan perenah basajan tur simulating sambungan 4G slow di DevTools. Perpustakaan henteu ageung pisan (24KB, 7.8KB gzipped), tapi butuh 600ms pikeun ngamuat dina kaayaan uji kuring. Ieu mangrupikeun rekaman pagelaran anu nunjukkeun yén waktos beban 600ms panjang pikeun perpustakaan Masonry, sareng henteu aya kagiatan rendering anu sanés kajantenan nalika éta lumangsung:
Salaku tambahan, saatos waktos ngamuat awal, naskah anu diunduh teras kedah di-parse, disusun, teras dijalankeun. Sadayana, sakumaha anu disebatkeun sateuacana, ngahalangan rendering halaman. Kalayan palaksanaan Masonry anu diwangun dina browser, urang moal gaduh skrip pikeun dimuat sareng dijalankeun. Mesin browser ngan bakal ngalakukeun hal na salila hambalan rendering kaca awal. Responsiveness Leuwih alus Sarupa jeung nalika hiji kaca mimiti dimuat, ngarobah ukuran jandela browser ngakibatkeun rendering perenah dina kaca eta deui. Dina titik ieu, sanajan, lamun kaca ngagunakeun perpustakaan Masonry JS, aya teu kudu ngamuat naskah deui, sabab éta geusIeuh. Nanging, kodeu anu mindahkeun barang-barang di tempat anu leres kedah dijalankeun. Ayeuna perpustakaan khusus ieu sigana lumayan gancang dina ngalakukeun ieu nalika halaman dimuat. Sanajan kitu, eta animates item nalika maranéhna kudu pindah ka tempat béda dina ukuran jandela, sarta ieu ngajadikeun bédana badag. Tangtosna, pangguna henteu nyéépkeun waktos ngarobih ukuran browserna sapertos anu dilakukeun ku pamekar. Tapi pangalaman pangropéa ukuran animasi ieu tiasa rada jarring sareng nambihan waktos anu diperyogikeun pikeun halaman adaptasi kana ukuran énggalna. Gampang Paké Jeung Kode Basajan Kumaha gampangna ngagunakeun fitur wéb sareng kumaha saderhana kodeu mangrupikeun faktor penting anu tiasa ngajantenkeun bédana pikeun tim anjeun. Aranjeunna teu tiasa kantos janten penting salaku pangalaman pamaké ahir, tangtosna, tapi pangalaman pamekar dampak maintainability. Ngagunakeun fitur web diwangun-di hadir kalawan kauntungan penting di hareup éta:
Pamekar anu parantos terang HTML, CSS, sareng JS paling dipikaresep bakal tiasa ngagunakeun fitur éta kalayan gampang sabab parantos dirarancang pikeun ngahijikeun saé sareng konsisten sareng sesa platform wéb. Henteu aya résiko ngarobih parobahan anu diwanohkeun dina cara fiturna dianggo. Aya ampir enol résiko fitur éta janten deprecated atanapi henteu dijaga.
Dina kasus diwangun-di Masonry, sabab éta tata perenah primitif, Anjeun nganggo eta tina CSS, kawas Grid atanapi Flexbox, euweuh JS aub. Ogé, sipat CSS patali perenah séjén, kayaning gap, jalan sakumaha anjeun kukituna nyangka aranjeunna. Henteu aya trik atanapi solusi pikeun terang, sareng hal-hal anu anjeun pelajari didokumentasikeun dina MDN. Pikeun lib Masonry JS, initialization rada rumit: peryogi atribut data kalayan sintaksis khusus, sareng elemen HTML disumputkeun pikeun nyetél ukuran kolom sareng gap. Tambih Deui, upami anjeun hoyong bentang kolom, anjeun kedah ngalebetkeun ukuran gap sorangan pikeun ngahindarkeun masalah:
Hayu urang ngabandingkeun ieu sareng kumaha palaksanaan Masonry anu diwangun:
Basajan, kodeu leuwih kompak nu ngan bisa ngagunakeun hal kawas gap na dimana Manjang lagu dipigawé kalawan bentang 2, kawas dina grid, sarta teu merlukeun anjeun ngitung lebar katuhu nu ngawengku ukuran gap. Kumaha Nyaho Naon Anu Sadia Sareng Iraha Sadia? Gemblengna, patarosan henteu leres upami anjeun kedah nganggo Masonry anu diwangun dina perpustakaan JS, tapi nalika. Perpustakaan Masonry JS endah pisan sareng parantos ngeusian gap dina platform wéb salami mangtaun-taun, sareng seueur pamekar sareng pangguna anu bahagia. Éta ngagaduhan sababaraha kalemahan upami anjeun ngabandingkeun kana palaksanaan Masonry anu diwangun, tangtosna, tapi éta henteu penting upami palaksanaan éta henteu siap. Gampang pikeun kuring daptar fitur platform wéb énggal ieu kusabab kuring damel di vendor browser, sareng ku kituna kuring condong terang naon anu bakal datang. Tapi pamekar mindeng babagi, survey sanggeus survey, yén ngalacak hal anyar téh teuas. Tetep terang hese, sareng perusahaan henteu salawasna prioritas diajar. Pikeun ngabantosan ieu, ieu sababaraha sumber anu nyayogikeun apdet ku cara anu sederhana sareng kompak supados anjeun tiasa kéngingkeun inpormasi anu anjeun peryogikeun gancang:
Platform Wéb ngagaduhan situs explorer: Anjeun tiasa resep kana halaman catetan pelepasan na. Sareng, upami anjeun resep RSS, pariksa feed catetan sékrési, ogé feed Baseline Newly Available and Widely Available.
The WebDasbor Status Platform: Anjeun tiasa resep sababaraha halaman taun Dasar na.
Halaman peta jalan Chrome Platform Status.
Upami anjeun gaduh waktos sakedik deui, anjeun ogé tiasa resep kana catetan sékrési anu ngical paralatan browser:
Chrome Ujung Firefox Safari
Pikeun langkung seueur sumber, pariksa kuring Navigasi Platform Web Cheatssheet. Perkara Kuring Masih Teu Dilaksanakeun Éta sisi séjén tina masalah. Sanaos anjeun mendakan waktos, tanaga, sareng cara pikeun ngalacak, tetep aya frustasi nalika ngadangu sora anjeun sareng fitur karesep anjeun dilaksanakeun. Panginten anjeun parantos ngantosan mangtaun-taun pikeun bug khusus direngsekeun, atanapi fitur khusus pikeun dikirim dina browser anu masih leungit. Anu bakal kuring nyarioskeun nyaéta padagang browser ngadangukeun. Abdi bagian tina sababaraha tim lintas-organisasi dimana urang ngabahas sinyal pamekar jeung eupan balik sadaya waktu. Urang nempo loba sumber béda tina eupan balik, duanana internal di unggal padagang browser jeung éksternal / publik dina panglawungan, proyék open source, blog, sarta survey. Sareng, kami salawasna nyobian nyiptakeun cara anu langkung saé pikeun pamekar ngabagi kabutuhan khusus sareng kasus panggunaan. Janten, upami anjeun tiasa, punten pamenta langkung seueur ti padagang browser sareng tekenan kami pikeun nerapkeun fitur anu anjeun peryogikeun. Kuring meunang nu butuh waktu, sarta ogé bisa jadi intimidating (teu nyebut halangan tinggi pikeun Éntri), tapi ogé jalan. Ieu sababaraha cara anjeun tiasa ngadangukeun sora anjeun (atanapi perusahaan anjeun): Candak survey taunan State of JS, State of CSS, sareng State of HTML. Aranjeunna maénkeun peran anu ageung dina cara ngical paralatan browser prioritas padamelan na. Lamun perlu API dumasar-standar husus pikeun dilaksanakeun konsistén sakuliah panyungsi, mertimbangkeun ngirimkeun proposal dina Iteration proyék Interop salajengna. Peryogikeun langkung seueur waktos, tapi pertimbangkeun kumaha Shopify sareng RUMvision ngabagi daptar hajatna pikeun Interop 2026. Inpormasi anu lengkep sapertos kieu tiasa mangpaat pisan pikeun ngical paralatan browser pikeun prioritas. Pikeun tautan anu langkung mangpaat pikeun mangaruhan para panyungsi browser, parios kuring Navigasi Web Platform Cheatssheet. kacindekan Pikeun nutup, kuring ngarepkeun tulisan ieu parantos ngantepkeun anjeun sababaraha hal pikeun dipikirkeun:
Bungah pikeun Masonry sareng fitur wéb anu bakal datang. Sababaraha fitur wéb anu anjeun hoyong mimitian nganggo. Sababaraha potongan kode khusus atanapi pihak ka-3 anjeun tiasa ngahapus pikeun milih fitur anu diwangun. Sababaraha cara pikeun ngalacak naon anu bakal datang sareng mangaruhan padagang browser.
Anu langkung penting, kuring ngarepkeun kuring ngayakinkeun anjeun ngeunaan mangpaat ngagunakeun platform wéb pikeun poténsial pinuh.
