Fyrir um 15 árum síðan vann ég hjá fyrirtæki þar sem við smíðuðum öpp fyrir ferðaskrifstofur, flugvallarstarfsmenn og flugfélög. Við smíðuðum líka okkar eigin innra ramma fyrir HÍ íhluti og einnar síðu app getu. Við vorum með íhluti fyrir allt: reiti, hnappa, flipa, svið, gagnatöflur, valmyndir, dagsetningarval, val og fjölval. Við vorum meira að segja með div hluti. div íhluturinn okkar var frábær, hann gerði okkur kleift að gera ávöl horn á öllum vöfrum, sem, trúðu því eða ekki, var ekki auðvelt að gera á þeim tíma.
Vinna okkar átti sér stað á þeim tímapunkti í sögu okkar þegar litið var á JS, Ajax og kraftmikið HTML sem byltingu sem leiddi okkur inn í framtíðina. Allt í einu gátum við uppfært síðu á kraftmikinn hátt, fengið gögn frá netþjóni og sleppt því að þurfa að fletta á aðrar síður, sem þótti hægfara og blikkaði stórum hvítum rétthyrningi á skjánum á milli þessara tveggja síðna. Það var setning, vinsæl af Jeff Atwood (stofnanda StackOverflow), sem hljóðaði: „Allt forrit sem hægt er að skrifa í JavaScript verður að lokum skrifað í JavaScript.“ — Jeff Atwood
Fyrir okkur á þeim tíma fannst þetta eins og að þora að fara og búa til þessi öpp. Það leið eins og algjört samþykki að gera allt með JS. Svo við gerðum allt með JS og við gáfum okkur ekki tíma til að rannsaka aðrar leiðir til að gera hlutina. Okkur fannst í rauninni ekki hvatning til að læra almennilega hvað HTML og CSS gætu gert. Við litum í raun ekki á vefinn sem vaxandi app vettvang í heild sinni. Við sáum það aðallega sem eitthvað sem við þyrftum að vinna í kringum, sérstaklega þegar það kom að vafrastuðningi. Við gætum bara kastað meira JS í það til að koma hlutunum í verk. Hefði það hjálpað mér að taka tíma til að læra meira um hvernig vefurinn virkaði og hvað var í boði á pallinum? Jú, ég hefði líklega getað rakað helling af kóða sem var ekki raunverulega þörf. En á þeim tíma kannski ekki svo mikið. Þú sérð, munur á vafra var frekar verulegur þá. Þetta var tími þegar Internet Explorer var enn ríkjandi vafrinn, þar sem Firefox var næsti næsti, en byrjaði að tapa markaðshlutdeild vegna þess að Chrome náði ört vaxandi vinsældum. Þrátt fyrir að Chrome og Firefox hafi verið nokkuð góðir í að koma sér saman um vefstaðla, þýddi umhverfið sem forritin okkar voru í að við þurftum að styðja IE6 í langan tíma. Jafnvel þegar við fengum að styðja IE8 þurftum við samt að takast á við mikinn mun á vöfrum. Ekki nóg með það, heldur var vefur þess tíma bara ekki með svo marga möguleika innbyggða beint inn á pallinn.
Hratt áfram til dagsins í dag. Hlutirnir hafa breyst gríðarlega. Við höfum ekki aðeins meira af þessum hæfileikum en nokkru sinni fyrr, heldur hefur hraðinn sem þeir verða tiltækur einnig aukist. Leyfðu mér þá að spyrja aftur spurningarinnar: Myndi það hjálpa þér í dag að gefa þér tíma til að læra meira um hvernig vefurinn virkar og hvað er í boði á pallinum? Alveg já. Að læra að skilja og nota vefvettvanginn í dag setur þig í miklu forskoti á aðra þróunaraðila. Hvort sem þú vinnur við frammistöðu, aðgengi, svörun, allt saman, eða bara sendir UI eiginleika, ef þú vilt gera það sem ábyrgur verkfræðingur, þá hjálpar það að þekkja verkfærin sem eru í boði fyrir þig að ná markmiðum þínum hraðar og betur. Sumir hlutir sem þú gætir ekki þurft bókasafn fyrir lengur Með því að vita hvað vafrar styðja í dag er spurningin: Hvað getum við sleppt? Þurfum við div íhlut til að gera ávöl horn árið 2025? Auðvitað gerum við það ekki. Border-radius eignin hefur verið studd af öllum vöfrum sem nú eru notaðir í meira en 15 ár á þessum tímapunkti. Og hornform er líka að koma fljótlega, fyrir enn flottari horn. Við skulum skoða tiltölulega nýlega eiginleika sem eru nú fáanlegir í öllum helstu vöfrum og sem þú getur notað til að skipta um núverandi ósjálfstæði í kóðagrunninum þínum. Aðalatriðið er ekki að hætta strax öllum ástkæru bókasöfnunum þínum og endurskrifa kóðagrunninn þinn. Eins og fyrir allt annað, þá þarftu fyrst að taka tillit til vafrastuðnings og ákveða út frá öðrum þáttum sem eru sérstakir fyrir verkefnið þitt. Eftirfarandi eiginleikar eru innleiddir í þremur helstu vafravélum (Chromium, WebKit og Gecko), en þú gætir haft mismunandi stuðningsþörf fyrir vafra sem hindrar þig í að nota þær strax. Nú er samt góður tími til að læra um þessa eiginleika og ætla kannski að nota þá einhvern tímann. Popovers og gluggar Popover API,
Jú, nettengingarhraði þinn hefur líklega aukist líka, en það á ekki við um alla. Og ekki allir hafa sömu tækifærni heldur. Að draga inn kóða þriðja aðila fyrir hluti sem þú getur gert með pallinum þýðir líklegast að þú sendir meiri kóða og nær því til færri viðskiptavina en venjulega. Á vefnum leiðir slæmur hleðsluframmistaða til mikils brotthvarfshlutfalls og skaðar orðspor vörumerkisins. Keyrir minna kóða á tækjum Ennfremur keyrir kóðinn sem þú sendir á tæki viðskiptavina þinna líklega hraðar ef hann notar færri JavaScript útdrætti ofan á pallinum. Það er líka líklega móttækilegra og aðgengilegra sjálfgefið. Allt þetta leiðir til fleiri og ánægðari viðskiptavina. Skoðaðu árlegt blogg kollega Alex Russell, sem sýnir frammistöðuójöfnuð, sem sýnir að úrvalstæki eru að mestu fjarverandi á mörkuðum með milljarða notenda vegna misskiptingar auðs. Og þetta bil eykst aðeins með tímanum.
Innbyggt múrskipulag Einn eiginleiki á vefvettvangi sem kemur bráðum og sem ég er mjög spenntur fyrir er CSS múrverk.
Leyfðu mér að byrja á því að útskýra hvað múrverk er. Hvað er múrverk Múrverk er gerð útlits sem var vinsæl af Pinterest fyrir mörgum árum. Það skapar sjálfstæð lög af efni þar sem hlutir pakka sér saman eins nálægt byrjun lagsins og þeir geta.
Margir líta á múrverk sem frábæran valkost fyrir eignasöfn og myndasöfn, sem það getur vissulega gert. En múrverk er sveigjanlegra en það sem þú sérð á Pinterest, og það er ekki takmarkað við bara fossalík skipulag. Í múrskipulagi:
Lög geta verið dálkar eða raðir:
Lög af efni þurfa ekki öll að vera í sömu stærð:
Hlutir geta spannað mörg lög:
Hægt er að setja hluti á tilteknar brautir; þeir þurfa ekki alltaf að fylgja sjálfvirka staðsetningaralgríminu:
Sýningar Hér eru nokkrar einfaldar kynningar sem ég gerði með því að nota væntanlega útfærslu á CSS Masonry í Chromium. Kynning á myndasafni sem sýnir hvernig hlutir (titillinn í þessu tilfelli) geta spannað mörg lög:
Annað myndasafn sem sýnir lög af mismunandi stærðum:
Uppsetning fréttasíðu með sumum lögum breiðari en önnur og sum atriði sem spanna alla breidd útlitsins:
Kanban borð sem sýnir að hægt er að setja hluti á ákveðin lög:
Athugið: TheFyrri kynningar voru gerðar með útgáfu af Chromium sem er ekki enn í boði fyrir flesta netnotendur, vegna þess að CSS Masonry er aðeins að byrja að innleiða í vöfrum. Hins vegar hafa vefhönnuðir verið ánægðir með að nota bókasöfn til að búa til múrskipulag í mörg ár. Síður sem nota múrverk í dag Reyndar er múrverk frekar algengt á vefnum í dag. Hér eru nokkur dæmi sem ég fann fyrir utan Pinterest:
Og nokkur fleiri, minna augljós, dæmi:
Svo, hvernig voru þessi skipulag búin til? Lausnir Eitt bragð sem ég hef séð notað er að nota Flexbox skipulag í staðinn, breyta stefnu þess í dálk og stilla það til að vefja. Þannig geturðu sett hluti af mismunandi hæð í marga, sjálfstæða dálka, sem gefur til kynna múrskipulag:
Það eru hins vegar tvær takmarkanir á þessari lausn:
Röð hlutanna er önnur en hún væri með raunverulegu múrskipulagi. Með Flexbox fylla hlutir fyrst fyrsta dálkinn og, þegar hann er fullur, fara síðan í næsta dálk. Með Masonry myndu hlutir staflast í hvaða lag (eða dálk í þessu tilfelli) sem hefur meira pláss í boði. En líka, og kannski mikilvægara, þessi lausn krefst þess að þú stillir fasta hæð á Flexbox ílátið; annars myndi engin umbúðir eiga sér stað.
Múrasöfn þriðja aðila Fyrir fullkomnari tilvik hafa verktaki notað bókasöfn. Þekktasta og vinsælasta bókasafnið fyrir þetta heitir einfaldlega Masonry og því er hlaðið niður um 200.000 sinnum á viku samkvæmt NPM. Squarespace býður einnig upp á útlitshluta sem gerir múrskipulag, fyrir val án kóða, og margar síður nota það. Báðir þessir valkostir nota JavaScript kóða til að setja hluti í útlitið. Innbyggt múrverk Ég er mjög spenntur yfir því að múrverk er nú farið að birtast í vöfrum sem innbyggður CSS eiginleiki. Með tímanum muntu geta notað múrverk alveg eins og þú gerir Grid eða Flexbox, það er, án þess að þurfa neinar lausnir eða kóða þriðja aðila. Lið mitt hjá Microsoft hefur verið að innleiða innbyggðan múrstuðning í Chromium open source verkefninu, sem Edge, Chrome og margir aðrir vafrar eru byggðir á. Mozilla var í raun fyrsti vafraframleiðandinn sem lagði til tilraunaútfærslu á múrverki árið 2020. Og Apple hefur líka haft mikinn áhuga á að gera þetta nýja vefútlit frumstæða að veruleika. Vinnan við að staðla eiginleikann heldur einnig áfram, með samkomulagi innan CSS vinnuhópsins um almenna stefnu og jafnvel nýjan skjágerð: rist-brautir. Ef þú vilt læra meira um múrverk og fylgjast með framförum, skoðaðu CSS múrverkssíðuna mína. Með tímanum, þegar múrverk verður grunnlínueiginleiki, rétt eins og Grid eða Flexbox, getum við einfaldlega notað það og notið góðs af:
Betri frammistaða, Betri viðbrögð, Auðvelt í notkun og einfaldari kóða.
Við skulum skoða þetta nánar. Betri árangur Að búa til þitt eigið múrverkslíkt skipulagskerfi, eða nota þriðja aðila bókasafn í staðinn, þýðir að þú verður að keyra JavaScript kóða til að setja hluti á skjáinn. Þetta þýðir líka að þessi kóði mun loka fyrir. Reyndar mun annaðhvort ekkert birtast, eða hlutirnir verða ekki á réttum stöðum eða af réttum stærðum, fyrr en þessi JavaScript kóða hefur keyrt. Útlit múrverks er oft notað fyrir meginhluta vefsíðu, sem þýðir að kóðinn myndi láta aðalefni þitt birtast seinna en það gæti ella, rýrð LCP, eða Largest Contentful Paint mæligildi, sem gegnir stóru hlutverki í skynjaðri frammistöðu og leitarvélabestun. Ég prófaði Masonry JS bókasafnið með einföldu skipulagi og með því að líkja eftir hægfara 4G tengingu í DevTools. Bókasafnið er ekki mjög stórt (24KB, 7,8KB gzipped), en það tók 600 ms að hlaðast við prófunaraðstæður mínar. Hér er frammistöðuupptaka sem sýnir langan 600 ms hleðslutíma fyrir múrverkasafnið og að engin önnur flutningsvirkni gerðist á meðan það var að gerast:
Að auki, eftir upphaflegan hleðslutíma, þurfti að flokka niðurhalaða skriftuna, setja saman og keyra síðan. Allt þetta, eins og áður sagði, var að hindra birtingu síðunnar. Með innbyggðri Masonry útfærslu í vafranum munum við ekki hafa handrit til að hlaða og keyra. Vafravélin mun bara gera sitt í fyrsta skrefinu til að birta síðuna. Betri svörun Svipað og þegar síða hleðst fyrst, leiðir stærðarbreyting vafragluggans til þess að útlitið á þeirri síðu er birt aftur. Á þessum tímapunkti, þó, ef síðan er að nota Masonry JS bókasafnið, þá er engin þörf á að hlaða handritinu aftur, því það er nú þegarhér. Hins vegar þarf kóðinn sem færir hluti á rétta staði að keyra. Nú virðist þetta tiltekna bókasafn vera frekar fljótt að gera þetta þegar síðan hleðst. Hins vegar hreyfir það hlutina þegar þeir þurfa að færa sig á annan stað þegar gluggastærð er breytt og það munar miklu. Auðvitað eyða notendur ekki tíma í að breyta stærð vafraglugga eins mikið og við þróunaraðilar. En þessi hreyfimyndaupplifun að breyta stærð getur verið ansi ögrandi og eykur þann tíma sem það tekur síðuna að laga sig að nýju stærðinni. Auðvelt í notkun og einfaldari kóða Hversu auðvelt það er að nota vefeiginleika og hversu einfaldur kóðinn lítur út eru mikilvægir þættir sem geta skipt miklu máli fyrir liðið þitt. Þeir geta auðvitað aldrei verið eins mikilvægir og endanleg notendaupplifun, en reynsla þróunaraðila hefur áhrif á viðhald. Notkun innbyggðs vefeiginleika hefur mikilvæga kosti í för með sér:
Hönnuðir sem þegar þekkja HTML, CSS og JS munu líklegast geta notað þann eiginleika auðveldlega vegna þess að hann hefur verið hannaður til að samþætta vel og vera í samræmi við restina af vefpallinum. Það er engin hætta á að breytingar verði kynntar á því hvernig aðgerðin er notuð. Það er næstum engin hætta á því að þessi eiginleiki verði úreltur eða honum er ekki viðhaldið.
Þegar um er að ræða innbyggt múrverk, vegna þess að það er frumstætt skipulag, notarðu það frá CSS, alveg eins og Grid eða Flexbox, enginn JS kemur við sögu. Aðrir skipulagstengdir CSS eiginleikar, svo sem bil, virka eins og þú vilt búast við. Það eru engin brellur eða lausnir til að vita um, og það sem þú lærir er skjalfest á MDN. Fyrir Masonry JS lib er frumstilling svolítið flókin: hún krefst gagnaeiginleika með tiltekinni setningafræði, ásamt földum HTML þáttum til að stilla dálk og bilstærð. Auk þess, ef þú vilt spanna dálka, þarftu að hafa bilstærðina sjálfur með til að forðast vandamál:
Við skulum bera þetta saman við hvernig innbyggð múrútfærsla myndi líta út:
Einfaldari, þéttari kóði sem getur bara notað hluti eins og bil og þar sem spannar lög eru gerðar með span 2, alveg eins og í rist, og krefst þess ekki að þú reiknir út rétta breidd sem inniheldur bilstærðina. Hvernig á að vita hvað er í boði og hvenær það er í boði? Á heildina litið er spurningin í raun ekki hvort þú ættir að nota innbyggt múrverk yfir JS bókasafn, heldur hvenær. Masonry JS bókasafnið er ótrúlegt og hefur verið að fylla upp í skarð á vefnum í mörg ár, og fyrir marga ánægða þróunaraðila og notendur. Það hefur nokkra galla ef þú berð það saman við innbyggða múrútfærslu, auðvitað, en þeir eru ekki mikilvægir ef þessi útfærsla er ekki tilbúin. Það er auðvelt fyrir mig að skrá þessa flottu nýju vefpallaeiginleika vegna þess að ég vinn hjá vafrasöluaðila og því hef ég tilhneigingu til að vita hvað er í vændum. En hönnuðir segja oft, könnun eftir könnun, að það sé erfitt að fylgjast með nýjum hlutum. Það er erfitt að vera upplýstur og fyrirtæki forgangsraða ekki alltaf í námi. Til að hjálpa við þetta eru hér nokkur úrræði sem veita uppfærslur á einfaldan og samsettan hátt svo þú getir fengið þær upplýsingar sem þú þarft fljótt:
Vefvettvangurinn býður upp á landkönnuðarsíðu: Þú gætir haft áhuga á útgáfuskýringasíðunni. Og ef þér líkar við RSS, skoðaðu útgáfuskýringarstrauminn, sem og grunnlínuna nýlega tiltæka og víða tiltæka.
VefurinnStöðumælaborð palla: Þú gætir líkað við ýmsar grunnárssíður þess.
Vegvísissíða Chrome Platform Status.
Ef þú hefur aðeins meiri tíma gætirðu líka haft áhuga á útgáfuskýringum vafraframleiðenda:
Króm Edge Firefox Safari
Til að fá enn meira úrræði, skoðaðu svindlblaðið mitt Navigating the Web Platform. Mitt hlutur er enn ekki útfært Það er hin hlið vandans. Jafnvel þó þú finnir tíma, orku og leiðir til að fylgjast með, þá er samt gremju yfir því að láta rödd þína heyrast og uppáhaldseiginleika þína útfærða. Kannski hefurðu beðið í mörg ár eftir að ákveðinn villu verði leystur eða ákveðinn eiginleiki til að senda í vafra þar sem hann vantar enn. Það sem ég segi er að vafraframleiðendur hlusta. Ég er hluti af nokkrum teymum þvert á stofnanir þar sem við ræðum merki þróunaraðila og endurgjöf allan tímann. Við skoðum margar mismunandi heimildir um endurgjöf, bæði innri hjá hverjum vafrasöluaðila og ytri/opinberum á spjallborðum, opnum uppspretta verkefnum, bloggum og könnunum. Og við erum alltaf að reyna að búa til betri leiðir fyrir þróunaraðila til að deila sérstökum þörfum sínum og nota tilvik. Svo, ef þú getur, vinsamlegast krefðust meira frá vafrasöluaðilum og þrýstu á okkur að innleiða þá eiginleika sem þú þarft. Ég skil að það tekur tíma og getur líka verið ógnvekjandi (svo ekki sé minnst á mikla aðgangshindrun), en það virkar líka. Hér eru nokkrar leiðir til að láta rödd þína (eða fyrirtækis þíns) heyrast: Taktu árlega State of JS, State of CSS og State of HTML könnunum. Þeir gegna stóru hlutverki í því hvernig vafraframleiðendur forgangsraða vinnu sinni. Ef þú þarft ákveðna staðlaða API til að vera innleidd stöðugt á milli vafra skaltu íhuga að leggja fram tillögu við næstu endurtekningu á Interop verkefni. Það krefst meiri tíma, en íhugaðu hvernig Shopify og RUMvision deildu óskalistum sínum fyrir Interop 2026. Ítarlegar upplýsingar eins og þessar geta verið mjög gagnlegar fyrir vafraframleiðendur til að forgangsraða. Fyrir fleiri gagnlegar tengla til að hafa áhrif á vafraframleiðendur, skoðaðu svindlblaðið mitt Navigating the Web Platform. Niðurstaða Til að loka, vona ég að þessi grein hafi skilið þig eftir nokkur atriði til að hugsa um:
Spennan fyrir múrverk og öðrum væntanlegum vefeiginleikum. Nokkrir vefeiginleikar sem þú gætir viljað byrja að nota. Nokkrar stykki af sérsniðnum eða þriðja aðila kóða sem þú gætir kannski fjarlægt í þágu innbyggðra eiginleika. Nokkrar leiðir til að fylgjast með því sem er að koma og hafa áhrif á framleiðendur vafra.
Meira um vert, ég vona að ég hafi sannfært þig um kosti þess að nota vefvettvanginn til fulls.
