Haeba ke ne ke arola li-evolutions tsa CSS ka mekhahlelo, re tlohile hole le matsatsi ao re neng re kopa feela hore moeli oa radius o ikutloe eka re phela nakong e tlang. Hajoale re phela nakong eo sethala se re fang lisebelisoa tse sa fetoleng feela lera la pono, empa e hlalosa hantle hore na re theha lihokelo tsa meralo joang. Ke ne ke nahana hore palo ea likarolo tse phatlalalitsoeng ka 2024 e ke ke ea eketsoa. Ha ho mohla nkileng ka fosa ka thabo.
Sehlopha sa Chrome "CSS Wrapped 2025" ha se lethathamo la likarolo feela; ke manifesto bakeng sa tepo e matla, ea tlhaho. Joaloka motho ea qetileng lilemo tse 'maloa a ngola liphetoho tsena - ho tloha ho hlalosa mehla ea "CSS5" ho ea ho tse rarahaneng tsa lisebelisoa tsa sejoale-joale - ke iphumana ke shebile sephetho sa selemo sena ka thabo e kholo. Re bona phetoho e lebisang ho "Optimized Ergonomics" le "Next-gen interactions" e re lumellang ho emisa ho loantša khoutu le ho qala ho betla li-interfaces sebakeng sa bona sa tlhaho.
Sehloohong sena, o ka fumana pono e felletseng ea likarolo tse emeng ho tsoa tlalehong ea Chrome, e shebiloeng ka lense ea liteko tsa ka tsa morao-rao le tšepo ea bokamoso ba sethala.
Phetohelo ea Karolo: Qetellong, Khetho ea Native Customizable
Ka lilemo tse ngata, re 'nile ra itšetleha ka lilaebrari tse boima tsa JavaScript ho ngola li-dropdown, "bothata ba lilemo tse mashome" boo sethala se qeteletseng se bo rarolle. Ha ke ntse ke qaqisa ka ho teba ha ka ka ho teba historing ea khetho ea customizable (le lihlooho tse amanang le eona), ena e bile tsela e telele e kenyelletsang Open UI, mabitso a libaesekele tse kang
Keketso e ntle ea ho lumella litaba tse ruileng ka har'a likhetho, joalo ka litšoantšo kapa lifolakha, ke ntho e monate haholo. Re ka etsa mefuta eohle ea likhetho kajeno:
Demo: Ke thehile demo ea Poké-adventure e bonts'ang hore na karolo e ncha ea
Sheba khetho e ikhethileng ea Pen A e nang le litšoantšo tse ka hare ho likhetho le litaba tse khethiloeng [tse ferekoang] ke utilitybend.
Demo: Ho sheba ka botlalo mokhoa oa ho etsa setaele se khethiloeng ka likarolo tsa pseudo feela.
Sheba khetho eo u ka e khethang ea Pen A e nang le likarolo tsa pseudo feela [tse ferekoang] ke utilitybend.
Moemo: Kapa o ka e raha holimo ka mokhoa ona oa khetho ea Menu o sebelisa lihlopha tsa optgroups.
Sheba Pene ea 'Nete ea ho Khetha Menu e nang le li-optgroups [tse ferekoang] ke utilitybend. Karolo ena e le 'ngoe e bontša phetoho e kholo ea hore na re tla theha liforomo joang, re fokotsa ho itšetleha le likoloto tsa tekheniki. Mengolo ea Meqolo le Lefu la JavaScript Carousel Ho theha li-carousels esale e le ntlha ea likhohlano lipakeng tsa bahlahisi le bareki. Bareki baa li rata, bahlahisi ba tšaba JavaScript e hlokahalang ho etsa hore li fumanehe le ho sebetsa. Ho fihla ha ::scroll-marker le ::scroll-button() pseudo-elements ho fetola matla ana ka botlalo. Likarolo tsena li re lumella ho theha matheba a ho sesa le likonopo tsa ho tsamaisa ka CSS feela, tse hokahaneng ka tlhaho le sets'oants'o sa meqolo. Joalokaha ke ngotse ho blog ea ka, ena e ne e le Lerato qalong slide. Bokhoni ba ho theha selaete se sebetsang ka botlalo, se fumanehang ntle le mola o le mong oa JavaScript ha se bonolo feela; ke tlholo bakeng sa tshebetso. Ho na le matshwenyeho a phihlello ho potoloha karolo ena, mme leha tsena di nepahetse, ho ka ba le tsela eo rona bahlahisi ba ka e etsang hore e sebetse. Ntho e ntle ke hore, liphetoho tsena tsohle tsa UI li etsa hore e be bonolo haholo ho feta tloaelo ea DOM e qhekellang le ho hula li-tag tsa aria, empa ke kheloha ... Hona joale re ka hlophisa li-marker ka bo eona re sebelisa scroll-marker-group ebe re seta likonopo re sebelisa ankora positioning ho li beha hantle moo re batlang.
.carousel { overflow-x: auto; scroll-marker-group: ka morao; /* E theha setshelo sa matheba */
/* Theha likonopo */ &:: konopo ea moqolo (bofelong ba marang-rang),&:: konopo ea moqolo (ho qala ka har'a marang-rang) { litaba: ""; boemo: feletseng; /* Sebelisa boemo ba ankora ho li beha bohareng */ boemo-ankora: --carousel; holimo: ankora(bohareng); }
/* Etsa matšoao ho bana */ div { &:: lesupa la moqolo { litaba: ""; bophara: 24px; moeli-radius: 50%; cursor: pointer; } /* Totobatsa lesupa le sebetsang */ &::scroll-marker:target-current { bokamorao: bosoeu; } } }
Demo: Teko ea ka ea ho theha carousel ka ntle ho HTML le CSS, ke sebelisa boemo ba ankora ho beha likonopo.
Sheba Pen Carousel Pure HTML le CSS [e ferekoang] ke utilitybend.
Demo: Sesebelisoa sa Webshop slick slider remake se sebelisa attr() ho hula litšoantšo tsa bokamorao ka matla ho limaraka.
Sheba Pen Webshop slick slider remake ho CSS [e ferekoang] ke utilitybend. Lipotso tsa Naha: Na ho na le Ntho e Khomarehang e Khomaretseng? Ntho ea Snappy e hlahisitsoe? Ka nako e telele, re haelloa ke bokhoni ba ho tseba hore na "ntho e khomarelang e khomaretsoe" kapa haeba "ntho e nyenyane e hapuoe" ntle le ho itšetleha ka li-hacks tsa IntersectionObserver. Chrome 133 e hlahisitse lipotso tsa boemo ba moqolo, e re lumellang ho botsa linaha tsena ka mokhoa o hlakileng. Ka ho beha mofuta oa setshelo: scroll-state, joale re ka seta bana ho ipapisitse le hore na ba ts'oarehile, ba koetsoe, kapa ba tletse. Ena ke ntlafatso e kholo ea "boleng ba bophelo" eo esale ke e emetse ka tjantjello ho tloha ka Letsatsi la CSS 2023. E bile teng haholo kaha re khona ho bona tsela ea moqolo, e ratehang! Bakeng sa mohlala o bonolo: re ka qetella re sebelisa seriti hloohong ha feela se ntse se khomaretse kaholimo ho sebaka sa pono: .setshelo-hlooho { mofuta oa setshelo: scroll-state; boemo: ho khomarela; holimo: 0;
hlooho { phetoho: lebokose-moriti 0.5s bonolo-tsoa; /* Potso e lekola boemo ba setshelo */ @container scroll-state(e khomaretsoeng: holimo) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Hlooho e khomarelang e sebelisang moriti feela ha e hlile e khomaretsoe.
Sheba lihlooho tsa Pen Sticky tse nang le potso ea boemo ba moqolo, u sheba hore na ntho e khomarelang e khomaretsoe [e fereko] ke utilitybend.
Demo: Lethathamo la Pokémon-themed le sebelisang lipotso tsa boemo ba ho phutholla hammoho le boemo ba ankora ho tsamaisa foreimi holim'a sebopeho se hapiloeng hajoale.
Sheba potso ea Pen Scroll-state ho hlahloba hore na ke ntho efe e nkiloeng ka CSS, Pokemon version [forked] by utilitybend. Optimized Ergonomics: Logic In CSS Karolo ea "Optimized Ergonomics" ea CSS Wrapped e totobatsa likarolo tse etsang hore mosebetsi oa rona o be bonolo haholoanyane. Lintlha tse tharo li hlahella e le tse fetolang tsela eo re ngolang mabaka ka eona:
haeba() Lipolelo Qetellong re fumana maemo ho CSS. The if() ts'ebetso e sebetsa joalo ka opareitara ea ternary bakeng sa li-stylesheets, e re lumellang ho sebelisa litekanyetso ho latela mecha ea litaba, tšehetso, kapa lipotso tsa setaele inline. Sena se fokotsa tlhoko ea verbose @media blocks bakeng sa liphetoho tsa thepa e le 'ngoe. @function functionRe ka qetella re tsamaisitse mabaka a mang sebakeng se fapaneng, ho fella ka lifaele tse ling tse hloekileng, boleng ba bophelo ba nnete. sibling-index() le sibling-count()Mesebetsi ena ea ho bala lifate e rarolla bothata ba lipopae tse makatsang kapa lintho tsa setaele tse ipapisitseng le boholo ba lenane. Ha ke ntse ke hlahloba ho Styling banab'eso ba nang le CSS ha ho mohla ho kileng ha ba bonolo, sena se felisa tlhoko ea thepa ea tloaelo e thata (joalo ka --index: 1) ho HTML ea rona.
Mohlala: Ho Bala Libopeho Hona joale re ka ngola mekhoa e khuts'oane ea lipalo. Mohlala, ho ts'oara lipopae bakeng sa likarete tse kenang skrineng ho fetoha ntho e sa reng letho: .setshelo sa karete > * { animation: senola 0.6s ho ea pele habonolo; /* Ha ho sa na mefuta e fapaneng ea li-index! */ animation-tieho: calc(ngoan'abo-index() * 0.1s); }
Ke bile ke leka ho sebelisa mesebetsi ena hammoho le trigonometry ho beha lintho ka har'a selikalikoe se phethahetseng ntle le JavaScript.
Demo: Lipopae tsa likarete tse makatsang ka matla.
Sheba likarete tsa Pen Stagger u sebelisa sibling-index() [forked] by utilitybend.
Demo: Ho beha lintho ka har'a selikalikoe se phethahetseng u sebelisa index ea banab'eno, palo ea banab'eno, le karolo e ncha ea CSS @function.
Sheba Pene Selika-likoe se sebelisa index ea ngoan'abo, palo ea banab'eno le mesebetsi [forked] by utilitybend. Lethathamo la ka la Lintho Tseo ke Tlang ho li Etsa tsa CSS: Likarolo tseo ke sitoang ho ema ho li Leka Ha ke ntse ke phathahane ka ho betla likhetho le liphetoho, tlaleho ea "CSS Wrapped 2025" e tletse lintho tse ling tse ntle tseo ke sa kang ka ba le monyetla oa ho li chesa ho CodePen. Tsena li holimo lethathamong la ka la liteko tse latelang: Lipotso tsa Anchored Container Ke sebelisitse CSS Anchor Positioning bakeng sa likonopo tsa demo ea ka ea carousel, empa "CSS Wrapped" e totobatsaho iphetola ha sena: Lipotso tsa Anchored Container. Sena se rarolla bothata boo bohle re kileng ra ba le bona ka lisebelisoa tsa lisebelisoa: haeba sebatli se phethola sesebelisoa ho tloha holimo ho ea tlase ka lebaka la mathata a sebaka, hangata "motsu" o lula o supa tsela e fosahetseng. Ka lipotso tse tšehelitsoeng ka setshelo (@container anchored(fallback: flip-block)), re ka setaele element ho latela hore na sebatli se khethile boemo bofe. Nested View Transition Groups View Transitions e bile phetohelo, empa ba tlile ka khoebo e itseng: ba batalalitse sefate sa element, se neng se atisa ho senya 3D transforms kapa overflow: clip. Ke ne ke lula ke e-na le maikutlo a hore e haelloa ke ho hong, 'me sena e ka 'na ea e-ba karabo feela. Ka ho sebelisa view-transition-group: haufi, re ka qetella re theha lihlopha tsa phetoho ka har'a tse ling. Sena se re lumella ho boloka litlamorao tsa ho fokotsa kapa ho potoloha ha 3D nakong ea phetoho - ntho eo pele e neng e sa khonehe hobane likarolo li ne li phahamiselitsoe holimo. .card img { pono-phetoho-lebitso: foto; view-transition-group: haufi; /* E boloke e lutse! */ }
Typography le Libopeho Qetellong, setsebi sa ergonomist ho 'na se hlohlona ho leka Text Box Trim, e ts'episang ho tlosa sebaka se soabisang se eketsehileng ka holimo le ka tlase ho litemana tse ngotsoeng (tse etellang pele) hore qetellong li fihlele tekano e nepahetseng. 'Me bakeng sa lehlakore la pōpo, sekhutlo-sebopeho le sebopeho () ts'ebetso li bula mekhoa e se nang li-rectangular, e lumellang "squaricles" le litsela tse rarahaneng tse arabelang ho mefuta-futa ea CSS. Ha ho buuoa joalo, ha ke khone ho emela ho ba le moralo o tletseng li-squircles! Bokamoso bo Nang le Tšepo Re ntse re bona lefatše leo CSS e seng e khona ho sebetsana le maikutlo, boemo le litšebelisano tse rarahaneng tseo pele e neng e le tsa JavaScript. Likarolo tse kang moveBefore (ho boloka boemo ba DOM bakeng sa li-iframe/livideo) le attr() (ho sebelisa mefuta e fetang likhoele bakeng sa mebala le li-grid) li tiisa 'nete ena. Le ha tse ling tsa likarolo tsena hajoale e le liteko kapa li tobane le Chrome, lebelo le ke ke la latoloa. Re tlameha ho tšepa tšehetso e tsoelang pele ho libatli tsohle ka matsapa a kang Interop ho netefatsa hore bokhoni bona e ba motheo. Ho thoe, ho ba le lienjineri tsa sebatli ho bohlokoa joalo ka ho ba le likarolo tsena tsohle tse ntle ho "Chrome pele". Likarolo tsena tse ncha li hloka ho buisanoa, ho khoasoe ka tsona, le ho lekoa pele li fihla ho libatli. Ke motsotso o monate oa ho kena ho CSS. Ha re sa ngola litokomane tsa setaele feela; re etsa lits'ebetso tse matla, tsa ergonomic, le tse matla ka lisebelisoa tsa tlhaho tse matla ho feta pele. Ha re tsoeleng pele le nako ena e ncha 'me re phatlalatse lentsoe. Ena ke CSS E phuthetsoe!
