Si mwen ta divize evolisyon CSS an kategori, nou te deplase byen lwen pi lwen pase jou yo lè nou tou senpleman mande pou reyon fwontyè yo santi tankou nou t ap viv nan lavni. Kounye a nou ap viv nan yon moman kote platfòm la ap ban nou zouti ki pa jis ajiste kouch vizyèl la, men ki fondamantalman redefini fason nou achitèk entèfas. Mwen te panse ke kantite karakteristik yo te anonse nan 2024 pa t 'kapab depase. Mwen pa janm te tèlman kontan mal.
"CSS Wrapped 2025" ekip Chrome a se pa sèlman yon lis karakteristik; li se yon manifès pou yon dinamik, entènèt natif natal. Kòm yon moun ki te pase yon koup de ane dokimante evolisyon sa yo - soti nan defini epòk "CSS5" nan konplike yo nan sèvis piblik modèn layout - mwen jwenn mwen gade nan vlope ane sa a ak yon gwo sans de eksitasyon. Nou wè yon chanjman nan direksyon "Ergonomi Optimize" ak "Entèraksyon pwochen jenerasyon" ki pèmèt nou sispann goumen kòd la epi kòmanse skultur entèfas nan eta natirèl yo.
Nan atik sa a, ou ka jwenn yon gade konplè sou karakteristik yo ki enpòtan nan rapò Chrome a, gade nan lantiy eksperyans ki sot pase mwen yo ak espwa pou lavni platfòm la.
Revolisyon an eleman: Finalman, yon seleksyon natif natal Customizable
Pandan plizyè ane, nou te konte sou bibliyotèk JavaScript lou pou style dropdowns, yon "pwoblèm ki gen plizyè deseni" ke platfòm la te finalman rezoud. Kòm mwen te detaye nan gwo plonje mwen an nan istwa a nan seleksyon an customizable (ak atik ki gen rapò), sa a te yon wout long ki enplike Open UI, bikeshedding non tankou
Anplis de sa a kokenn pèmèt kontni rich andedan opsyon, tankou imaj oswa drapo, se yon anpil plezi. Nou ka kreye tout kalite seleksyon jodi a:
Demo: Mwen te kreye yon Demo Poké-aventure ki montre kouman nouvo eleman
Al gade nan plim Yon seleksyon personnalisable ak imaj andedan opsyon yo ak kontni an chwazi [fouchèt] pa utilitybend.
Demo: Yon gade konplè sou manier seleksyon an ak sèlman pseudo-eleman.
Al gade nan plim Yon seleksyon customizable ak sèlman pseudo-eleman [fouchèt] pa utilitybend.
Demo: Oswa ou ka choute li moute yon dan ak sa a Demo seleksyon Menu lè l sèvi avèk optgroups.
Gade Pen an Yon meni seleksyon aktyèl ak optgroups [forked] pa utilitybend. Karakteristik sa a pou kont li siyal yon chanjman masiv nan fason nou pral bati fòm, diminye depandans ak dèt teknik. Scroll Markers Ak Lanmò JavaScript Carousel la Kreye karousèl te istorikman yon pwen friksyon ant devlopè ak kliyan. Kliyan yo renmen yo, devlopè yo pè JavaScript ki nesesè pou fè yo aksesib ak pèfòmans. Arive nan ::scroll-marker ak ::scroll-button() pseudo-eleman chanje dinamik sa a nèt. Karakteristik sa yo pèmèt nou kreye pwen navigasyon ak bouton woulo liv piman ak CSS, lye natif natal nan veso woulo liv la. Kòm mwen te ekri sou blog mwen an, sa a te renmen nan premye glise. Kapasite pou kreye yon kurseur konplètman fonksyonèl, aksesib san yon sèl liy JavaScript se pa sèlman pratik; li se yon triyonf pou pèfòmans. Gen kèk pwoblèm aksè alantou karakteristik sa a, e menm si sa yo valab, ta ka gen yon fason pou nou devlopè fè li travay. Bagay la bon se, tout chanjman sa yo UI yo ap fè li pi fasil pase manipilasyon DOM koutim ak trennen alantou tags aria, men mwen digress ... Nou kapab kounye a gwoup makè otomatikman lè l sèvi avèk scroll-marker-group ak style bouton yo lè l sèvi avèk pozisyon jete lank pou mete yo egzakteman kote nou vle.
.carousel { debòde-x: oto; scroll-marker-group: apre; /* Kreye veso a pou pwen */
/* Kreye bouton yo */ &::scroll-bouton (inline-end),&::scroll-bouton(inline-start) { kontni: " "; pozisyon: absoli; /* Sèvi ak pozisyon jete lank pou santre yo */ pozisyon-ank: --carousel; tèt: anchor (sant); }
/* Kreye makè yo sou timoun yo */ div { &::scroll-marker { kontni: " "; lajè: 24px; fwontyè-reyon: 50%; kurseur: pointeur; } /* Mete aksan sou makè aktif la */ &::scroll-marker:target-current { background: blan; } } }
Demo: Eksperyans mwen kreye yon Carousel piman soti nan HTML ak CSS, lè l sèvi avèk pozisyon jete lank pou mete bouton yo.
Gade Pen Carousel Pure HTML ak CSS [forked] pa utilitybend.
Demo: Yon renouvèlman kurseur Slick Webshop lè l sèvi avèk attr () pou rale imaj background dinamikman nan makè yo.
Gade Pen Webshop slick slider remake nan CSS [forked] pa utilitybend. Demand Eta: Bagay kolan kole? Bagay Snappy kase? Pou yon tan long, nou te manke kapasite pou konnen si yon "bagay kolan kole" oswa si yon "atik snappy kase" san konte sou pirataj IntersectionObserver. Chrome 133 te entwodui rechèch eta defile, sa ki te pèmèt nou mande eta sa yo nan yon fason deklaratif. Lè nou mete kontenè-kalite: defile-eta, nou kapab kounye a style timoun yo selon si yo kole, kase, oswa debòde. Sa a se yon amelyorasyon masiv nan "kalite lavi" ke mwen te tann anvi pou depi jou CSS 2023. Li te menm evolye anpil depi nou ka wè tou direksyon an nan woulo liv la, bèl! Pou yon egzanp senp: nou ka finalman aplike yon lonbraj nan yon header sèlman lè li se aktyèlman rete soude nan tèt la nan fenèt la: .header-container { kontenè-kalite: woulo liv-eta; pozisyon: kolan; tèt: 0;
header { tranzisyon: bwat-lonbraj 0.5s fasilite-soti; /* Rekèt la tcheke eta veso a */ @container defile-eta (kole: tèt) { bwat-lonbraj: rgba (0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Yon header kolan ki aplike sèlman yon lonbraj lè li aktyèlman kole.
Gade tèt yo Pen Sticky ak rechèch defile-eta, tcheke si eleman kolan an kole [fouchèt] pa utilitybend.
Demo: Yon lis tematik Pokemon ki sèvi ak demann defile-eta konbine avèk pozisyon jete lank pou deplase yon ankadreman sou karaktè kounye a kase.
Gade rekèt Pen Scroll-eta a pou tcheke ki atik ki kase ak CSS, vèsyon Pokemon [forked] pa utilitybend. Optimize Ergonomi: Lojik nan CSS Seksyon "Ergonomi Optimize" nan CSS Wrapped mete aksan sou karakteristik ki fè workflows nou yo pi entwisyon. Twa karakteristik parèt kòm transfòmasyon pou fason nou ekri lojik:
si() Deklarasyon Nou finalman jwenn kondisyonèl nan CSS. Fonksyon if() aji tankou yon operatè ternary pou stylesheets, sa ki pèmèt nou aplike valè ki baze sou medya, sipò, oswa demann style an liy. Sa a diminye nesesite pou blòk @medya pwolib pou chanjman pwopriyete sèl. @fonksyon fonksyon Nou ka finalman deplase kèk lojik nan yon kote diferan, sa ki lakòz kèk dosye pwòp, yon karakteristik kalite lavi reyèl. sibling-index() ak sibling-count()Fonksyon konte pye bwa sa yo rezoud pwoblèm nan animasyon stupéfiants oswa atik stil ki baze sou gwosè lis la. Kòm mwen te eksplore nan Styling frè ak sè ak CSS pa janm te pi fasil, sa a elimine bezwen an difisil-kode pwopriyete koutim (tankou --index: 1) nan HTML nou an.
Egzanp: Kalkile Layouts Kounye a nou ka ekri fòmil matematik kout. Pou egzanp, echemen yon animasyon pou kat k ap antre nan ekran an vin trivial: .card-container > * { animasyon: revele 0.6s fasil-soti anvwa; /* Pa gen plis manyèl --index varyab! */ animasyon-reta: calc(frè-sè-index () * 0.1s); }
Mwen menm te fè eksperyans lè l sèvi avèk fonksyon sa yo ansanm ak trigonometri pou mete atik nan yon sèk pafè san okenn JavaScript.
Demo: Echemen animasyon kat dinamik.
Gade kat Pen Stagger yo lè l sèvi avèk sibling-index() [forked] pa utilitybend.
Demo: Mete atik yo nan yon sèk pafè lè l sèvi avèk endèks frè ak sè, konte frè ak sè, ak nouvo karakteristik CSS @fonksyon an.
Gade plim Sèk la lè l sèvi avèk endèks frè ak sè, konte frè ak sè ak fonksyon [forked] pa utilitybend. Lis pou fè CSS mwen an: Karakteristik mwen pa ka tann eseye Pandan ke mwen te okipe skultur seleksyon ak tranzisyon, rapò "CSS Wrapped 2025" chaje ak lòt bagay ke mwen poko gen chans dife nan CodePen ankò. Sa yo wo nan lis mwen an pou pwochen eksperyans mwen yo: Anchored Container Queries Mwen te itilize CSS Anchor Positioning pou bouton yo nan demonstrasyon Carousel mwen an, men "CSS Wrapped" mete aksan sou yonevolisyon sa a: Anchored Container Queries. Sa a rezoud yon pwoblèm nou tout te genyen ak konsèy zouti: si navigatè a ranvèse konsèy zouti a soti anwo jouk anba akòz kontrent espas, "flèch la" souvan rete lonje dwèt nan move fason. Avèk rekèt veso ancrage (@container anchored(fallback: flip-block)), nou ka style eleman ki baze sou ki pozisyon repli navigatè a te chwazi aktyèlman. Gwoup tranzisyon View anbrike View Tranzisyon yo te yon revolisyon, men yo te vini ak yon komès espesifik: yo aplati pye bwa a eleman, ki souvan kraze 3D transfòme oswa debòde: clip. Mwen te toujou gen yon santiman ke li te manke yon bagay, e sa a ta ka jis repons lan. Lè nou itilize view-transition-group: ki pi pre, nou ka finalman fè nich gwoup tranzisyon youn nan lòt. Sa a pèmèt nou kenbe efè taye oswa wotasyon 3D pandan yon tranzisyon - yon bagay ki te deja enposib paske eleman yo te leve jiska nivo siperyè. .card img { View-tranzisyon-non: foto; view-tranzisyon-group: ki pi pre; /* Kenbe li nich! */ }
Tipografi ak fòm Finalman, ergonomis nan mwen an grate eseye Text Box Trim, ki pwomèt yo retire sa anmèdan espas blanch siplemantè pi wo a ak anba kontni tèks (dirijan a) finalman reyalize aliyman vètikal pafè. Ak pou bò kreyatif, kwen-fòm ak fonksyon an fòm () yo louvri moute layouts ki pa rektangilè, sa ki pèmèt pou "squaricles" ak chemen konplèks ki reponn a varyab CSS. Sa yo te di, mwen pa ka tann gen yon konsepsyon plen ak ekirèy! Yon avni ki gen espwa Nou temwen yon mond kote CSS ap vin kapab jere lojik, eta, ak entèraksyon konplèks ki te deja fè pati JavaScript. Karakteristik tankou moveBefore (konsève eta DOM pou iframes/videyo) ak attr() (itilize kalite pi lwen pase fisèl pou koulè ak griy) plis simante reyalite sa a. Pandan ke kèk nan karakteristik sa yo se kounye a eksperimantal oswa espesifik nan Chrome, momantòm nan se nye. Nou dwe espere sipò kontinye atravè tout navigatè atravè inisyativ tankou Interop pou asire kapasite sa yo vin debaz la. Sa yo te di, gen motè navigatè enpòtan menm jan ak tout karakteristik sa yo awizom nan "Chrome premye". Nouvo karakteristik sa yo bezwen diskite, brikolé ak teste anvan tout tan ateri nan navigatè yo. Se yon moman kokenn pou antre nan CSS. Nou pa jis dokiman manier ankò; nou ap fabrike aplikasyon dinamik, ergonomic, ak solid ak yon zouti natif natal ki pi pwisan pase tout tan. Ann ale ak nouvo epòk sa a epi gaye pawòl la. Sa a se CSS vlope!
