Ger ez geşedanên CSS-ê li kategoriyan parve bikim, me ji rojên ku me tenê ji bo radyoya sînor xwest ku hîs bikin ku em di pêşerojê de dijîn pir wêdetir çûn. Em naha di demekî de dijîn ku platform amûrên ku ne tenê qata dîtbarî dişoxilînin, lê di bingeh de ji nû ve diyar dikin ka em çawa navbeynkariyê ava dikin. Min difikirî ku hejmara taybetmendiyên ku di sala 2024-an de hatine ragihandin nekare were zêde kirin. Ez tu carî ew qas bi kêfxweşî xelet nebûm.
Tîma Chrome "CSS Wrapped 2025" ne tenê navnîşek taybetmendiyan e; ew manîfestoyek ji bo tevnek dînamîk, xwemalî ye. Wekî kesek ku du sal derbas kiriye van geşedanan bibelge kiriye - ji pênasekirina serdemên "CSS5" bigire heya tevliheviyên karûbarên sêwirana nûjen - ez xwe dibînim ku bi heyecanek mezin li dawiya vê salê dinêrim. Em guheztinek ber bi "Ergonomiya Optîmîzekirî" û "Têkiliyên nifşa Pêşerojê" dibînin ku dihêlin em şerkirina kodê rawestînin û di rewşa xweya xwezayî de dest bi peykerkirina navberan bikin.
Di vê gotarê de, hûn dikarin nihêrînek berfireh li taybetmendiyên berbiçav ên ji rapora Chrome-ê bibînin, ku ji hêla lensên ceribandinên min ên vê dawiyê ve têne dîtin û hêviyên ji bo pêşeroja platformê.
Şoreşa Pêkhateyê: Di dawiyê de, Hilbijartinek Xweseriya Xwecihî
Bi salan, me xwe dispêre pirtûkxaneyên JavaScript-ê yên giran da ku şêwazên dakêşanê, "pirsgirêkek bi dehan salan" ku platformê di dawiyê de çareser kiriye. Gava ku min di kûrahiya xwe ya kûr a dîroka bijareya xwerû (û gotarên têkildar) de hûrgulî kir, ev rêyek dirêj e ku tê de UI-ya vekirî, navên bisiklêtan ên wekî
Zêdekirina fantastîk ku destûr dide naveroka dewlemend di hundurê vebijarkan de, wek wêne an ala, pir kêf e. Em dikarin îro her cûre hilbijartî biafirînin:
Demo: Min demoyek Poké-maceraperest çêkir ku nîşan dide ka hêmana nû ya
Binêre Pênûs Hilbijarkek xwerû ya bi wêneyên di hundurê vebijarkan û naveroka hilbijartî [çeqkirî] ji hêla utilitybend ve.
Demo: Nêrînek berfireh a şêwazkirina hilbijarkê tenê bi pseudo-hêmanan.
Binêre Pênûs Hilbijarkek xwerû bi tenê bi pseudo-hêmanan [çeqkirî] ji hêla utilitybend ve.
Demo: An jî hûn dikarin bi vê demoya hilbijartinê ya Pêşek bi karanîna komên vebijarkê ve wê piçek bilind bikin.
Pênûsê Binêre Pêşek Hilbijartina rastîn a ku ji hêla utilitybend ve bi komên vebijarkî ve hatî veqetandin. Ev taybetmendî bi tenê guheztinek mezin nîşan dide ka em ê çawa forman ava bikin, girêdan û deynê teknîkî kêm bikin. Nîşankerên Scroll Û Mirina Karûsela JavaScriptê Afirandina carouselan di dîrokê de di navbera pêşdebir û xerîdaran de xalek pevçûnê ye. Xerîdar ji wan hez dikin, pêşdebiran ji JavaScript-a ku hewce dike ditirsin ku wan bigihînin û performansê bikin. Hatina pseudo-hêmanên ::scroll-marker û ::scroll-button() vê dînamîkê bi tevahî diguhezîne. Van taybetmendiyan dihêlin ku em xalên navîgasyonê û bişkokên gerîdeyê bi tenê bi CSS-ê, ku bi xwemalî bi konteynera gerokê ve girêdayî ne, biafirînin. Wekî ku min li ser bloga xwe nivîsî, ev slide yekem Love bû. Hêza afirandina sliderek bi tevahî fonksiyonel, gihîştî bêyî yek rêzek JavaScript ne tenê hêsan e; ji bo performansê serkeftinek e. Li dora vê taybetmendiyê hin fikarên gihîştinê hene, û her çend ev derbasdar bin jî, dibe ku rêyek ji bo me pêşdebiran hebe ku em wê bixebitin. Tiştê baş ev e, hemî van guhertinên UI-yê wê ji manîpulasyona DOM-ya xwerû û kişandina li dora etîketên aria pir hêsantir dike, lê ez dûr dibim… Naha em dikarin nîşankeran bixweber bi karanîna grûpa-scroll-marker kom bikin û bişkokan bi karanîna pozîsyona lengerê şêwaz bikin da ku wan tam li cîhê ku em dixwazin bi cîh bikin.
.carousel { overflow-x: auto; scroll-marker-group: after; /* Ji bo xalan konteynir diafirîne */
/* Bişkokan çêbikin */ &::scroll-button (nav-dawî),&::scroll-button(inline-start) { naverok: ""; pozîsyon: mutleq; /* Pozîsyona lengerê bikar bînin ku navenda wan bikin */ position-anchor: --carousel; top: lenger (navend); }
/* Nîşaneyan li ser zarokan çêkin */ div { &::scroll-marker { naverok: ""; width: 24px; sînor-radius: 50%; cursor: pointer; } /* Nîşana çalak ronî bikin */ &::scroll-marker:target-current { background: white; } } }
Demo: Ezmûna min çêkirina karûzelek bi tenê ji HTML û CSS-ê, bi karanîna pozîsyona lengerê ji bo danîna bişkokan.
Binêre Pen Carousel Pure HTML û CSS [forked] ji hêla utilitybend ve.
Demo: Vesazkirinek slider a Webshop-ê ku bi attr() ve tê bikar anîn da ku wêneyên paşîn bi dînamîk bikişîne nav nîşankeran.
Ji hêla utilitybend ve ji nûvekirina sliderê ya şêrîn a Pen Webshop-ê ya di CSS de [forked] bibînin. Pirsên Dewletê: Tiştê Asteng Dimîne? Snappy Thing Snapped? Demek dirêj e, me kêmasiya kapasîteya ku em zanibin ka "tiştek zeliqandî asê maye" an "tiştek hişk hatî kişandin" bêyî ku em xwe bispêrin hakên IntersectionObserver tune ne. Chrome 133 pirsên scroll-state destnîşan kir, ku rê dide me ku em van dewletan bi eşkereyî bipirsin. Bi danîna cureya konteynir: rewsa-pêçayî, em niha dikarin zarokan şêwaz bikin li ser bingeha ka ew asê mane, çikandine, an serûbinî ne. Ev başbûnek mezin a "kalîteya jiyanê" ye ku ez ji roja CSS 2023-an vir ve bi kelecan li benda wê me. Tewra ew pir pêşketiye ji ber ku em dikarin rêwerziya pêlê jî bibînin, delal! Ji bo nimûneyek hêsan: em dikarin di dawiyê de siyek li ser sernavê bicîh bikin tenê dema ku ew bi rastî li jora dîmenderê disekine: .header-container { konteynir-type: scroll-state; pozîsyon: asê; top: 0;
sernav { veguherîn: box-siya 0.5s ease-out; /* Lêpirsîn rewşa konteynerê kontrol dike */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Sernivîsek zeliqandî ya ku tenê gava ku bi rastî siyek lê girtî be, bi kar tîne.
Sernivîsên Pen Sticky yên bi lêpirsîna rewşa gerokê re binihêrin, kontrol bikin ka hêmana asê ji hêla utilitybend ve zeliqiyaye [qeliqî].
Demo: Lîsteyek bi temaya Pokémon-ê ku pirs-rewşa pelçiqandinê bi pozîsyona lengerê re hevgirtî bikar tîne da ku çarçoveyek li ser karaktera ku niha hatî kişandin biguhezîne.
Binêre lêpirsîna Pen Scroll-state da ku hûn kontrol bikin ka kîjan tişt bi CSS, guhertoya Pokemon [çeqkirî] ji hêla utilitybend ve hatî kişandin. Ergonomiya Optimîzekirî: Mantiq Di CSS de Beşa "Ergonomiya Optimîzekirî" ya CSS Wrapped taybetmendiyan ronî dike ku karûbarên me hêniktir dike. Ji bo ku em mantiqê dinivîsin sê taybetmendî wekî veguherîner radiwestin:
if() Daxuyan Em di dawiyê de di CSS de şertan digirin. Fonksîyona if() ji bo pelên şêwazê wekî operatorek sêalî tevdigere, ku rê dide me ku em nirxan li ser bingeha medya, piştgirî, an pirsên şêwazê di hundurê de bicîh bikin. Ev ji bo guheztinên yekane hewcedariya blokên @media yên devkî kêm dike. @function fonksiyonênEm di dawiyê de dikarin hin mantiqê biguhezînin deverek cûda, di encamê de hin pelên paqijtir, taybetmendiyek rastîn a jiyanê peyda bikin. sibling-index() and sibling-count() Van fonksiyonên jimartina daran li ser bingeha mezinahiya navnîşê pirsgirêka anîmasyonên berbiçav an şêwazên tiştan çareser dikin. Wekî ku min li Styling xwişk û birayên bi CSS-ê vekolîn qet hêsantir nebû, ev hewcedariya kodkirina taybetmendiyên xwerû (wek --index: 1) di HTML-a me de ji holê radike.
Mînak: Hesabkirina Layoutan Niha em dikarin formulên matematîkî yên kurt binivîsin. Mînakî, hejandina anîmasyonek ji bo qertên ku dikevin ekranê bêhêz dibe: .card-container > * { anîmasyon: 0.6s pêşdeçûn hêsan eşkere bikin; /* Bêhtir guhêrbarên --index-ê bi destan tune! */ anîmasyon-dereng: calc(bir-bira-index() * 0.1s); }
Min tewra bi karanîna van fonksiyonan digel trîgonometrî ceriband da ku tiştan bêyî JavaScript-ê di çemberek bêkêmasî de bi cih bikim.
Demo: Anîmasyonên qertê yên dînamîkî yên berbiçav.
Kartên Pen Stagger-ê bi karanîna xwişk-index() [forked] ji hêla utilitybend ve têne bikar anîn bibînin.
Demo: Bi karanîna xûşk-bira, hejmartina xwişk û bira, û taybetmendiya nû ya CSS @function, tiştan di çemberek bêkêmasî de bi cîh dikin.
Binêre Pênûsê Dor ku ji hêla utilitybend ve tê bikar anîn, bira-bira, hejmartina xwişk û bira û fonksiyonên [forked] bikar tîne. Lîsteya Karên CSS-a min: Taybetmendiyên ku ez nikarim li bendê biceribînim Dema ku ez bi peykersazkirina hilbijartî û veguheztinê re mijûl bûm, rapora "CSS Wrapped 2025" bi qenciyên din ên ku min hîna şansê wan nekiriye ku ez di CodePen de bişewitînim tije ye. Vana ji bo ceribandinên min ên paşîn di navnîşa min de bilind in: Pirsên Konteynirê Ankor Min CSS Anchor Positioning ji bo bişkokên di demoya xweya carousel de bikar anî, lê "CSS Wrapped" ronî dikepêşkeftina vê: Pirsên Konteynirê Ankor. Ev pirsgirêkek ku me hemiyan bi şîretên amûran re hebû çareser dike: ger gerok ji ber tengasiyên cîhê şîreta amûrê ji serî ber bi jêr ve bizivirîne, "tîra" bi gelemperî riya xelet nîşan dide. Bi lêpirsinên konteynera lengerkirî (@container anchored(fallback: flip-block)), em dikarin hêmanê li ser bingeha kîjan pozîsyona paşvekêşanê ya gerokê bi rastî hilbijartiye şêwaz bikin. Komên Veguheztina Nested View Veguheztinên Nêrîn şoreşek bûn, lê ew bi danûstendinek taybetî re hatin: wan dara elementê, ya ku pir caran veguherînên 3D dişikand an jî diherikî: klîp, xêz kirin. Min her gav hestek hebû ku ew tiştek winda dike, û dibe ku ev tenê bersiv be. Bi karanîna dîtin-transition-group: nêzîktirîn, em dikarin di dawiyê de komên veguhêz di nav hev de hêlîn bikin. Ev rê dide me ku em di dema veguheztinê de bandorên qutkirinê an zivirandinên 3D biparêzin - tiştek ku berê ne mumkun bû ji ber ku hêman heya asta jorîn bilind bûn. .card img { view-transition-name: photo; view-transition-group: nêzîktirîn; /* Ew hêlîn bimîne! */ }
Tîpografi û Şikl Di dawiyê de, ergonomîstê di nav min de dilşewat e ku Text Box Trim biceribîne, ku soz dide ku wê cîhê spî yê acizker li jor û jêrê naveroka nivîsê (serek) rabike da ku di dawiyê de bigihîje hevrêziya vertîkal a bêkêmasî. Û ji bo aliyê afirîner, şiklê quncikê û fonksiyona şeklê() sêwiranên ne-rastgoşe vedike, rê dide "çarçik" û rêyên tevlihev ên ku bersivê didin guhêrbarên CSS. Ku tê gotin, ez nikarim li bendê bim ku sêwiranek tijî qijik hebe! Pêşerojek Hêvîdar Em dibin şahidê cîhanek ku CSS jêhatî dibe ku bi mantiq, rewş û danûstendinên tevlihev ên ku berê aîdê JavaScript-ê bûn, bi rê ve bibe. Taybetmendiyên mîna moveBefore (parastina rewşa DOM-ê ji bo iframes/vîdyoyan) û attr() (bikaranîna cûreyên li derveyî rêzan ji bo reng û tîrêjan) vê rastiyê hîn zêdetir dike. Digel ku hin ji van taybetmendiyan naha ji bo Chrome-ê ceribandin an taybetî ne, lêhûrbûn nayê înkar kirin. Pêdivî ye ku em li seranserê hemî gerokan bi înîsiyatîfên mîna Interop-ê piştgirîya domdar hêvî bikin da ku piştrast bikin ku ev kapasîteyên bingehîn dibin. Wekî ku tê gotin, hebûna motorên gerokê bi qasî hebûna van hemî taybetmendiyên hêja di "Chrome yekem" de girîng e. Pêdivî ye ku ev taybetmendiyên nû berî ku di gerokan de werin niqaş kirin, tinekirin û ceribandin. Demek fantastîk e ku meriv bikeve nav CSS. Em êdî ne tenê belgeyên şêwazê ne; em sepanên dînamîk, ergonomîk û zexm bi amûrek xwemalî ya ku ji berê bihêztir e çêdikin. Werin em dest bi vê serdema nû bikin û belav bikin. Ev CSS Wrapped e!
