Uma bengingase ngihlukanise ukuvela kwe-CSS ngezigaba, siye sadlulela ngalé kwezinsuku lapho sasivele sacela irediyasi yomngcele ukuzwa sengathi siphila esikhathini esizayo. Njengamanje siphila enkathini lapho inkundla isinikeza amathuluzi angagcini nje ngokulungisa isendlalelo esibonakalayo, kodwa achaza kabusha indlela esisebenzisana ngayo namapulani. Bengicabanga ukuthi inani lezici ezimenyezelwe ngo-2024 alikwazanga ukuqedwa. Angikaze ngibe nephutha ngenjabulo.
Ithimba le-Chrome elithi "CSS Wrapped 2025" akulona nje uhlu lwezici; iyi-manifesto yewebhu yomdabu eguqukayo. Njengomuntu ochithe iminyaka embalwa ebhala lokhu kuphendukela kwemvelo - kusukela ekuchazeni izinkathi ze-"CSS5" kuya enkingeni yezinsiza zesimanje - ngizithola ngibheka ukusongwa kwalo nyaka nomuzwa omkhulu wesasasa. Sibona ukushintshela kokuthi “Optimized Ergonomics” kanye “Next-gen interactions” okusivumela ukuthi siyeke ukulwa nekhodi futhi siqale ukuqopha ukuxhumana esimweni sazo semvelo.
Kulesi sihloko, ungathola ukubuka okuphelele kwezici ezivelele ezivela embikweni we-Chrome, ezibukwa ngelensi yokuhlolwa kwami kwakamuva kanye namathemba ekusasa leplathifomu.
I-Revolution Yengxenye: Ekugcineni, Ukukhetha Kwendabuko Okwenziwa Ngokwezifiso
Iminyaka eminingi, sithembele kulabhulali ye-JavaScript esindayo ekwenzeni isitayela okwehliswayo, "inkinga yamashumi eminyaka ubudala" leyo ingxenyekazi egcine iyixazululile. Njengoba ngike ngachaza ekujuleni kwami okujulile emlandweni wokukhetha okwenziwa ngokwezifiso (kanye nezindatshana ezihlobene), lona kube umgwaqo omude ohlanganisa i-Open UI, amagama wokushiswa kwamabhayisikili afana ne-
Ukwengezwa okuhle kokuvumela okuqukethwe okucebile kwangaphakathi kwezinketho, njengezithombe noma amafulegi, kujabulisa kakhulu. Singadala zonke izinhlobo zokukhetha namuhla:
Idemo: Ngidale idemo ye-Poké-adventure ebonisa ukuthi i-elementi entsha ye-
Bheka i-Peni A ekhethwayo ongayenza ngezifiso enezithombe ngaphakathi kwezinketho kanye nokuqukethwe okukhethiwe [okufohlwe yi-utilitybend.
Idemo: Ukubheka okuphelele ekwenzeni isitayela okukhethiwe ngezinto ezingezona mbumbulu kuphela.
Bona i-Peni A ekhethwayo ongayenza ngendlela oyifisayo enezinto-mbumbulu kuphela [ezifohlwe yi-utilitybend.
Idemo: Noma ungayikhahlela phezulu ngale demo yokukhetha imenyu usebenzisa ama-optgroups.
Bheka Imenyu Yokukhetha Yepeni Yangempela enama-optgroups [efohlwe] yi-utilitybend. Lesi sici sisodwa sibonisa ushintsho olukhulu endleleni esizowakha ngayo amafomu, sinciphise ukuncika kanye nesikweletu sobuchwepheshe. Skrola Omaka Nokufa Kwe-JavaScript Carousel Ukudala ama-carousels ngokomlando kube yindawo yokungezwani phakathi konjiniyela namakhasimende. Amaklayenti ayawathanda, onjiniyela bayesaba i-JavaScript edingekayo ukuze afinyeleleke futhi asebenze. Ukufika kwe-::scroll-marker kanye ::scroll-button() nezici-mbumbulu kushintsha lokhu kuguquguquka ngokuphelele. Lezi zici zisivumela ukuthi sakhe amachashazi okuzulazula nezinkinobho zokuskrola kuphela nge-CSS, exhunywe ngokomdabu esitsheni sokuskrola. Njengoba ngibhale kubhulogi yami, lolu bekunguThando ekuqaleni kwesilayidi. Ikhono lokudala isilayidi esisebenza ngokugcwele, esifinyelelekayo ngaphandle komugqa owodwa we-JavaScript akulula nje; kuwukunqoba kokusebenza. Kunokukhathazeka okuthile ngokufinyeleleka okuzungeze lesi sici, futhi noma lezi zivumelekile, kungase kube nendlela yethu yonjiniyela esingayenza sisebenze. Okuhle ukuthi, zonke lezi zinguquko ze-UI zikwenza kube lula kakhulu kunokukhohlisa kwe-DOM yangokwezifiso nokuhudula amathegi e-aria, kodwa ngiyaphuma... Manje sesingakwazi ukuqoqa omaka ngokuzenzakalelayo sisebenzisa iqembu lomaka-skrola futhi senze isitayela izinkinobho sisebenzisa ukuma kwehange ukuze sizibeke lapho sithanda khona.
.inqola { ukuchichima-x: okuzenzakalelayo; scroll-marker-group: ngemva; /* Idala isitsha samachashazi */
/* Dala izinkinobho */ &::inkinobho-skrola(ekupheleni komugqa),&::inkinobho-yokuskrola(ukuqala okusemgqeni) { okuqukethwe: ""; isikhundla: ngokuphelele; /* Sebenzisa ukuma kwe-ancho ukuze uwabeke phakathi nendawo */ isikhundla-ihange: --carousel; phezulu: ihange (isikhungo); }
/* Dala omaka ezinganeni */ div { &::umaka wokuskrola { okuqukethwe: ""; ububanzi: 24px; I-radius yomngcele: 50%; ikhesa: i-pointer; } /* Gqamisa umaka osebenzayo */ &::scroll-marker:target-current { ingemuva: elimhlophe; } } }
Idemo: Ukuhlola kwami kokudala i-carousel ngaphandle kwe-HTML ne-CSS, kusetshenziswa ukuma kwehange ukuze kubekwe izinkinobho.
Bona i-Peni Carousel Pure HTML kanye ne-CSS [efakwe ngemfoloko] nge-utilitybend.
Idemo: Ukwenziwa kabusha kwe-Webshop slider slider kusetshenziswa i-attr() ukudonsa izithombe zangemuva ngokuguqukayo kumaka.
Bona i-Pen Webshop slider slider remake in CSS [ifohlwe] yi-utilitybend. Imibuzo Yesifunda: Into Enamathelayo Ibhajwe? I-Snappy Into Evele? Isikhathi eside, besingenalo ikhono lokwazi ukuthi "into enamathelayo ibambekile" noma "into ye-snappy ihlwithwa" ngaphandle kokuthembela kuma-hacks e-IntersectionObserver. I-Chrome 133 yethule imibuzo yesimo sokuskrola, esivumela ukuthi sibuze lezi zifundazwe ngokumemezela. Ngokusetha uhlobo lwesiqukathi: isimo sokuskrola, manje singakwazi ukwenza isitayela izingane ngokusekelwe ekutheni zibambekile, zihlwithiwe, noma ziyachichima. Lokhu ukuthuthuka okukhulu "kwekhwalithi yempilo" ebengikulinde ngokulangazela kusukela ngoSuku lwe-CSS lwango-2023. Sekuvele kwavela kakhulu njengoba singakwazi nokubona isiqondiso somqulu, kuhle! Ukuze uthole isibonelo esilula: ekugcineni singafaka isithunzi kunhlokweni kuphela uma sinamathela phezulu kwendawo yokubuka: .i-header-container { uhlobo lwesitsha: scroll-state; isikhundla: okunamathelayo; phezulu: 0;
unhlokweni { ukuguquka: ibhokisi-isithunzi 0.5s ukuphuma kalula; /* Umbuzo uhlola isimo sesiqukathi */ @container scroll-state(ibambekile: phezulu) { ibhokisi-isithunzi: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Idemo: Unhlokweni onamathelayo osebenza kuphela uma ubambekile.
Bona izihloko ze-Peni Sticky ezinombuzo wesimo sokuskrola, uhlola ukuthi into enamathelayo inamathele yini [ifojiwe] yi-utilitybend.
Idemo: Uhlu lwetimu ye-Pokémon olusebenzisa imibuzo yesimo sokuskrola ehlanganiswe nokuma kwehange ukuze kuhanjiswe uhlaka phezu kohlamvu oluhlwithiwe njengamanje.
Bheka umbuzo we-Pen Scroll-state ukuze uhlole ukuthi iyiphi into ehlwithwe nge-CSS, inguqulo ye-Pokemon [ifohlwe] yi-utilitybend. I-Ergonomics Elungiselelwe: I-Logic In CSS Ingxenye ethi “Optimized Ergonomics” ye-CSS Egoqiwe igqamisa izici ezenza ukugeleza komsebenzi wethu kube lula. Izici ezintathu zigqama njengokuguqula indlela esibhala ngayo i-logic:
if() IzitatimendeSigcina sithola imibandela ku-CSS. Umsebenzi we-if() usebenza njenge-ternary operator yamashidi esitayela, okusivumela ukuthi sisebenzise amanani asekelwe kumidiya, usekelo, noma imibuzo yesitayela emgqeni. Lokhu kunciphisa isidingo se-verbose @media blocks soshintsho lwesakhiwo esisodwa. @function functionsSingakwazi ekugcineni ukuhambisa umqondo othile endaweni ehlukile, okuholela kumafayela ahlanzekile, isici sangempela sempilo. i-sibling-index() kanye ne-sibling-count()Le misebenzi yokubala isihlahla ixazulula inkinga yokugqwayiza okumangalisayo noma izinto zesitayela ngokusekelwe kusayizi wohlu. Njengoba ngihlola ku-Styling izelamani nge-CSS akukaze kube lula, lokhu kuqeda isidingo sokwenza amakhodi aqinile izakhiwo (njenge --index: 1) ku-HTML yethu.
Isibonelo: Ibala Izakhiwo Manje sesingakwazi ukubhala amafomula afingqiwe ezibalo. Isibonelo, ukunyakazisa okumangalisayo kwamakhadi angena esikrinini kuba yinto encane: .isitsha sekhadi > * { upopayi: veza ama-0.6s kalula ukuya phambili; /* Akusekho okuguquguqukayo kwe-manual --index! */ ukubambezeleka kopopayi: calc(inkomba yezelamani() * 0.1s); }
Ngize ngazama ukusebenzisa le misebenzi kanye ne-trigonometry ukuze ngibeke izinto embuthanweni ophelele ngaphandle kwe-JavaScript.
Idemo: Izithombe ezinyakazayo zamakhadi ngokuguqukayo.
Bona amakhadi we-Pen Stagger usebenzisa i-sibling-index() [ifolokhwe] nge-utilitybend.
Idemo: Ukubeka izinto kumbuthano ofanele kusetshenziswa inkomba yezelamani, ukubala kwezelamani, kanye nesici esisha se-CSS @function.
Bheka Ipeni Umbuthano usebenzisa inkomba yezelamani, ukubala kwezelamani nemisebenzi [ifohlwe] yi-utilitybend. Uhlu Lwami Lokwenza I-CSS: Izici Angikwazi Ukulinda Ukuzizama Ngenkathi ngimatasa ngiqopha izinto ezikhethiwe kanye noshintsho, umbiko othi "CSS Wrapped 2025" ugcwele ezinye izinto engingakabi nalo ithuba lokuzidubula ku-CodePen kuze kube manje. Lokhu kuphezulu ohlwini lwami lokuhlolwa kwami okulandelayo: Imibuzo Yesitsha Esinehange Ngisebenzise i-CSS Anchor Positioning kuzinkinobho ezikudemo yami ye-carousel, kodwa okuthi "CSS Wrapped" kugqamisaukuvela kwalokhu: Imibuzo Yesiqukathi Esimisiwe. Lokhu kuxazulula inkinga esike saba nayo sonke ngamathiphu wamathuluzi: uma isiphequluli siphequlula ithiphu lamathuluzi ukusuka phezulu kuye phansi ngenxa yezinkinga zesikhala, “umcibisholo” uvame ukuhlala ukhombe indlela engafanele. Ngemibuzo yesiqukathi esinehange (@container anchored(fallback: flip-block)), singakwazi isitayela isici ngokusekelwe ekutheni isiphequluli siyisiphi isikhundla sokubuyela emuva. I-Nested View Transition Groups Buka Izinguquko kube uguquko, kodwa zize nokuhwebelana okuthile: zacaba isihlahla se-elementi, esivame ukuphula ukuguqulwa kwe-3D noma ukuchichima: isiqeshana. Ngangihlale nginomuzwa wokuthi ishoda ngokuthile, futhi lokhu kungase kube yimpendulo. Ngokusebenzisa i-view-transition-group: eseduze, singakwazi ukugcina amaqembu enguquko phakathi kwelinye. Lokhu kusivumela ukuthi sigcine imiphumela yokusika noma ukuzungezisa kwe-3D ngesikhathi soshintsho — into ebingenzeki ngaphambilini ngenxa yokuthi ama-elementi anyuselwe phezulu. .ikhadi img { buka-inguquko-igama: isithombe; i-view-transition-group: eliseduze; /* Yigcine inesidleke! */ }
Ukuthayipha kanye Nezimo Okokugcina, i-ergonomist kimi izama ukuzama i-Text Box Trim, ethembisa ukususa leso sikhala esimhlophe esicasulayo ngenhla nangaphansi kokuqukethwe kombhalo (okuholayo) ukuze ekugcineni kufinyelele ukuqondanisa okuqondile okuphelele. Futhi ohlangothini lokudala, ikona-shape kanye ne-shape() umsebenzi uvula izakhiwo ezingezona unxande, okuvumela "ama-squaricles" nezindlela eziyinkimbinkimbi eziphendula okuguquguqukayo kwe-CSS. Uma sekushiwo, angikwazi ukulinda ukuba nomklamo ogcwele ama-squircles! Ikusasa Elinethemba Sibona umhlaba lapho i-CSS isikwazi ukuphatha ingqondo, isimo, nokusebenzisana okuyinkimbinkimbi obekungokwe-JavaScript ngaphambilini. Izici ezifana ne-MoveBefore (ukugcina isimo se-DOM kuma-iframe/amavidiyo) kanye ne-attr() (usebenzisa izinhlobo ezingaphezu kweyunithi yezinhlamvu zemibala namagridi) kuqhubekisela phambili ukuqinisa leli qiniso. Nakuba ezinye zalezi zici okwamanje zisahlolwa noma ziqondene ngqo ne-Chrome, umfutho awunakuphikwa. Kufanele sithembe ukusekelwa okuqhubekayo kuzo zonke iziphequluli ngokusebenzisa izinhlelo ezifana ne-Interop zokuqinisekisa ukuthi lawa makhono aba yisisekelo. Uma sekushiwo, ukuba nezinjini zesiphequluli kubaluleke kakhulu njengokuba nazo zonke lezi zici ezinhle "ku-Chrome kuqala". Lezi zici ezintsha zidinga ukuxoxwa ngazo, kuxhunyanwe nazo, futhi zihlolwe ngaphambi kokuthi zihlale ezipheqululini. Kuyisikhathi esihle kakhulu sokungena ku-CSS. Asisagcini nje ngokwenza amadokhumenti esitayela; sakha izinhlelo zokusebenza ezinamandla, eziqinile, neziqinile ngekhithi yamathuluzi yomdabu enamandla kakhulu kunangaphambili. Masiqhubeke nalesi sikhathi esisha futhi sisakaze izwi. Lokhu kugoqiwe kwe-CSS!
