Шамамен 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) жүзеге асырылады, бірақ сізде оларды бірден пайдалануға жол бермейтін әртүрлі шолғышты қолдау талаптары болуы мүмкін. Қазір бұл мүмкіндіктер туралы білуге әлі де жақсы уақыт, және мүмкін, оларды бір сәтте пайдалануды жоспарлайсыз. Попоперлер мен диалогтар Popover API,
Әрине, сіздің интернетке қосылу жылдамдығыңыз да жоғарылаған шығар, бірақ бұл бәрі үшін бірдей емес. Әрқайсысының құрылғы мүмкіндіктері бірдей емес. Платформамен жасауға болатын нәрселер үшін үшінші тарап кодын алу, оның орнына, сіз көбірек кодты жібересіз, сондықтан әдеттегіден аз тұтынушыларға қол жеткізесіз. Интернетте жүктеудің нашар өнімділігі үлкен бас тартуға әкеледі және бренд беделіне нұқсан келтіреді. Құрылғыларда азырақ кодты іске қосу Сонымен қатар, сіз тұтынушылардың құрылғыларына жіберетін код платформаның жоғарғы жағында аз JavaScript абстракцияларын пайдаланса, жылдамырақ жұмыс істейді. Ол әдепкі бойынша анағұрлым сезімтал және қол жетімді болуы мүмкін. Мұның бәрі тұтынушылардың көбірек және бақытты болуына әкеледі. Менің әріптесім Алекс Расселдің жыл сайынғы өнімділік теңсіздігі туралы блогын тексеріңіз, ол байлық теңсіздігіне байланысты миллиардтаған пайдаланушылары бар нарықтарда премиум құрылғылардың жоқтығын көрсетеді. Және бұл алшақтық уақыт өте келе өсіп келеді.
Кірістірілген кірпіштің орналасуы Жақында шығатын веб-платформаның бір мүмкіндігі және мені қатты қуантады - бұл CSS Masonry.
Масонизмнің не екенін түсіндіруден бастайын. Масондық дегеніміз не Тас қалау - бұл Pinterest бірнеше жыл бұрын танымал еткен макет түрі. Ол мазмұнның тәуелсіз тректерін жасайды, олардың ішінде элементтер тректің басына мүмкіндігінше жақын орналасады.
Көптеген адамдар масондықты портфолиолар мен фото галереялар үшін тамаша опция ретінде көреді, ол әрине жасай алады. Бірақ Masonry сіз Pinterest-те көргеннен гөрі икемді және ол тек сарқырама тәрізді макеттермен шектелмейді. Тас қалау схемасында:
Жолдар бағандар немесе жолдар болуы мүмкін:
Мазмұн тректерінің барлығы бірдей өлшемде болуы шарт емес:
Элементтер бірнеше тректерді қамтуы мүмкін:
Элементтер белгілі бір жолдарға орналастырылуы мүмкін; олар әрқашан автоматты орналастыру алгоритмін ұстанудың қажеті жоқ:
Демонстрациялар Міне, Chromium жүйесіндегі CSS Masonry қолданбасын қолдану арқылы жасаған бірнеше қарапайым демонстрациялар. Элементтердің (бұл жағдайда атауы) бірнеше тректерді қалай қамтитынын көрсететін фотогалерея демонстрациясы:
Әртүрлі өлшемдегі тректерді көрсететін тағы бір фотогалерея:
Кейбір тректер басқаларына қарағанда кеңірек және кейбір элементтер макеттің бүкіл енін қамтитын жаңалықтар сайтының орналасуы:
Элементтерді белгілі бір жолдарға қоюға болатынын көрсететін канбан тақтасы:
Ескерту: Theалдыңғы демонстрациялар көптеген веб-пайдаланушыларға әлі қол жетімді емес Chromium нұсқасымен жасалған, өйткені CSS Masonry браузерлерде енді ғана енгізіле бастады. Дегенмен, веб-әзірлеушілер жылдар бойы масондық макеттерін жасау үшін кітапханаларды қуана пайдаланып келеді. Бүгінгі таңда тасты пайдаланатын сайттар Шынында да, тас қалау бүгінгі күні Интернетте өте кең таралған. Pinterest-тен басқа мен тапқан бірнеше мысалдар:
Тағы бірнеше, онша айқын емес мысалдар:
Сонымен, бұл макеттер қалай жасалды? Шешімдер Мен қолданған амалдардың бірі - оның орнына Flexbox орналасуын пайдалану, оның бағытын бағанға өзгерту және оны орау үшін орнату. Осылайша, сіз әртүрлі биіктіктегі элементтерді бірнеше тәуелсіз бағандарға орналастыра аласыз, бұл тас қалауының орналасуына әсер етеді:
Дегенмен, бұл уақытша шешімде екі шектеу бар:
Элементтердің реті нақты тас қалауының орналасуынан өзгеше. Flexbox көмегімен элементтер алдымен бірінші бағанды толтырады, ал ол толған кезде келесі бағанға өтеді. Masonry көмегімен элементтер қай жолға (немесе бұл жағдайда бағанға) көбірек бос орын болса, жинақталады. Бірақ сонымен қатар, мүмкін одан да маңыздысы, бұл уақытша шешім Flexbox контейнеріне бекітілген биіктікті орнатуды талап етеді; әйтпесе, орау болмайды.
Үшінші тарап тас қалаушы кітапханалары Жетілдірілген жағдайлар үшін әзірлеушілер кітапханаларды пайдаланады. Бұл үшін ең танымал және танымал кітапхана жай ғана Masonry деп аталады және NPM деректері бойынша аптасына шамамен 200 000 рет жүктеледі. Squarespace сонымен қатар кодсыз балама үшін Masonry орналасуын көрсететін орналасу компонентін қамтамасыз етеді және көптеген сайттар оны пайдаланады. Бұл опциялардың екеуі де элементтерді орналасуға орналастыру үшін JavaScript кодын пайдаланады. Кіріктірілген қалау Масондық енді браузерлерде кірістірілген CSS мүмкіндігі ретінде пайда бола бастағанына өте қуаныштымын. Уақыт өте келе сіз Grid немесе Flexbox сияқты Masonry қолданбасын пайдалана аласыз, яғни ешқандай уақытша шешімдерді немесе үшінші тарап кодын қажет етпейсіз. Microsoft-тағы менің командам Edge, Chrome және басқа да көптеген браузерлер негізделген Chromium ашық бастапқы жобасында кіріктірілген Masonry қолдауын жүзеге асырды. Mozilla шын мәнінде 2020 жылы Masonry қолданбасын тәжірибелік енгізуді ұсынған бірінші шолғыш жеткізушісі болды. Сондай-ақ Apple осы жаңа веб-орынның қарапайым болуына өте қызығушылық танытты. CSS жұмыс тобында жалпы бағыт және тіпті жаңа дисплей түрі: тор жолақтары туралы келісіммен мүмкіндікті стандарттау жұмыстары да алға жылжуда. Масонерлік туралы көбірек білгіңіз келсе және прогресті қадағалағыңыз келсе, менің CSS Masonry ресурстары бетін қараңыз. Уақыт өте келе, Masonry Grid немесе Flexbox сияқты базалық мүмкіндікке айналғанда, біз оны жай ғана пайдаланып, келесі мүмкіндіктерді пайдалана аламыз:
Жақсырақ өнімділік, Жақсырақ жауап беру, Пайдаланудың қарапайымдылығы және қарапайым код.
Осыларды толығырақ қарастырайық. Жақсырақ өнімділік Өзіңіздің Masonry тәрізді орналасу жүйесін жасау немесе оның орнына үшінші тарап кітапханасын пайдалану элементтерді экранға орналастыру үшін JavaScript кодын іске қосу керек дегенді білдіреді. Бұл сондай-ақ бұл код блоктауды көрсететінін білдіреді. Шынында да, JavaScript коды іске қосылмайынша, ештеңе пайда болмайды немесе заттар дұрыс жерде немесе дұрыс өлшемде болмайды. Кірпіштің орналасуы көбінесе веб-беттің негізгі бөлігі үшін пайдаланылады, яғни код сіздің негізгі мазмұныңызды басқа жағдайда болғаннан кейінірек көрсетеді, LCP немесе ең үлкен мазмұнды бояу көрсеткішін төмендетеді, бұл қабылданатын өнімділік пен іздеу жүйесін оңтайландыруда үлкен рөл атқарады. Мен Masonry JS кітапханасын қарапайым орналасумен және DevTools қолданбасында баяу 4G қосылымын модельдеу арқылы сынап көрдім. Кітапхана өте үлкен емес (24 КБ, 7,8 Кбайт gzip), бірақ менің сынақ шарттарым бойынша жүктеуге 600 мс қажет болды. Мұнда Masonry кітапханасы үшін ұзақ 600 мс жүктеу уақытын көрсететін өнімділік жазбасы берілген және бұл орын алған кезде басқа көрсету әрекеті болмаған:
Бұған қоса, бастапқы жүктеу уақытынан кейін жүктелген сценарийді талдау, құрастыру және одан кейін іске қосу қажет болды. Мұның бәрі, бұрын айтылғандай, беттің көрсетілуіне тосқауыл болды. Браузердегі кіріктірілген Masonry енгізуімен бізде жүктеу және іске қосу сценарийі болмайды. Браузер қозғалтқышы бетті көрсетудің бастапқы қадамында өз жұмысын жасайды. Жақсырақ жауап беру Бет бірінші рет жүктелген кездегідей, шолғыш терезесінің өлшемін өзгерту сол беттегі орналасуды қайтадан көрсетуге әкеледі. Осы кезде, егер бет Masonry JS кітапханасын пайдаланса, сценарийді қайта жүктеудің қажеті жоқ, себебі ол әлдеқашанМұнда. Дегенмен, элементтерді дұрыс орындарға жылжытатын код іске қосылуы керек. Енді бұл кітапхана бет жүктелген кезде мұны өте жылдам орындайтын сияқты. Дегенмен, ол элементтерді терезе өлшемін өзгертуде басқа орынға жылжыту қажет болғанда жандандырады және бұл үлкен айырмашылықты тудырады. Әрине, пайдаланушылар браузер терезелерінің өлшемін өзгертуге біз әзірлеушілер сияқты көп уақыт жұмсамайды. Бірақ бұл анимациялық өлшемді өзгерту тәжірибесі өте қиын болуы мүмкін және беттің жаңа өлшеміне бейімделуіне кететін уақытты арттырады. Пайдаланудың қарапайымдылығы және қарапайым код Веб-мүмкіндікті пайдалану қаншалықты оңай және код қаншалықты қарапайым көрінеді, бұл сіздің командаңыз үшін үлкен өзгеріс тудыруы мүмкін маңызды факторлар. Олар, әрине, соңғы пайдаланушы тәжірибесі сияқты маңызды бола алмайды, бірақ әзірлеуші тәжірибесі техникалық қызмет көрсетуге әсер етеді. Кірістірілген веб-мүмкіндікті пайдалану осы бағытта маңызды артықшылықтарға ие:
HTML, CSS және JS тілдерін білетін әзірлеушілер бұл мүмкіндікті оңай пайдалана алады, себебі ол веб-платформаның қалған бөліктерімен жақсы біріктіріліп, үйлесімді болу үшін жасалған. Функцияны пайдалану жолында енгізілген өзгерістерді бұзу қаупі жоқ. Бұл мүмкіндіктің ескіру немесе қызмет көрсетілмеуі қаупі нөлге жуық.
Кірістірілген масондық жағдайында, бұл қарапайым орналасу болғандықтан, сіз оны Grid немесе Flexbox сияқты CSS-тен пайдаланасыз, JS қатысы жоқ. Сондай-ақ, бос орын сияқты орналасуға қатысты басқа CSS сипаттары сіз күткендей жұмыс істейді. Бұл туралы білуге болатын айлалар немесе уақытша шешімдер жоқ және сіз үйренетін нәрселер MDN-де құжатталған. Masonry JS lib үшін инициализация біршама күрделі: ол баған мен бос орын өлшемдерін орнату үшін жасырын HTML элементтерімен бірге белгілі бір синтаксисі бар деректер төлсипатын қажет етеді. Сонымен қатар, егер сіз бағандарды кеңейткіңіз келсе, проблемаларды болдырмау үшін бос орын өлшемін өзіңіз қосуыңыз керек:
<стиль> .track-sizer, .элемент { ені: 20%; } .gutter-sizer { ені: 1 рем; } .элемент { биіктігі: 100px; margin-block-end: 1rem; } .элемент:nth-child(тақ) { биіктігі: 200px; } .элемент--ені2 { ені: calc(40% + 1rem); }
Мұны кіріктірілген кіріктірілген құрылыстың қалай болатынын салыстырайық: <стиль> .контейнер { көрсету: тор жолақтары; тор жолақтары: қайталау (4, 20%); алшақтық: 1 рем; } .элемент { биіктігі: 100px; } .элемент:nth-child(тақ) { биіктігі: 200px; } .элемент--ені2 { тор-баған: аралығы 2; }
Қарапайымырақ, ықшам код, ол саңылау сияқты нәрселерді пайдалана алады және тордағы сияқты 2-аралықпен орындалатын тректер орындалады және саңылау өлшемін қамтитын дұрыс енді есептеуді қажет етпейді. Ненің бар екенін және қашан қол жетімді екенін қалай білуге болады? Тұтастай алғанда, мәселе JS кітапханасы арқылы кіріктірілген тасты пайдалану керек пе емес, бірақ қашан. Masonry JS кітапханасы таңқаларлық және көптеген жылдар бойы веб-платформадағы бос орынды толтырып келеді және көптеген бақытты әзірлеушілер мен пайдаланушылар үшін. Әрине, егер сіз оны кіріктірілген тасты енгізумен салыстырсаңыз, оның бірнеше кемшіліктері бар, бірақ бұл енгізу дайын болмаса маңызды емес. Бұл жаңа веб-платформа мүмкіндіктерін тізімдеу маған оңай, өйткені мен браузер сатушысында жұмыс істеймін, сондықтан мен не болатынын білемін. Бірақ әзірлеушілер жиі сауалнамадан кейін жаңа нәрселерді қадағалау қиын екенін бөліседі. Ақпараттан хабардар болу қиын, ал компаниялар әрқашан оқуға басымдық бермейді. Бұған көмектесу үшін сізге қажетті ақпаратты жылдам алу үшін қарапайым және ықшам жолдармен жаңартуларды қамтамасыз ететін бірнеше ресурстар бар:
Веб-платформада зерттеуші сайты бар: Сізді оның шығарылым жазбалары беті қызықтыруы мүмкін. Егер сізге RSS ұнаса, шығарылым жазбалары арнасын, сондай-ақ Жаңадан қолжетімді және кеңінен қолжетімді негізгі арналарды қараңыз.
ВебПлатформа күйінің бақылау тақтасы: Сізге оның әртүрлі негізгі жыл беттері ұнауы мүмкін.
Chrome Platform Status жол картасы беті.
Егер сізде біраз уақыт болса, браузер жеткізушілерінің шығарылым жазбалары сізді де қызықтыруы мүмкін:
Chrome Жиек Firefox Сафари
Қосымша ресурстар үшін менің веб-платформаны шарлау Cheatsheet бөлімін қараңыз. Менің нәрсем әлі де орындалмаған Бұл мәселенің екінші жағы. Уақытты, күш-қуатты және бақылау жолдарын тапсаңыз да, дауысыңызды естіп, сүйікті мүмкіндіктеріңізді іске асыруға әлі де көңіліңіз толмай қалады. Мүмкін сіз бірнеше жылдар бойы белгілі бір қатенің шешілуін немесе ол әлі жоқ браузерде жеткізілетін белгілі бір мүмкіндікті күткен боларсыз. Менің айтайын дегенім, браузер жеткізушілері тыңдайды. Мен әзірлеушілер сигналдары мен пікірлерін үнемі талқылайтын бірнеше ұйымаралық топтардың мүшесімін. Біз әр шолғыш жеткізушісінің ішкі және форумдардағы, ашық бастапқы жобалардағы, блогтардағы және сауалнамалардағы сыртқы/жалпыға ортақ пікірлердің көптеген әртүрлі көздерін қарастырамыз. Және біз әрқашан әзірлеушілерге өздерінің нақты қажеттіліктері мен пайдалану жағдайларын бөлісудің жақсы жолдарын жасауға тырысамыз. Сондықтан, мүмкіндігіңіз болса, браузер жеткізушілерінен көбірек талап етіңіз және сізге қажет мүмкіндіктерді енгізу үшін бізге қысым көрсетіңіз. Менің ойымша, бұл уақытты қажет етеді, сонымен қатар қорқытуы мүмкін (кіру үшін жоғары кедергі туралы айтпағанның өзінде), бірақ ол да жұмыс істейді. Міне, сіз өзіңіздің (немесе компанияңыздың) дауысын естудің бірнеше жолы бар: Жыл сайынғы JS күйі, CSS күйі және HTML күйі сауалнамасын алыңыз. Олар браузер жеткізушілерінің жұмысына басымдық беруде үлкен рөл атқарады. Браузерлерде дәйекті түрде жүзеге асырылатын арнайы стандартқа негізделген API қажет болса, келесі Interop жобасының итерациясында ұсыныс жіберуді қарастырыңыз. Бұл көбірек уақытты қажет етеді, бірақ Shopify және RUMvision Interop 2026 үшін тілектер тізімдерін қалай бөлісетінін қарастырыңыз. Осы сияқты егжей-тегжейлі ақпарат браузер жеткізушілеріне басымдық беру үшін өте пайдалы болуы мүмкін. Браузер жеткізушілеріне әсер ету үшін көбірек пайдалы сілтемелер алу үшін менің веб-платформада шарлау Cheatsheet бөлімін қараңыз. Қорытынды Аяқтау үшін бұл мақала сізге бірнеше ой қалдырды деп үміттенемін:
Масонерлік және басқа да алдағы веб-мүмкіндіктер үшін толқу. Пайдалануды бастағыңыз келуі мүмкін бірнеше веб-мүмкіндіктер. Кірістірілген мүмкіндіктердің пайдасына жоюға болатын пайдаланушы немесе үшінші тарап кодының бірнеше бөліктері. Не болатынын қадағалап отырудың және браузер жеткізушілеріне әсер етудің бірнеше жолы.
Ең бастысы, мен сізді веб-платформаны толық пайдаланудың артықшылықтарына сендірдім деп үміттенемін.
