Dacă ar fi să împart evoluțiile CSS în categorii, ne-am deplasat cu mult dincolo de zilele în care pur și simplu am cerut raza de frontieră pentru a simți că trăim în viitor. În prezent, trăim într-un moment în care platforma ne oferă instrumente care nu doar modifică stratul vizual, ci redefinesc fundamental modul în care arhitecțim interfețele. Credeam că numărul de funcții anunțate în 2024 nu poate fi depășit. Nu am greșit niciodată atât de fericit.
„CSS Wrapped 2025” al echipei Chrome nu este doar o listă de funcții; este un manifest pentru un web dinamic, nativ. Fiind cineva care a petrecut câțiva ani documentând aceste evoluții – de la definirea erelor „CSS5” până la complexitatea utilităților moderne de aspect – mă trezesc să privesc încheierea acestui an cu un sentiment imens de entuziasm. Asistăm la o schimbare către „Ergonomie optimizată” și „Interacțiuni de nouă generație” care ne permit să încetăm să luptăm cu codul și să începem să sculptăm interfețele în starea lor naturală.
În acest articol, puteți găsi o privire cuprinzătoare asupra caracteristicilor remarcabile din raportul Chrome, privite prin prisma experimentelor mele recente și speranțele pentru viitorul platformei.
Revoluția componentelor: în sfârșit, o selecție nativă personalizabilă
De ani de zile, ne-am bazat pe biblioteci JavaScript grele pentru a stila meniurile derulante, o „problemă veche de zeci de ani” pe care platforma a rezolvat-o în sfârșit. După cum am detaliat în explorarea mea profundă în istoria selectării personalizabile (și a articolelor conexe), acesta a fost un drum lung care a implicat Open UI, bikeshedding nume precum
Adăugarea fantastică pentru a permite conținut bogat în interiorul opțiunilor, cum ar fi imagini sau steaguri, este foarte distractiv. Putem crea tot felul de selecții în zilele noastre:
Demo: Am creat o demonstrație Poké-adventure care arată cum noul element
Vedeți Pen O selecție personalizabilă cu imagini în interiorul opțiunilor și conținutul selectat [furcat] de utilitybend.
Demo: O privire cuprinzătoare asupra stilizării selectului cu doar pseudo-elemente.
Vedeți Pen O selecție personalizabilă cu doar pseudo-elemente [furcate] de utilitybend.
Demo: Sau puteți crește cu un pas cu această demonstrație de selecție a meniului folosind optgroups.
Vedeți Pen Un meniu de selectare real cu optgroups [furcat] de utilitybend. Numai această caracteristică semnalează o schimbare masivă în modul în care vom construi formulare, reducând dependențele și datoria tehnică. Marcatori de defilare și moartea caruselului JavaScript Crearea de carusele a fost istoric un punct de fricțiune între dezvoltatori și clienți. Clienții le iubesc, dezvoltatorii se tem de JavaScript necesar pentru a le face accesibile și performante. Sosirea pseudo-elementelor ::scroll-marker și ::scroll-button() schimbă complet această dinamică. Aceste caracteristici ne permit să creăm puncte de navigare și butoane de defilare exclusiv cu CSS, legate nativ la containerul de defilare. După cum am scris pe blogul meu, acesta a fost Love at first slide. Capacitatea de a crea un glisor complet funcțional și accesibil fără o singură linie de JavaScript nu este doar convenabilă; este un triumf pentru performanță. Există unele probleme de accesibilitate în jurul acestei funcții și, deși acestea sunt valide, ar putea exista o modalitate prin care noi, dezvoltatorii, o facem să funcționeze. Lucrul bun este că toate aceste modificări ale interfeței de utilizare fac mult mai ușor decât manipularea DOM personalizată și tragerea în jurul etichetelor aria, dar mă opresc... Acum putem grupa marcatorii automat folosind scroll-marker-group și stilizați butoanele folosind poziționarea ancorelor pentru a le plasa exact unde vrem.
.carusel { overflow-x: auto; scroll-marker-grup: după; /* Creează containerul pentru puncte */
/* Creați butoanele */ &::buton de defilare (sfârșit în linie),&::buton-defilare(început-în linie) { continut: " "; poziție: absolută; /* Folosiți poziționarea ancorelor pentru a le centra */ poziție-ancoră: --carusel; sus: ancora(centru); }
/* Creați marcajele pe copii */ div { &::scroll-marker { continut: " "; latime: 24px; raza-limită: 50%; cursor: pointer; } /* Evidențiați marcatorul activ */ &::scroll-marker:target-current { fundal: alb; } } }
Demo: experimentul meu creând un carusel pur din HTML și CSS, folosind poziționarea ancorelor pentru a plasa butoanele.
Vedeți Pen Carousel Pure HTML și CSS [forked] de utilitybend.
Demo: O refacere a glisantei slick shop online care folosește attr() pentru a trage imagini de fundal în mod dinamic în marcatori.
Vedeți remake-ul glisorului slick al Pen Webshop în CSS [forked] de utilitybend. Interogări de stat: Lucru lipicios blocat? Snappy Thing Snappy? De mult timp, ne-a lipsit capacitatea de a ști dacă un „lucru lipicios este blocat” sau dacă un „articol rapid este rupt” fără a ne baza pe hack-urile IntersectionObserver. Chrome 133 a introdus interogări de stare de derulare, permițându-ne să interogăm aceste stări în mod declarativ. Setând container-type: scroll-state, acum putem modela copiii în funcție de faptul că sunt blocați, rupti sau debordați. Aceasta este o îmbunătățire masivă a „calității vieții” pe care am așteptat-o cu nerăbdare de la CSS Day 2023. Chiar a evoluat foarte mult, deoarece putem vedea și direcția derulării, minunat! Pentru un exemplu simplu: în sfârșit putem aplica o umbră unui antet numai atunci când acesta se lipește de fapt în partea de sus a ferestrei de vizualizare: .header-container { tip container: stare-scroll; poziție: lipicios; sus: 0;
antet { tranziție: casetă-umbră 0.5s ease-out; /* Interogarea verifică starea containerului */ @container scroll-state(blocat: sus) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: un antet lipicios care aplică o umbră doar atunci când este blocat.
Vedeți anteturile Pen Sticky cu interogare de stare de derulare, verificând dacă elementul lipicios este blocat [furcat] de utilitybend.
Demo: o listă cu tematică Pokémon care utilizează interogări de stare de derulare combinate cu poziționarea ancorelor pentru a muta un cadru peste caracterul snack în prezent.
Consultați interogarea Pen Scroll-state pentru a verifica ce element este capturat cu CSS, versiunea Pokemon [forked] de utilitybend. Ergonomie optimizată: logica în CSS Secțiunea „Ergonomie optimizată” din CSS Wrapped evidențiază funcțiile care fac fluxurile noastre de lucru mai intuitive. Trei caracteristici ies în evidență ca transformatoare pentru modul în care scriem logica:
Declarații if() În sfârșit, obținem condiționale în CSS. Funcția if() acționează ca un operator ternar pentru foile de stil, permițându-ne să aplicăm valori bazate pe media, suport sau interogări de stil inline. Acest lucru reduce nevoia de blocuri @media detaliate pentru modificările unice ale proprietăților. Funcțiile @funcție Putem muta, în sfârșit, o parte logică într-un loc diferit, rezultând niște fișiere mai curate, o caracteristică reală a calității vieții. sibling-index() și sibling-count()Aceste funcții de numărare a arborilor rezolvă problema eșalonării animațiilor sau a elementelor de stil în funcție de dimensiunea listei. După cum am explorat în Stilarea fraților cu CSS nu a fost niciodată mai ușoară, acest lucru elimină nevoia de a codifica proprietățile personalizate (cum ar fi --index: 1) în HTML-ul nostru.
Exemplu: Calcularea layout-urilor Acum putem scrie formule matematice concise. De exemplu, eșalonarea unei animații pentru cardurile care intră pe ecran devine trivială: .card-container > * { animație: dezvăluie 0.6s easeout înainte; /* Gata cu variabilele manuale --index! */ animație-întârziere: calc(sbling-index() * 0.1s); }
Am experimentat chiar și utilizarea acestor funcții împreună cu trigonometria pentru a plasa elemente într-un cerc perfect fără JavaScript.
Demo: Eșalonează animațiile de card în mod dinamic.
Vedeți cardurile Pen Stagger folosind sibling-index() [forked] de utilitybend.
Demo: plasarea articolelor într-un cerc perfect folosind sibling-index, sibling-count și noua funcție CSS @function.
Vezi stiloul Cercul folosind indexul fraților, numărul fraților și funcțiile [forked] de utilitybend. Lista mea de sarcini CSS: funcții pe care abia aștept să le încerc În timp ce am fost ocupat cu sculptarea selecțiilor și tranzițiilor, raportul „CSS Wrapped 2025” este plin de alte bunătăți pe care nu am avut încă șansa să le declanșez în CodePen. Acestea sunt în fruntea listei mele pentru următoarele experimente: Interogări de containere ancorate Am folosit CSS Anchor Positioning pentru butoanele din demonstrația mea carusel, dar „CSS Wrapped” evidențiază unevoluția acestui: Anchored Container Queries. Acest lucru rezolvă o problemă pe care am avut-o cu toții cu sfaturile cu instrumente: dacă browserul întoarce indicația de sus în jos din cauza constrângerilor de spațiu, „săgeata” rămâne adesea îndreptată în direcția greșită. Cu interogări de container ancorate (@container anchored(fallback: flip-block)), putem stila elementul în funcție de poziția de rezervă aleasă de browser. Grupuri de tranziție de vizualizare imbricată View Transitions au fost o revoluție, dar au venit cu un compromis specific: au aplatizat arborele de elemente, care deseori a rupt transformările 3D sau depășirea: clip. Întotdeauna am avut sentimentul că îi lipsește ceva și acesta ar putea fi doar răspunsul. Folosind view-transition-group: nearest, putem în sfârșit imbrica grupuri de tranziție unul în celălalt. Acest lucru ne permite să menținem efectele de tăiere sau rotațiile 3D în timpul unei tranziții - ceva care anterior era imposibil deoarece elementele erau ridicate până la nivelul superior. .card img { vizualizare-nume-tranziție: fotografie; vizualizare-tranziție-grup: cel mai apropiat; /* Păstrați-l imbricat! */ }
Tipografie și forme În cele din urmă, ergonomul din mine este dornic să încerce Text Box Trim, care promite să elimine acel spațiu alb suplimentar enervant deasupra și dedesubtul conținutului textului (principalul) pentru a obține în sfârșit alinierea verticală perfectă. Iar pentru partea creativă, forma colțului și funcția shape() deschid aspecte non-dreptunghiulare, permițând „pătraturi” și căi complexe care răspund la variabilele CSS. Acestea fiind spuse, abia aștept să am un design plin de veverițe! Un viitor plin de speranță Asistăm la o lume în care CSS devine capabil să gestioneze logica, starea și interacțiunile complexe care aparțineau anterior JavaScript. Caracteristici precum moveBefore (păstrarea stării DOM pentru iframe/videoclipuri) și attr() (folosind tipuri dincolo de șiruri pentru culori și grile) cimentează și mai mult această realitate. Deși unele dintre aceste funcții sunt în prezent experimentale sau specifice Chrome, impulsul este incontestabil. Trebuie să sperăm la sprijin continuu în toate browserele prin inițiative precum Interop pentru a ne asigura că aceste capabilități devin linia de bază. Acestea fiind spuse, a avea motoare de browser este la fel de important ca și a avea toate aceste caracteristici minunate în „Chrome mai întâi”. Aceste noi funcții trebuie discutate, modificate și testate înainte de a ajunge vreodată în browsere. Este un moment fantastic pentru a intra în CSS. Nu mai suntem doar documente de stil; creăm aplicații dinamice, ergonomice și robuste cu un set de instrumente nativ care este mai puternic ca niciodată. Să mergem cu această nouă eră și să răspândim cuvântul. Acesta este împachetat CSS!
