Агар ман эволютсияҳои CSS-ро ба категорияҳо тақсим мекардам, мо аз он рӯзҳое гузаштем, ки мо танҳо радиуси сарҳадро пурсидем, то эҳсос кунем, ки мо дар оянда зиндагӣ мекунем. Мо дар айни замон дар лаҳзае зиндагӣ мекунем, ки платформа ба мо асбобҳое медиҳад, ки на танҳо қабати визуалиро тағир медиҳанд, балки ба таври куллӣ чӣ гуна интерфейсҳоро меъмор мекунем. Ман фикр мекардам, ки шумораи хусусиятҳое, ки дар соли 2024 эълон шудаанд, зиёд карда намешаванд. Ман ҳеҷ гоҳ ин қадар хушбахтона хато накардаам.
Дастаи Chrome "CSS Wrapped 2025" танҳо рӯйхати хусусиятҳо нест; он манифест барои веб динамикӣ ва ватанӣ аст. Ҳамчун шахсе, ки чанд солро барои ҳуҷҷатгузории ин таҳаввулот сарф кардааст - аз таърифи давраҳои "CSS5" то нозукиҳои хидматрасониҳои муосири тарҳрезӣ - ман худро ба ҷамъбасти имсола бо як ҳисси ҳаяҷон менигарам. Мо тағиротро ба сӯи "Эргономикаи оптимизатсияшуда" ва "Муомилаҳои насли оянда" мебинем, ки ба мо имкон медиҳанд, ки мубориза бо кодро қатъ кунем ва интерфейсҳоро дар ҳолати табиии худ оғоз кунем.
Дар ин мақола, шумо метавонед дар бораи хусусиятҳои барҷастаи гузориши Chrome, ки тавассути объекти таҷрибаҳои охирини ман ва умедҳо ба ояндаи платформа дида мешавад, пайдо кунед.
Инқилоби ҷузъӣ: Ниҳоят, интихоби танзимшавандаи маҳаллӣ
Дар тӯли солҳо, мо ба китобхонаҳои вазнини JavaScript барои услуби афтандаҳо такя мекардем, ки "мушкилоти даҳсолаҳо", ки платформа ниҳоят ҳал кардааст. Тавре ки ман дар ғавби амиқи худ ба таърихи интихоби фармоишӣ (ва мақолаҳои марбута) муфассал гуфтам, ин роҳи тӯлоние буд, ки бо UI Open UI, дучарха кардани номҳо ба монанди
Иловаи афсонавӣ барои имкон додани мундариҷаи бой дар дохили вариантҳо, ба монанди тасвирҳо ё парчамҳо, хеле шавқовар аст. Мо метавонем ҳама гуна интихобҳоро имрӯз эҷод кунем:
Намоиш: Ман як намоиши саёҳати Poké-саёҳатӣ сохтам, ки нишон медиҳад, ки чӣ гуна унсури нави
Ба Pen A интихобшавандаи танзимшаванда бо тасвирҳо дар дохили интихобҳо ва мундариҷаи интихобшуда [forked] тавассути utilitybend нигаред.
Намоиш: Назари ҳамаҷонибаи ороиши интихоб бо танҳо унсурҳои псевдо.
Ба Pen A интихобшавандаи фармоишӣ бо танҳо унсурҳои псевдо-элементҳо [форкшуда] тавассути utilitybend нигаред.
Намоиш: Ё шумо метавонед онро бо ин намоиши интихоби меню бо истифода аз optgroups як зина боло кунед.
Ба қалам нигаред. Танҳо ин хусусият як тағироти азимеро дар бораи чӣ гуна сохтани шаклҳо, коҳиш додани вобастагӣ ва қарзи техникӣ нишон медиҳад. Маркерҳои паймоиш ва марги карусели JavaScript Таъсиси каруселҳо таърихан як нуқтаи ихтилоф байни таҳиягарон ва муштариён буд. Мизоҷон онҳоро дӯст медоранд, таҳиягарон аз JavaScript метарсанд, ки онҳоро дастрас ва иҷрокунанда гардонад. Пайдоиши ::scroll-marker ва ::scroll-button() псевдо-элементҳо ин динамикаро комилан тағир медиҳад. Ин хусусиятҳо ба мо имкон медиҳанд, ки нуқтаҳои паймоиш ва тугмаҳои паймоишро танҳо бо CSS эҷод кунем, ки ба таври аслӣ ба контейнери паймоиш алоқаманданд. Тавре ки ман дар блоги худ навиштам, ин Муҳаббат дар слайди аввал буд. Қобилияти эҷоди слайдери комилан функсионалӣ ва дастрас бидуни хати ягонаи JavaScript на танҳо қулай аст; ин галабаи ичрои кор аст. Дар атрофи ин хусусият баъзе нигарониҳои дастрасӣ вуҷуд доранд ва гарчанде ки инҳо эътибор доранд, шояд роҳе барои мо таҳиягарон кор кардани он вуҷуд дошта бошад. Чизи хуб дар он аст, ки ҳамаи ин тағиротҳои интерфейси интерфейси корбар онро нисбат ба коркарди фармоишии DOM ва кашола кардани барчасбҳои ария хеле осонтар мекунанд, аммо ман саркашӣ мекунам… Ҳоло мо метавонем маркерҳоро ба таври худкор бо истифода аз scroll-marker-group гурӯҳбандӣ кунем ва тугмаҳоро бо истифода аз мавқеъгирии лангар услуб созем, то онҳоро маҳз дар ҷое ки мо мехоҳем ҷойгир кунем.
.карусел { overflow-x: худкор; scroll-marker-group: баъд аз; /* Контейнерро барои нуқтаҳо эҷод мекунад */
/* Тугмаҳоро эҷод кунед */ &::тугмаи ҳаракат (дар сатри охири),&::тугмаи ҳаракат (inline-start) { мундариҷа: ""; мавқеъ: мутлақ; /* Барои маркази онҳо ҷойгиркунии лангарро истифода баред */ мавқеъ-лангар: --карусель; боло: лангар (марказ); }
/* Нишондиҳандаҳоро дар кӯдакон эҷод кунед */ див { & :: ҳаракаткунанда { мундариҷа: ""; паҳно: 24px; радиуси сарҳад: 50%; курсор: ишоракунанда; } /* Нишондиҳандаи фаъолро таъкид кунед */ &:: scroll-marker: target-current { замина: сафед; } } }
Намоиш: Таҷрибаи ман эҷод кардани карусел танҳо аз HTML ва CSS бо истифода аз ҷойгиркунии лангар барои ҷойгир кардани тугмаҳо.
Ба Pen Carousel Pure HTML ва CSS [forked] аз ҷониби utilitybend нигаред.
Намоиш: Ремейки слайдери лағжиши Webshop бо истифода аз attr() барои кашидани тасвирҳои замина ба таври динамикӣ ба маркерҳо.
Бознигарии слайдери slick Pen Webshop-ро дар CSS [forked] тавассути utilitybend бубинед. Саволҳои давлатӣ: Чизи часпанда часпидааст? Чизи тез канда шуд? Муддати тӯлонӣ мо бе такя ба хакерҳои IntersectionObserver қобилияти донем, ки "чизи часпанда часпидааст" ё "як ашёи тез канда шудааст". Chrome 133 дархостҳои ҳолати ҳаракатро ҷорӣ кард, ки ба мо имкон медиҳад, ки ин ҳолатҳоро ба таври декларативӣ пурсем. Бо гузоштани навъи контейнер: scroll-state, мо ҳоло метавонем кӯдаконро вобаста ба часпак, кандашуда ё пуроб буданашон сабк диҳем. Ин як беҳбуди азими "сифати зиндагӣ" аст, ки ман онро аз рӯзи CSS 2023 бесаброна интизор будам. Он ҳатто хеле таҳаввул кардааст, зеро мо инчунин самти гардишро мебинем, зебо! Барои мисоли оддӣ: мо дар ниҳоят метавонем сояро ба сарлавҳа танҳо вақте татбиқ кунем, ки он воқеан ба болои тирезаи намоиш часпида бошад: .сарлавҳа-контейнер { навъи контейнер: ҳаракати ҳолати; мавқеъ: часпанда; боло: 0;
сарлавҳа { гузариш: қуттии-соя 0,5s осонии берун; /* Дархост ҳолати контейнерро тафтиш мекунад */ @container scroll-state(часпида: боло) { қуттии соя: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Намоиш: Сарлавҳаи часпанда, ки танҳо ҳангоми часпак сояро татбиқ мекунад.
Сарлавҳаҳои Pen Sticky бо дархости ҳолати ҳаракатро бубинед ва тафтиш кунед, ки оё унсури часпанда тавассути utilitybend часпида шудааст (форк карда шудааст).
Намоиш: Рӯйхати мавзӯи Покемон, ки дархостҳои ҳолати ҳаракатро дар якҷоягӣ бо ҷойгиркунии лангар барои интиқол додани чаҳорчӯба ба болои аломати кандашуда истифода мебарад.
Ба дархости Pen Scroll-state нигаред, то тафтиш кунед, ки кадом ашё бо CSS, версияи Pokemon бо utilitybend канда шудааст. Эргономикаи оптимизатсияшуда: Мантиқ дар CSS Бахши "Эргономикаи оптимизатсияшуда" -и CSS Wrapped хусусиятҳоро таъкид мекунад, ки ҷараёнҳои кории моро интуитивӣ мегардонанд. Се хусусият ҳамчун тағирдиҳанда барои навиштани мантиқ фарқ мекунанд:
if() Изҳорот Мо ниҳоят дар CSS шартҳо мегирем. Функсияи if() ба монанди оператори сегона барои ҷадвалҳои услубҳо амал мекунад ва ба мо имкон медиҳад, ки арзишҳоро дар асоси дархостҳои медиа, дастгирӣ ё услуб дар сатр татбиқ кунем. Ин ниёз ба блокҳои муфассали @media барои тағир додани моликияти ягонаро коҳиш медиҳад. @functionsфунксияҳо Мо дар ниҳоят метавонем баъзе мантиқро ба ҷои дигар интиқол диҳем, ки дар натиҷа баъзе файлҳои тозатар, хусусияти сифати воқеии ҳаёт ба вуҷуд меоянд. sibling-index() ва sibling-count()Ин функсияҳои ҳисобкунии дарахтҳо масъалаи аниматсияҳои ҳайратангез ё ороиши ҷузъҳоро дар асоси андозаи рӯйхат ҳал мекунанд. Тавре ки ман дар Styling бародарон бо CSS омӯхтам, ҳеҷ гоҳ осон набуд, ин зарурати коди сахти хосиятҳои фармоиширо (ба монанди --index: 1) дар HTML мо аз байн мебарад.
Мисол: Ҳисоб кардани тарҳҳо Акнун мо метавонем формулаҳои математикии мухтасар нависем. Масалан, ҳайратангези аниматсия барои кортҳое, ки ба экран ворид мешаванд, ночиз мешавад: .корт-контейнер > * { аниматсия: ошкор 0,6s осон-берун forwards; /* Дигар тағирёбандаҳои дастӣ --index нест! */ аниматсия-таъхир: calc (бародарон-index () * 0.1с); }
Ман ҳатто бо истифода аз ин функсияҳо дар якҷоягӣ бо тригонометрия озмоиш кардам, то ашёро дар доираи комил бидуни ягон JavaScript ҷойгир кунам.
Намоиш: Аниматсияҳои ҳайратангези кортҳо ба таври динамикӣ.
Кортҳои Pen Stagger-ро бо истифода аз sibling-index() [forked] тавассути utilitybend бубинед.
Намоиш: Ҷойгир кардани ашё дар доираи комил бо истифода аз sibling-index, sibling-count ва хусусияти нави CSS @function.
Нигаред ба Pen The доира бо истифода аз sibling-index, sibling-count ва функсияҳои [forked] аз ҷониби utilitybend. Рӯйхати корҳои CSS-и ман: Хусусиятҳое, ки ман интизор шуда наметавонам Ҳангоме ки ман бо ҳайкалчаи интихобҳо ва гузаришҳо банд будам, гузориши "CSS Wrapped 2025" аз чизҳои дигар пур шудааст, ки ман то ҳол имкони оташ дар CodePen надоштам. Инҳо дар рӯйхати ман барои таҷрибаҳои навбатии ман баланданд: Дархостҳои контейнери лангар Ман ҷойгиркунии CSS-ро барои тугмаҳо дар намоиши карусел истифода кардам, аммо "CSS Wrapped"эволютсияи ин: Дархостҳои контейнери лангар. Ин мушкилотеро, ки ҳамаи мо бо маслиҳатҳои асбобҳо дучор шуда будем, ҳал мекунад: агар браузер бо сабаби маҳдудияти ҷой маслиҳати абзорро аз боло ба поён гардонад, "тир" аксар вақт роҳи нодурустро нишон медиҳад. Бо дархостҳои контейнерии лангар (@container anchored(fallback: flip-block)) мо метавонем унсурро дар асоси кадом мавқеъи бозгашти браузер воқеан интихоб кард, услуб кунем. Гурӯҳҳои гузариши лона гузошташуда View Transitions инқилоб буд, аммо онҳо бо як муомилоти мушаххас омаданд: онҳо дарахти элементро ҳамвор карданд, ки аксар вақт трансформатсияҳои 3D ё изофаро шикастанд: клип. Ман ҳамеша эҳсос мекардам, ки дар он чизе намерасад ва ин метавонад танҳо ҷавоб бошад. Бо истифода аз view-transition-group: наздиктарин, мо метавонем дар ниҳоят гурӯҳҳои гузаришро дар дохили ҳамдигар лона кунем. Ин ба мо имкон медиҳад, ки эффектҳои буридан ё гардиши 3D-ро ҳангоми гузариш нигоҳ дорем - чизе, ки қаблан ғайриимкон буд, зеро элементҳо то сатҳи боло бардошта мешуданд. .card img { View-transition-name: сурат; дидан-гузариш-гурӯҳ: наздиктарин; /* Онро лона нигоҳ доред! */ }
Типография ва шаклҳо Ниҳоят, эргономист дар ман хориш мекунад, ки Text Box Trim -ро бисанҷад, ки ваъда медиҳад, ки фазои иловагии озори боло ва поёни мундариҷаи матн (пешбар) хориҷ карда, дар ниҳоят ба ҳамоҳангсозии амудии комил ноил шавад. Ва барои паҳлӯи эҷодӣ, кунҷи шакл ва функсияи shape() тарҳҳои ғайриросткунҷаро мекушоянд ва имкон медиҳанд, ки ба “мураббачаҳо” ва роҳҳои мураккабе, ки ба тағирёбандаҳои CSS ҷавоб медиҳанд, имкон медиҳанд. Гуфта мешавад, ман интизор шуда наметавонам, ки тарроҳии пур аз гулобӣ дошта бошам! Ояндаи умедбахш Мо шоҳиди ҷаҳоне ҳастем, ки дар он CSS қодир ба коркарди мантиқ, ҳолат ва ҳамкории мураккабе мегардад, ки қаблан ба JavaScript тааллуқ доштанд. Хусусиятҳое ба монанди moveBefore (нигоҳ доштани ҳолати DOM барои iframes/видеоҳо) ва attr() (истифодаи намудҳои берун аз сатрҳо барои рангҳо ва шабакаҳо) ин воқеиятро бештар мустаҳкам мекунанд. Гарчанде ки баъзе аз ин хусусиятҳо дар айни замон таҷрибавӣ ё хоси Chrome мебошанд, импулс инкорнопазир аст. Мо бояд ба дастгирии доимӣ дар тамоми браузерҳо тавассути ташаббусҳо ба монанди Interop умедвор бошем, то ин қобилиятҳо заминаи асосӣ гарданд. Гуфта мешавад, доштани муҳаррикҳои браузер ба мисли доштани ҳамаи ин хусусиятҳои олӣ дар "Chrome аввал" муҳим аст. Ин хусусиятҳои нав бояд пеш аз ворид шудан ба браузерҳо муҳокима карда шаванд, бо онҳо санҷида шаванд ва санҷида шаванд. Ин як лаҳзаи афсонавӣ барои ворид шудан ба CSS аст. Мо дигар танҳо ҳуҷҷатҳои услубӣ нестем; мо барномаҳои динамикӣ, эргономикӣ ва мустаҳкамро бо асбобҳои ватанӣ таҳия мекунем, ки аз ҳарвақта пурқувваттар аст. Биёед бо ин давраи нав биравем ва калимаро паҳн кунем. Ин CSS печонида шудааст!
