Болжол менен 15 жыл мурун мен компанияда иштечүмүн, ал жерде биз туристтик агенттиктер, аэропорттун кызматкерлери жана авиакомпаниялар үчүн колдонмолорду курганбыз. Биз ошондой эле UI компоненттери жана бир беттик колдонмо мүмкүнчүлүктөрү үчүн өзүбүздүн ички негизибизди курдук. Бизде бардыгы үчүн компоненттер бар болчу: талаалар, баскычтар, өтмөктөр, диапазондор, маалымат таблицалары, менюлар, дата тандоочулар, тандоолор жана көп тандоолор. Бизде div компоненти да бар болчу. Баса, биздин div компонентибиз сонун болду, ал бардык браузерлерде тегеректелген бурчтарды жасоого мүмкүндүк берди, ишенесизби же ишенбеңиз, ал кезде оңой иш эмес болчу.
Биздин иш биздин тарыхыбызда JS, Ajax жана динамикалык HTML бизди келечекке алып келген революция катары каралып турган учурда болду. Күтүлбөгөн жерден биз баракты динамикалык түрдө жаңыртып, серверден маалыматтарды алып, башка барактарга өтүүдөн качсак болот, ал жай болуп көрүндү жана экранда эки барактын ортосунда чоң ак тик бурчтук жаркырап турду. Джефф Этвуд (StackOverflowдин негиздөөчүсү) тарабынан популярдуу болгон фраза бар болчу, анда мындай деп жазылган: "JavaScript менен жазылышы мүмкүн болгон бардык тиркеме акыры JavaScript менен жазылат." - Джефф Этвуд
Ошол убакта биз үчүн бул чындап барып, ошол колдонмолорду түзүүгө батынгандай сезилди. Бул JS менен баарын жасоого жалпы макулдук сыяктуу сезилди. Ошентип, биз бардыгын JS менен жасадык жана иштин башка жолдорун изилдөөгө убакыт бөлгөн жокпуз. Биз чындап эле HTML жана CSS эмне кыла аларын туура үйрөнүүгө шыктанган жокпуз. Биз интернетти толугу менен өнүгүп жаткан колдонмо платформасы катары кабыл алган жокпуз. Биз көбүнчө аны иштешибиз керек болгон нерсе катары көрдүк, айрыкча браузерди колдоого келгенде. Ишти бүтүрүү үчүн биз ага көбүрөөк JS ыргыта алабыз. Веб кантип иштегени жана платформада эмне бар экенин билүү үчүн убакыт бөлүү мага жардам бердиби? Албетте, мен чындап кереги жок бир топ кодду кырып алсам болмок. Бирок, ошол учурда, балким, анчалык деле эмес. Көрдүңүзбү, браузердин айырмачылыктары ошол кезде абдан маанилүү болчу. Бул Internet Explorer дагы эле үстөмдүк кылуучу браузер болуп, Firefox экинчи орунда турган, бирок Chrome тездик менен популярдуулукка ээ болгондугуна байланыштуу рынок үлүшүн жогото баштаган учур болчу. Chrome жана Firefox веб-стандарттарды макулдашканы менен, биздин колдонмолор иштеп жаткан чөйрөлөр биз IE6ды узак убакыт бою колдоого алышыбыз керек болчу. Бизге IE8ди колдоого уруксат берилгенде дагы, браузерлердин ортосундагы көптөгөн айырмачылыктар менен күрөшүүгө туура келди. Ал гана эмес, ошол кездеги желеде платформага орнотулган мынчалык көп мүмкүнчүлүктөр болгон эмес.
Бугунку кунду тез алдыга. нерселер абдан өзгөрдү. Бизде бул мүмкүнчүлүктөр мурда болуп көрбөгөндөй көбөйүп гана тим болбостон, алардын жеткиликтүү болуу ылдамдыгы да өстү. Мага дагы бир жолу суроо берейин, анда: Веб кантип иштээри жана платформада эмне бар экендиги жөнүндө көбүрөөк билүү үчүн убакыт бөлүп, бүгүн сизге жардам береби? Абсолюттук ооба. Бүгүн веб-платформаны түшүнүүнү жана колдонууну үйрөнүү сизди башка иштеп чыгуучуларга караганда чоң артыкчылыкка ээ кылат. Майнаптуулук, жеткиликтүүлүк, жооп кайтаруу, алардын бардыгы менен чогуу иштейсизби, же жөн гана UI функцияларын жөнөтөсүзбү, эгер сиз муну жоопкерчиликтүү инженер катары жасагыңыз келсе, сизге жеткиликтүү куралдарды билүү максаттарыңызга тезирээк жана жакшыраак жетүүгө жардам берет. Кээ бир нерселер сизге мындан ары китепкананын кереги жок болушу мүмкүн Бүгүнкү күндө кайсы браузерлер колдоорун билип туруп, суроо туулат: Биз эмнеден баш тарта алабыз? 2025-жылы тегеректелген бурчтарды жасоо үчүн бизге div компоненти керекпи? Албетте, биз жок. border-radius касиети учурда колдонулган бардык браузерлер тарабынан 15 жылдан ашык убакыттан бери колдоого алынган. Жана бурч формасы да жакында келет, андан да кооз бурчтар үчүн. Келгиле, азыр бардык негизги браузерлерде жеткиликтүү болгон жана код базасындагы бар көз карандылыктарды алмаштыруу үчүн колдоно ала турган салыштырмалуу жаңы функцияларды карап көрөлү. Кеп бардык сүйүктүү китепканаларыңызды дароо таштап, код базасын кайра жазууда эмес. Калгандарынын бардыгына келсек, адегенде браузердин колдоосун эске алып, долбооруңузга мүнөздүү башка факторлордун негизинде чечим кабыл алышыңыз керек. Төмөнкү функциялар үч негизги серепчи кыймылдаткычында (Chromium, WebKit жана Gecko) ишке ашырылган, бирок сизде аларды дароо колдонууга тоскоол болгон ар кандай браузерди колдоо талаптары болушу мүмкүн. Азыр деле бул өзгөчөлүктөр жөнүндө билүү үчүн жакшы убакыт, бирок, балким, аларды кандайдыр бир учурда колдонууну пландаштырууда. Popovers And Dialogs Popover API,
Албетте, интернетке туташуу ылдамдыгы да көбөйдү, бирок бул бардыгы үчүн андай эмес. Ошондой эле ар бир адам бирдей түзмөк мүмкүнчүлүктөрүнө ээ эмес. Платформа менен жасай ала турган нерселер үчүн үчүнчү тараптын кодун тартуу, анын ордуна, балким, сиз көбүрөөк код жөнөтүп, демек, адаттагыдан азыраак кардарларга жетесиз. Интернетте жүктөөнүн начар иштеши чоң баш тартууга алып келет жана бренддин беделине доо кетирет. Түзмөктөрдө азыраак кодду иштетүү Андан тышкары, кардарларыңыздын түзмөктөрүнө жөнөткөн код, платформанын үстүндө азыраак JavaScript абстракцияларын колдонсо, тезирээк иштейт. Ал, балким, демейки боюнча көбүрөөк жооп берет жана жеткиликтүү. Мунун баары көбүрөөк жана бактылуу кардарларды алып келет. Кесиптешим Алекс Расселдин жылдык көрсөткүчтөрдүн теңсиздиги боюнча блогун текшериңиз, бул премиум түзмөктөр байлыктын теңсиздигинен улам миллиарддаган колдонуучулары бар базарларда жок экенин көрсөтүп турат. Жана бул ажырым убакыттын өтүшү менен гана өсүп жатат.
Киргизилген масондук схемасы Жакында чыга турган веб-платформанын бир өзгөчөлүгү жана мени абдан кубандырган CSS Masonry.
Масончулук деген эмне экенин түшүндүрүп берейин. Масондук деген эмне Масондук - бул Pinterest тарабынан жыл мурун популярдуу болгон макеттин бир түрү. Ал мазмундун көз карандысыз тректерин түзөт, анын ичинде элементтер тректин башталышына мүмкүн болушунча жакын жайгашкан.
Көптөгөн адамдар масондукту портфолио жана фото галереялар үчүн эң сонун вариант катары көрүшөт, аны албетте жасай алат. Бирок Masonry сиз Pinterestте көргөн нерсеге караганда ийкемдүү жана ал шаркыратма сыяктуу макеттер менен эле чектелбейт. Масондук схемасында:
Тректер мамычалар же саптар болушу мүмкүн:
Мазмундун тректеринин баары бирдей өлчөмдө болбошу керек:
Элементтер бир нече тректерди камтышы мүмкүн:
Буюмдарды атайын тректерге коюуга болот; алар ар дайым автоматтык жайгаштыруу алгоритмин ээрчиши керек эмес:
Демолар Бул жерде Chromium'да CSS Masonry программасын ишке ашыруу аркылуу жасаган бир нече жөнөкөй демонстрациялар бар. Сүрөт галереясынын демосу, буюмдардын (бул учурда аталышы) бир нече тректерди кантип камтышы мүмкүн:
Ар кандай өлчөмдөгү тректерди көрсөткөн дагы бир сүрөт галереясы:
Жаңылыктар сайтынын макети айрым тректер башкаларга караганда кененирээк жана кээ бир элементтер макеттин бүт кеңдигин камтыган:
Канбан тактасы буюмдарды белгилүү тректерге жайгаштырууга болорун көрсөткөн:
Эскертүү: Theмурунку демонстрациялар Chromium'дун версиясы менен жасалган, ал көпчүлүк веб колдонуучулар үчүн жеткиликтүү эмес, анткени CSS Masonry браузерлерде жаңы гана ишке ашырыла баштады. Бирок, веб-иштеп чыгуучулар бир нече жылдар бою китепканаларды Masonry макеттерин түзүү үчүн колдонуп келишет. Бүгүн масондукту колдонгон сайттар Чынында эле, масондук бүгүн интернетте кеңири таралган. Бул жерде мен Pinterestтен тышкары тапкан бир нече мисалдар бар:
Жана дагы бир нече, анча айкын эмес, мисалдар:
Демек, бул макеттер кантип түзүлгөн? Чечүүчү жолдор Мен көргөн амалдардын бири - анын ордуна Flexbox макетін колдонуу, анын багытын мамычага өзгөртүү жана аны ороп коюу. Ошентип, сиз ар кандай бийиктиктеги нерселерди бир нече, көз карандысыз мамычаларга жайгаштырып, Масондук макеттин элесин калтыра аласыз:
Бирок, бул убактылуу чечүү менен эки чектөөлөр бар:
Буюмдардын тартиби чыныгы Масондук макет менен айырмаланат. Flexbox менен элементтер биринчи тилкени толтуруп, ал толгондо кийинки тилкеге өтүшөт. Масондук менен, буюмдар кайсы трекке (же бул учурда тилкеге) көбүрөөк орун бар болсо, ошол жерге топтолот. Бирок, ошондой эле, балким, андан да маанилүүсү, бул убактылуу чечүү Flexbox контейнерине белгиленген бийиктикти коюуну талап кылат; антпесе, эч кандай ороо болбойт.
Үчүнчү жактын Масондук китепканалары Өркүндөтүлгөн учурларда, иштеп чыгуучулар китепканаларды колдонуп келишкен. Бул үчүн эң белгилүү жана популярдуу китепкана жөн гана масондук деп аталат жана NPM боюнча жумасына 200 000 жолу жүктөлүп алынат. Squarespace ошондой эле кодсуз альтернатива үчүн Masonry макетін көрсөткөн макет компонентин камсыз кылат жана көптөгөн сайттар аны колдонушат. Бул параметрлердин экөө тең элементтерди макетке жайгаштыруу үчүн JavaScript кодун колдонушат. Камтылган масондук Masonry азыр браузерлерде орнотулган CSS өзгөчөлүгү катары пайда боло баштаганына абдан кубанычтамын. Убакыттын өтүшү менен сиз Grid же Flexbox сыяктуу Masonryди колдоно аласыз, башкача айтканда, эч кандай убактылуу чечимдерди же үчүнчү тараптын кодун талап кылбастан. Майкрософттогу менин командам Edge, Chrome жана башка көптөгөн браузерлер негизделген Chromium ачык булак долбоорунда орнотулган Masonry колдоосун ишке ашырып келет. Mozilla чындыгында 2020-жылы Masonry'ди эксперименталдык ишке киргизүүнү сунуш кылган биринчи браузер сатуучусу болгон. Ал эми Apple да бул жаңы веб макеттин примитивдүү болушуна абдан кызыкдар. Функцияны стандартташтыруу боюнча иш дагы алдыга жылып жатат, CSS жумушчу тобунун жалпы багыты жана ал тургай жаңы дисплей түрү: тор тилкелери жөнүндө макулдашуу менен. Эгер сиз Масончулук жөнүндө көбүрөөк билгиңиз келсе жана прогресске көз салгыңыз келсе, менин CSS Masonry ресурстары баракчамды текшериңиз. Убакыттын өтүшү менен, Masonry Grid же Flexbox сыяктуу Базалык өзгөчөлүккө айланганда, биз аны жөн гана колдонуп, пайда таба алабыз:
Жакшыраак аткаруу, Жакшыраак жооп берүү, Колдонуу оңой жана жөнөкөй код.
Келгиле, буларды кененирээк карап чыгалы. Жакшыраак аткаруу Өзүңүздүн Masonry сыяктуу жайгашуу тутумуңузду түзүү же анын ордуна үчүнчү тараптын китепканасын колдонуу, элементтерди экранга жайгаштыруу үчүн JavaScript кодун иштетүү керек дегенди билдирет. Бул ошондой эле бул кодду бөгөттөө болот дегенди билдирет. Чынында эле, JavaScript коду иштетилмейинче, эч нерсе көрүнбөйт, же нерселер туура жерде же туура өлчөмдө болбойт. Масондук макет көбүнчө веб-баракчанын негизги бөлүгү үчүн колдонулат, демек, код сиздин негизги мазмунуңузду кечирээк көрсөтүп, LCP же эң чоң Contentful Paint метрикаңызды начарлатат, ал кабыл алынган аткарууда жана издөө системасын оптималдаштырууда чоң роль ойнойт. Мен Masonry JS китепканасын жөнөкөй макет менен жана DevTools'та жай 4G туташуусун симуляциялоо менен сынап көрдүм. Китепкана анча чоң эмес (24KB, 7.8KB gzipped), бирок менин сыноо шарттарымда жүктөө үчүн 600 мс талап кылынды. Бул жерде Masonry китепканасы үчүн 600 мс жүктөө убактысынын узактыгын жана ал болуп жатканда башка рендеринг аракети болбогонун көрсөткөн аткаруу жазуусу:
Кошумчалай кетсек, жүктөөнүн алгачкы убактысы бүткөндөн кийин, жүктөлүп алынган скрипт талдоо, компиляциялоо жана андан кийин иштетүү керек. Мунун баары, мурда айтылгандай, баракты көрсөтүүгө тоскоол болгон. Браузерде орнотулган Masonry ишке ашыруу менен бизде жүктөө жана иштетүү үчүн скрипт болбойт. Браузердин кыймылдаткычы беттин алгачкы рендеринг баскычында эле өз милдетин аткарат. Жакшыраак жооп берүү Барак биринчи жолу жүктөлгөндөй эле, браузердин терезесинин өлчөмүн өзгөртүү ошол барактын макетинин кайрадан көрсөтүлүшүнө алып келет. Бул учурда, эгерде барак Masonry JS китепканасын колдонуп жатса, скриптти кайра жүктөөнүн кереги жок, анткени ал мурунтан элебул жерде. Бирок, элементтерди керектүү жерлерге жылдыруучу код иштеши керек. Эми бул өзгөчө китепкана баракты жүктөөдө муну абдан тез жасайт окшойт. Бирок, ал терезенин өлчөмүн өзгөртүү боюнча башка жерге жылдыруу керек болгондо элементтерди жандандырат жана бул чоң айырмачылыкты жаратат. Албетте, колдонуучулар браузер терезелеринин өлчөмүн өзгөртүүгө биз иштеп чыгуучулардай көп убакыт коротушпайт. Бирок бул анимацияланган өлчөмдү өзгөртүү тажрыйбасы абдан оор болушу мүмкүн жана баракчанын жаңы өлчөмүнө ыңгайлашуусу үчүн талап кылынган убакытты кошот. Колдонуунун Жөнөкөй жана Жөнөкөй код Веб өзгөчөлүгүн колдонуу канчалык оңой жана коддун көрүнүшү канчалык жөнөкөй, бул сиздин командаңыз үчүн чоң өзгөрүүлөрдү жасай турган маанилүү факторлор. Алар, албетте, акыркы колдонуучу тажрыйбасы сыяктуу эч качан маанилүү боло албайт, бирок иштеп чыгуучунун тажрыйбасы туруктуулугуна таасир этет. Камтылган веб-функцияны колдонуу бул жагынан маанилүү артыкчылыктарга ээ:
HTML, CSS жана JSти мурунтан эле билген иштеп чыгуучулар, кыязы, бул функцияны оңой колдоно алышат, анткени ал жакшы интеграцияланган жана веб-платформанын калган бөлүгү менен шайкеш келген. Функциянын колдонулушуна киргизилген өзгөртүүлөрдү бузуу коркунучу жок. Бул функциянын эскирип же сакталбай калуу коркунучу дээрлик жок.
Камтылган масондукта, бул примитивдик макет болгондуктан, сиз аны Grid же Flexbox сыяктуу CSSден колдоносуз, эч кандай JS катышпайт. Ошондой эле, боштук сыяктуу макетке байланыштуу башка CSS касиеттери сиз күткөндөй иштейт. Эч кандай айла-амалдар же чечүү жолдору жок жана сиз үйрөнгөн нерселер MDNде документтештирилген. Masonry JS lib үчүн инициализация бир аз татаал: ал тилкенин жана боштуктун өлчөмүн коюу үчүн жашыруун HTML элементтери менен бирге белгилүү бир синтаксиси бар маалымат атрибутун талап кылат. Мындан тышкары, эгер сиз мамычаларды кеңейтүүнү кааласаңыз, көйгөйлөрдү болтурбоо үчүн боштуктун өлчөмүн өзүңүз камтышыңыз керек:
<стиль> .track-sizer, . Item { туурасы: 20%; } .gutter-sizer { туурасы: 1rem; } . Item { бийиктиги: 100px; margin-block-end: 1rem; } .item:nth-child(так) { бийиктиги: 200px; } .element--width2 { туурасы: calc(40% + 1rem); }
Келгиле, муну орнотулган Масондук ишке ашыруу кандай болоорун салыштырып көрөлү: <стиль> .контейнер { дисплей: тор тилкелери; тор тилкелери: кайталоо (4, 20%); боштук: 1rem; } . Item { бийиктиги: 100px; } .item:nth-child(так) { бийиктиги: 200px; } .element--width2 { тор-мамыча: аралыгы 2; }
Жөнөкөйраак, компакттуу код, ал боштук сыяктуу нерселерди колдоно алат жана торчодогу сыяктуу 2 аралык менен аткарылган тректер жана боштуктун өлчөмүн камтыган туура туураны эсептөөнү талап кылбайт. Эмне бар жана качан бар экенин кантип билсе болот? Жалпысынан алганда, маселе сиз JS китепканасынын үстүнөн орнотулган масондукту колдонушуңуз керекпи же жокпу эмес, тескерисинче, качан. Masonry JS китепканасы укмуштуудай жана көптөгөн жылдар бою веб-платформадагы боштукту толтуруп келет жана көптөгөн бактылуу иштеп чыгуучулар жана колдонуучулар үчүн. Эгер сиз аны орнотулган Масондук ишке салыштырсаңыз, анда анын бир нече кемчиликтери бар, бирок бул ишке ашыруу даяр болбосо, бул маанилүү эмес. Мен браузердин сатуучусунда иштейм, анткени бул жаңы веб-платформанын өзгөчөлүктөрүн тизмектеп чыгуу мен үчүн оңой, ошондуктан мен эмне болоорун билем. Бирок иштеп чыгуучулар көп учурда сурамжылоодон кийин сурамжылоо жүргүзүп, жаңы нерселерди көзөмөлдөө кыйын экенин айтышат. Кабардар болуу кыйын жана компаниялар баары бир окууну ар дайым биринчи орунга коюшпайт. Буга жардам берүү үчүн бул жерде жаңыртууларды жөнөкөй жана компакттуу жолдор менен камсыз кылган бир нече ресурстар бар, андыктан сиз керектүү маалыматты тез ала аласыз:
Веб платформада изилдөөчү сайт өзгөчөлүктөрү: Сиз анын релиз эскертүүлөр барагына кызыкдар болушу мүмкүн. Жана, эгер сизге RSS жакса, релиз эскертүүлөр түрмөгүн, ошондой эле Жаңы жеткиликтүү жана кеңири жеткиликтүү каналдарды текшериңиз.
ВебПлатформанын статусу тактасы: Сиз анын ар кандай Базалык жыл баракчаларын жактырышы мүмкүн.
Chrome Platform Status'тун жол картасы барагы.
Эгер бир аз көбүрөөк убактыңыз болсо, сизди браузердин сатуучуларынын релиз эскертүүлөрү кызыктырышы мүмкүн:
Chrome Edge Firefox Safari
Көбүрөөк ресурстар үчүн, менин навигация веб-платформасынын Cheatsheet-ди текшериңиз. Менин оюм дагы эле ишке ашкан жок Бул маселенин башка жагы. Убакытты, энергияны жана көз салуу жолдорун тапсаңыз дагы, үнүңүздү угууга жана сүйүктүү функцияларыңызды ишке ашырууга нааразы болосуз. Мүмкүн, сиз көп жылдар бою белгилүү бир мүчүлүштүктүн чечилишин же ал дагы деле жок болуп жаткан браузерде белгилүү бир функцияны күтүп жаткандырсыз. Мен эмнени айтайын, браузердин сатуучулары угат. Мен ар дайым иштеп чыгуучулардын сигналдарын жана пикирлерин талкуулаган бир нече кайчылаш топтордун мүчөсүмүн. Биз ар кандай серепчилердин ички жана тышкы/коомдук форумдарда, ачык булак долбоорлорунда, блогдордо жана сурамжылоолордо көптөгөн түрдүү булактарды карайбыз. Жана, биз ар дайым иштеп чыгуучулар үчүн алардын өзгөчө муктаждыктарын жана колдонуу учурларын бөлүшүү үчүн жакшы жолдорду түзүүгө аракет кылып жатабыз. Андыктан, эгер мүмкүн болсо, браузердин сатуучуларынан көбүрөөк талап кылыңыз жана сизге керектүү функцияларды ишке ашыруу үчүн бизге кысым көрсөтүңүз. Мен түшүнөм, бул убакытты талап кылат, ошондой эле коркутуу болушу мүмкүн (кирүү үчүн жогорку тоскоолдукту айтпаганда да), бирок ал да иштейт. Бул жерде сиз өзүңүздүн (же сиздин компанияңыздын) үнүңүздү угуунун бир нече жолдору бар: Жыл сайын JS абалын, CSS абалын жана HTML абалын изилдөө. Алар браузердин сатуучулары өз иштерине артыкчылык берүүдө чоң роль ойнойт. Эгер сизге белгилүү бир стандартка негизделген API керек болсо, браузерлерде ырааттуу ишке ашырылышы үчүн, кийинки Interop долбоорунун итерациясында сунушту тапшырууну карап көрүңүз. Бул көбүрөөк убакытты талап кылат, бирок Shopify жана RUMvision Interop 2026 үчүн каалоолор тизмесин кантип бөлүшөрүн карап көрүңүз. Ушул сыяктуу кеңири маалымат серепчилердин приоритеттүүлүгү үчүн абдан пайдалуу болушу мүмкүн. Браузердин сатуучуларына таасир этүү үчүн көбүрөөк пайдалуу шилтемелер үчүн, менин навигациялоо веб-платформасынын схемасын текшериңиз. Корутунду Жабуу үчүн, бул макала сизге ойлоно турган бир нече нерселерди калтырды деп үмүттөнөм:
Масондук жана башка келе жаткан веб функциялары үчүн толкундануу. Сиз колдоно баштагыңыз келген бир нече веб функциялары. Ыңгайлаштырылган же 3-тараптын кодунун бир нече бөлүгүн сиз орнотулган функциялардын пайдасына алып салсаңыз болот. Келе жаткан нерселерге көз салуу жана браузердин сатуучуларына таасир этүүнүн бир нече жолу.
Андан да маанилүүсү, мен сизди веб-платформаны толугу менен колдонуунун артыкчылыктарына ынандырдым деп үмүттөнөм.
