Якынча 15 ел элек мин туристик агентлар, аэропорт эшчеләре, авиакомпания компанияләре өчен кушымталар төзегән компаниядә эшләдем. Без шулай ук UI компонентлары һәм бер битле кушымта мөмкинлекләре өчен үзебезнең эчке базаны төзедек. Бездә барысы өчен компонентлар бар иде: кырлар, төймәләр, кыстыргычлар, диапазоннар, мәгълүматлар базасы, менюлар, дата сайлаучылар, сайлау һәм күп сайлау. Бездә хәтта див компоненты бар иде. Безнең див компонент бик яхшы иде, ул безгә барлык браузерларда түгәрәк почмаклар ясарга мөмкинлек бирде, аңа ышану яки ышанмау, ул вакытта эшләү җиңел булмаган.
Эшебез тарихыбызның бер ноктасында булды, JS, Ajax, һәм динамик HTML безне киләчәккә китергән революция булып күренде. Кинәт без битне динамик яңартып, сервердан мәгълүмат ала алыр идек, һәм башка битләргә күчүдән сакланыр идек, бу әкрен булып күренде һәм экранда зур ак турыпочмаклык ике бит арасында. Джефф Атвуд (StackOverflow-га нигез салучы) тарафыннан популяр булган гыйбарә бар иде, анда: "JavaScript белән язылган теләсә нинди кушымта ахыр чиктә JavaScript белән язылачак." - Джефф Атвуд
Ул вакытта безгә бу кушымталарны ясарга батырлык кебек тоелды. JS белән барысын да эшләргә одеял рөхсәте кебек тоелды. Шуңа күрә без JS белән барысын да эшләдек, һәм без эшнең башка ысулларын тикшерер өчен вакыт тапмадык. Без HTML һәм CSS нәрсә эшли алуларын дөрес белү өчен стимул сизмәдек. Без вебны тулысынча эволюцион кушымта платформасы итеп кабул итмәдек. Без аны күбесенчә эшләргә кирәк дип күрдек, аеруча браузер ярдәменә килгәндә. Эшләрне башкару өчен без аңа күбрәк JS ыргыта алыр идек. Вебның ничек эшләве һәм платформада булган әйберләр турында күбрәк белү өчен вакыт бүлеп бирер идегезме? .Ичшиксез, мин чыннан да кирәк булмаган бер төркем кодны кыра алыр идем. Ләкин, ул вакытта, бәлки, алай түгелдер. Күрәсез, ул вакытта браузер аермалары бик мөһим иде. Бу вакыт Internet Explorer әле дә доминант булган браузер иде, Firefox якын икенче урында иде, ләкин Chrome тиз популярлашу аркасында базар өлешен югалта башлады. Chrome һәм Firefox веб-стандартлар турында килешергә бик оста булсалар да, безнең кушымталар эшләгән мохит безгә IE6-ны озак тотарга тиеш иде. Безгә IE8 ярдәм итәргә рөхсәт ителсә дә, безгә браузерлар арасындагы күп аермаларны эшләргә туры килде. Алай гына да түгел, заман веб-платформасына бик күп мөмкинлекләр салынган иде.
Бүген тиз алга. Эшләр бик нык үзгәрде. Бездә бу мөмкинлекләр элеккегә караганда күбрәк түгел, аларның тизлеге дә артты. Тагын бер сорау бирергә рөхсәт итегез: Вебның ничек эшләве һәм платформада булган әйберләр турында күбрәк белү өчен вакыт бүлеп бирерме? Әйе. Бүген веб-платформаны аңларга һәм кулланырга өйрәнү сезне бүтән төзүчеләргә караганда зур өстенлеккә китерә. Эшчәнлек, мөмкинлек, җаваплылык өстендә эшлисезме, аларның барысы бергә, яисә UI функцияләрен җибәрү, сез җаваплы инженер булып эшләргә телисез икән, сезнең өчен булган коралларны белү сезнең максатларыгызга тизрәк һәм яхшырак ирешергә ярдәм итә. Сезгә анимор өчен китапханә кирәк түгел Бүгенге көндә нинди браузерлар ярдәм итә икәнен белү, сорау: без нәрсә чокырлый алабыз? 2025 елда түгәрәк почмаклар ясау өчен безгә div компоненты кирәкме? Әлбәттә, без юк. Чик-радиус милеге хәзерге вакытта кулланылган браузерлар тарафыннан 15 елдан артык ярдәм итә. Cornerәм почмак формасы тиздән киләчәк, хәтта җанатар почмаклары өчен. Әйдәгез, хәзерге вакытта барлык төп браузерларда булган, һәм сезнең код базасында булган бәйләнешләрне алыштыру өчен куллана алырлык чагыштырмача үзенчәлекләрне карыйк. Эш шунда ки, яраткан китапханәләрегезне шунда ук чокырларга һәм код базасын яңадан язарга ярамый. Бүтәннәргә килгәндә, сезгә башта браузер ярдәмен исәпкә алырга һәм сезнең проектка хас булган башка факторларга нигезләнеп карар кабул итәргә кирәк. Түбәндәге функцияләр өч төп браузер двигательендә (Хром, ВебКит, һәм Гекко) тормышка ашырыла, ләкин сезнең шунда ук куллануыгызга комачаулаган браузерның төрле таләпләре булырга мөмкин. Хәзерге вакытта бу функцияләр турында белү өчен яхшы вакыт, һәм, бәлки, аларны кайчандыр кулланырга уйлыйсыз. Поповерлар һәм диалоглар Popover API,
Әлбәттә, сезнең интернетка тоташу тизлеге дә арткандыр, ләкин бу барысы өчен дә алай түгел. Everyoneәм бөтен кеше дә бер үк җайланма мөмкинлекләренә ия түгел. Платформа белән эшли алырлык әйберләр өчен өченче як кодын тарту, киресенчә, сез күбрәк код җибәрәсез, шуңа күрә клиентларга гадәттәгечә азрак ирешәсез. Вебда начар йөкләү эше ташлану дәрәҗәсенә китерә һәм бренд абруена зыян китерә. Devайланмаларда азрак код эшләү Моннан тыш, сез клиентларның җайланмаларында җибәргән код, платформа өстендә азрак JavaScript абстракцияләрен кулланса, тизрәк эшли. Бу шулай ук, мөгаен, җаваплырак һәм кулайрак. Болар барысы да клиентларга бәхетлерәк китерә. Минем хезмәттәшем Алекс Расселлның еллык эш тигезсезлеге аермасы блогын тикшерегез, бу премиум җайланмаларның байлык тигезсезлеге аркасында миллиардлаган кулланучы белән базарларда юклыгын күрсәтә. Бу аерма вакыт узу белән үсә.
Эчкән масон макеты Тиздән киләчәк һәм мин бик дулкынландырган бер веб-платформа үзенчәлеге - CSS масоны.
Мин масонның нәрсә икәнен аңлатудан башлыйм. Нәрсә ул масон Масон - Пинтерест тарафыннан популяр булган макетның бер төре. Бу мөстәкыйль эчтәлек треклары ясый, алар эчендә әйберләр мөмкин кадәр трек башлануга якын.
Күпчелек кеше масонны портфолио һәм фото галерея өчен бик яхшы вариант дип саный, ул моны эшли ала. Ләкин масон Пинтерестта күргәннәргә караганда җиңелрәк, һәм ул шарлавыкка охшаган макетлар белән генә чикләнми. Масон макетында:
Acksллар багана яки рәт булырга мөмкин:
Эчтәлек треклары бер үк күләмдә булырга тиеш түгел:
Предметлар берничә юлны үз эченә ала:
Предметлар махсус юлларга урнаштырылырга мөмкин; алар һәрвакыт автоматик урнаштыру алгоритмына иярергә тиеш түгел:
Демос Менә Хромда булачак CSS масонын кулланып мин ясаган берничә гади демо. Фотогалерея демо, әйберләрнең (бу очракта исем) берничә юлны ничек уза алуын күрсәтә:
Төрле зурлыктагы трекларны күрсәтүче тагын бер фотогалерея:
Кайбер треклар белән яңалыклар сайты макеты башкаларга караганда киңрәк, һәм макетның бөтен киңлеген үз эченә алган кайбер әйберләр:
Заказларның махсус трекларга урнаштырылуын күрсәтүче канбан такта:
Искәрмә :.Элеккеге демонстрацияләр Хромның версиясе белән ясалды, ул күпчелек веб кулланучылар өчен әле мөмкин түгел, чөнки CSS масоннары браузерларда гына кулланыла башлый. Шулай да, веб-уйлап табучылар еллар дәвамында масон макетларын ясау өчен китапханәләрне шатланып кулланалар. Бүгенге көндә масон кулланган сайтлар Чыннан да, масон бүгенге көндә вебда бик еш очрый. Менә Пинтересттан кала берничә мисал таптым:
Moreәм тагын берничә, ачык булмаган мисаллар:
Шулай итеп, бу макетлар ничек ясалган? Эш Мин кулланган бер хәйлә - аның урынына Flexbox макетын куллану, юнәлешен баганага үзгәртү һәм аны төрү өчен көйләү. Шул рәвешле, сез төрле биеклектәге әйберләрне күп, мөстәкыйль баганаларга урнаштыра аласыз, масон макеты тәэсирен бирә:
Ләкин бу эш белән ике чикләү бар:
Предметларның тәртибе чын масон макеты белән аерылып тора. Flexbox ярдәмендә әйберләр беренче багананы тутыралар, тулы булгач, киләсе баганага күчәләр. Масония ярдәмендә әйберләр кайсы трекка урнаштырылыр иде (яки бу очракта багана) күбрәк урын бар. Ләкин, һәм, мөгаен, иң мөһиме, бу эш Flexbox контейнерына билгеле биеклек куярга тиеш. югыйсә, төрү булмас иде.
Өченче як масон китапханәләре Алга киткән очраклар өчен уйлап табучылар китапханәләрне кулланалар. Моның өчен иң танылган һәм популяр китапханә масон дип атала, һәм ул NPM мәгълүматлары буенча атнага якынча 200,000 тапкыр йөкләнә. Сквер мәйданы шулай ук масон макетын күрсәтүче макет компонентын тәкъдим итә, кодсыз альтернатива өчен, һәм күп сайтлар аны кулланалар. Бу вариантларның икесе дә макетларны урнаштыру өчен JavaScript кодын кулланалар. Эчкән масон Мин масонның браузерларда урнаштырылган CSS үзенчәлеге булып чыга башлавына мин бик шат. Вакыт узу белән, сез Челтәр яки Flexbox кебек, масонны куллана алырсыз, ягъни бернинди эш яки өченче як коды кирәксез. Майкрософттагы минем коллектив Edge, Chrome һәм башка бик күп браузерларга нигезләнгән Хром ачык чыганак проектында урнаштырылган масон ярдәмен тормышка ашыра. Mozilla чынлыкта 2020-нче елда масонны эксперименталь тормышка ашыруны тәкъдим иткән беренче браузер сатучысы иде. Apple шулай ук бу яңа веб-макетны примитив тормышка ашыру белән бик кызыксына. Функцияне стандартлаштыру эше шулай ук алга бара, CSS эш төркеме эчендә гомуми юнәлеш һәм хәтта яңа дисплей тибындагы дисплей турында килешү белән: челтәр полосалары. Әгәр сез масон турында күбрәк белергә һәм алгарышны күзәтергә телисез икән, минем CSS масон ресурслары битен карагыз. Вакыт узу белән, масон челтәр яки Flexbox кебек төп функциягә әверелгәч, без аны куллана алырбыз һәм файда алырбыз:
Яхшырак күрсәткеч, Яхшырак җаваплылык, Куллану җиңеллеге һәм гадирәк код.
Әйдәгез боларны җентекләп карап чыгыйк. Яхшырак күрсәткеч Masonзегезнең масонга охшаган макетлар системасын ясау, яисә аның урынына өченче як китапханәсен куллану, экранга әйберләр урнаштыру өчен сезгә JavaScript кодын эшләргә туры киләчәк. Бу шулай ук бу кодның блокировкалаячагын аңлата. Чыннан да, я JavaScript коды эшләгәнче, бернәрсә дә күренмәячәк, яисә әйберләр тиешле урыннарда яки зурлыкларда булмас. Масон макеты еш веб-битнең төп өлеше өчен кулланыла, димәк, код сезнең төп эчтәлекне соңрак булганнан соң күрсәтәчәк, сезнең LCPны киметә, яки Иң зур Эчтәлекле Буяу метрикасы, бу сизелгән эштә һәм эзләү системасын оптимизацияләүдә зур роль уйный. Мин Masonry JS китапханәсен гади макет белән һәм DevTools'та әкрен 4G тоташуны симуляцияләп сынадым. Китапханә бик зур түгел (24КБ, 7,8 КБ), ләкин минем сынау шартларында йөкләү өчен 600мм кирәк булды. Менә спектакль язу, масон китапханәсе өчен озын 600м вакыт йөкләнгән, һәм ул вакытта башка күрсәтү эшчәнлеге булмаган:
Моннан тыш, беренче йөкләү вакытыннан соң, йөкләнгән скриптны анализларга, тупларга, аннары эшләргә кирәк иде. Аларның барысы да, алда әйтелгәнчә, битне күрсәтүне тыя иде. Браузерда урнаштырылган масонны тормышка ашыру белән, бездә йөкләү һәм эшкәртү өчен сценарий юк. Браузер двигателе беренче битне күрсәтү адымында үз эшен башкарачак. Яхшырак җаваплылык Бит беренче йөкләнгәнгә охшаган, браузер тәрәзәсенең размеры кабат шул биттә урнашуны күрсәтә. Бу вакытта, бит, Masonry JS китапханәсен кулланса, сценарийны яңадан йөкләргә кирәкми, чөнки ул индемонда. Ләкин әйберләрне тиешле урыннарга күчерүче код эшләргә тиеш. Хәзер бу махсус китапханә бит йөкләнгәндә бик тиз эш итә кебек. Ләкин, бу әйберләрне тәрәзә размерындагы башка урынга күчерергә кирәк булганда җанландыра, һәм бу зур үзгәрешләр кертә. Әлбәттә, кулланучылар без ясаган кебек браузер тәрәзәләренең размерын үзгәртмиләр. Ләкин бу анимация үзгәртү тәҗрибәсе шаккатыргыч булырга мөмкин һәм битнең яңа зурлыгына яраклашу өчен кирәк булган вакытны өсти. Куллану җиңеллеге һәм гади код Веб функцияне куллану никадәр җиңел һәм кодның гади күренүе сезнең команда өчен зур үзгәрешләр кертә алган мөһим факторлар. Әлбәттә, алар соңгы кулланучының тәҗрибәсе кебек мөһим була алмый, ләкин уйлап табучы тәҗрибәсе тотрыклылыкка тәэсир итә. Веб-функцияне куллану бу фронтта мөһим өстенлекләр белән килә:
HTML, CSS, JS-ны белгән уйлап табучылар, мөгаен, бу функцияне җиңел куллана алырлар, чөнки ул яхшы интеграцияләнү һәм веб-платформаның калган өлешләренә туры килү өчен эшләнгән. Функциянең ничек кулланылуы белән кертелгән үзгәрешләрне бозу куркынычы юк. Бу функциянең искерү яки саклану куркынычы юк диярлек.
Эчке масон эшендә, ул примитив макет булганга, сез аны CSS'тан кулланасыз, Grid яки Flexbox кебек, JS катнашмый. Шулай ук, башка макетлар белән бәйле CSS үзлекләре, мәсәлән, аерма, сез көткәнчә эшли. Бу турыда белү өчен бернинди хәйләләр дә юк, һәм сез өйрәнгән әйберләр MDNда документлаштырылган. Masonry JS lib өчен инициализация бераз катлаулы: ул билгеле синтаксис белән мәгълүмат атрибутын таләп итә, багана һәм аерма зурлыкларын урнаштыру өчен яшерен HTML элементлары белән бергә. Өстәвенә, баганаларны киңәйтергә теләсәгез, проблемалардан саклану өчен бушлык күләмен үзегез кертергә тиеш:
<стиль> трек-зурлык, .item { киңлеге: 20%; } .gutter-sizer { киңлеге: 1рем; } .item { биеклеге: 100px; margin-block-end: 1рем; } .итем: n-бала (сәер) { биеклеге: 200px; } .итем - киңлек2 { киңлеге: кальк (40% + 1рем); }
Моны эчтәлекле масонны тормышка ашыру белән чагыштырыйк: <стиль> .container { күрсәтү: челтәр юллары; челтәр юллары: кабатлау (4, 20%); аерма: 1рем; } .item { биеклеге: 100px; } .итем: n-бала (сәер) { биеклеге: 200px; } .итем - киңлек2 { челтәр баганасы: спан 2; }
Гади, тагын да тыгызрак код, бушлык кебек әйберләрне куллана ала һәм 2-нче спан белән эшләнгән, челтәрдәге кебек, һәм бушлык зурлыгын үз эченә алган дөрес киңлекне исәпләү таләп ителми. Нәрсә булганын һәм кайчан булганын ничек белергә? Гомумән алганда, сез JS китапханәсе өстендә урнаштырылган масонны кулланырга тиешме, ә кайчан. Masonry JS китапханәсе искиткеч һәм озак еллар веб-платформадагы бушлыкны тутыра, һәм бик күп бәхетле уйлап табучылар һәм кулланучылар өчен. Аның берничә җитешсезлеге бар, аны урнаштырылган масон эше белән чагыштырсагыз, әлбәттә, ләкин бу гамәлгә ашыру әзер булмаса, алар мөһим түгел. Минем өчен бу искиткеч яңа веб-платформа функцияләрен санап чыгу җиңел, чөнки мин браузер сатучысында эшлим, шуңа күрә нәрсә киләчәген беләм. Ләкин уйлап табучылар еш кына бүлешәләр, тикшерүдән соң сорашалар, яңа әйберләрне күзәтү авыр. Мәгълүмат бирү авыр, һәм компанияләр һәрвакытта да өйрәнүне өстен күрмиләр. Моның өчен булышыр өчен, монда берничә ресурс бар, алар гади һәм компакт ысуллар белән яңартулар бирә, шуңа күрә сез кирәкле мәгълүматны тиз ала аласыз:
Веб-платформада эзләүче сайт бар: Сез аны чыгару язмалары бите белән кызыксынырга мөмкин. , Әм, сезгә RSS ошаса, чыгарылыш ноталарын карагыз, шулай ук яңа кулланыла торган һәм киң кулланыла торган базалар.
ВебПлатформа статусы тактасы: Сезгә аның төрле ел битләре ошарга мөмкин.
Chrome платформасы статусы юл картасы бите.
Әгәр дә сезнең вакытыгыз бераз күбрәк булса, сез шулай ук браузер сатучыларның чыгарылыш язмалары белән кызыксынырга мөмкин:
Chrome Кыр Firefox Сафари
Тагын да ресурслар өчен, Веб-Платформа Чит таблицасын карагыз. Минем эшем әле дә тормышка ашырылмый Бу проблеманың икенче ягы. Вакытны, көчне, күзәтү юлларын тапсагыз да, тавышыгызны ишетү һәм яраткан функцияләрегезне тормышка ашыру белән күңелсезләнү бар. Бәлки, сез еллар дәвамында билгеле бер хата чишелүен көтәсез, яисә браузерда җибәрү өчен билгеле бер үзенчәлек. Мин әйтәм, браузер сатучылары тыңлыйлар. Мин берничә оешма командасының өлеше, анда без гел уйлап табучы сигналлары һәм фикерләре турында сөйләшәбез. Без төрле браузер сатучыда эчке, форумнарда, ачык чыганак проектларында, блогларда, анкеталарда төрле / төрле җавап чыганакларын карыйбыз. , Әм без һәрвакыт уйлап табучылар өчен конкрет ихтыяҗлары белән уртаклашу һәм очракларны куллану өчен яхшырак юллар булдырырга тырышабыз. Шулай итеп, мөмкин булса, зинһар, браузер сатучыларыннан күбрәк таләп итегез һәм сезгә кирәкле функцияләрне тормышка ашырырга басым итегез. Мин моны вакыт таләп итә, һәм шулай ук куркытырга мөмкин (керү өчен зур киртә турында әйтмичә), ләкин ул шулай ук эшли. Менә сезнең (яки сезнең компания) тавышын ишетү өчен берничә ысул: Ел саен JS, CSS һәм HTML тикшерүләрен алыгыз. Алар браузер сатучылары үз эшләренә өстенлек бирүдә зур роль уйныйлар. Әгәр дә сезгә браузерларда эзлекле тормышка ашырылыр өчен, билгеле бер стандартка нигезләнгән API кирәк булса, киләсе Интероп проект итерациясендә тәкъдим җибәрергә уйлагыз. Бу күбрәк вакыт таләп итә, ләкин Shopify һәм RUMvision Интероп 2026 өчен теләк исемлекләрен ничек бүлешкәннәрен карагыз. Мондый җентекле мәгълүмат браузер сатучылары өчен өстенлек бирергә мөмкин. Браузер сатучыларына йогынты ясау өчен, файдалы сылтамалар өчен, Веб-Платформа Чит таблицасын карагыз. Йомгаклау Ябу өчен, бу мәкалә сезгә уйланырлык берничә әйбер калдырды дип ышанам:
Масония һәм киләсе веб-функцияләр өчен дулкынлану. Сез куллана башларга теләгән берничә веб функция. Берничә махсус яисә 3-як коды, сез урнаштырылган функцияләр файдасына бетерә аласыз. Киләчәкне күзәтү һәм браузер сатучыларына йогынты ясауның берничә ысулы.
Иң мөһиме, мин сезне веб-платформаны тулы потенциалына куллануның өстенлекләренә ышандырырмын дип ышанам.
