As ek CSS-evolusies in kategorieë sou verdeel, het ons ver verby die dae beweeg toe ons bloot vir grensradius gevra het om te voel dat ons in die toekoms leef. Ons leef tans in 'n oomblik waar die platform vir ons gereedskap gee wat nie net die visuele laag aanpas nie, maar fundamenteel herdefinieer hoe ons argitek koppelvlakke maak. Ek het gedink die aantal kenmerke wat in 2024 aangekondig is, kon nie opgetel word nie. Ek was nog nooit so gelukkig verkeerd nie.
Die Chrome-span se "CSS Wrapped 2025" is nie net 'n lys kenmerke nie; dit is 'n manifes vir 'n dinamiese, inheemse web. As iemand wat 'n paar jaar spandeer het om hierdie evolusies te dokumenteer - van die definisie van "CSS5"-era tot die ingewikkeldhede van moderne uitleghulpmiddels - vind ek dat ek met 'n groot gevoel van opgewondenheid na hierdie jaar se afsluiting kyk. Ons sien 'n verskuiwing na "Geoptimaliseerde Ergonomie" en "Volgende-gen interaksies" wat ons in staat stel om op te hou om die kode te beveg en koppelvlakke in hul natuurlike toestand te begin beeldhou.
In hierdie artikel kan u 'n omvattende blik op die uitstaande kenmerke van Chrome se verslag vind, gesien deur die lens van my onlangse eksperimente en hoop vir die toekoms van die platform.
Die komponentrevolusie: uiteindelik 'n inheemse aanpasbare keuse
Ons het jare lank op swaar JavaScript-biblioteke staatgemaak om dropdowns te styl, 'n "dekades oue probleem" wat die platform uiteindelik opgelos het. Soos ek in my diepgaande duik in die geskiedenis van die aanpasbare seleksie (en verwante artikels) uiteengesit het, was dit 'n lang pad wat oop UI, fietsryname soos
Die fantastiese toevoeging om ryk inhoud binne-opsies toe te laat, soos beelde of vlae, is baie pret. Ons kan deesdae allerhande keuses skep:
Demo: Ek het 'n Poké-avontuur-demo geskep wat wys hoe die nuwe
Sien die pen 'n aanpasbare keuse met beelde binne die opsies en die geselekteerde inhoud [gevurk] deur utilitybend.
Demo: 'n Omvattende blik op die stilering van die uitgesoekte met slegs pseudo-elemente.
Sien die Pen 'n Aanpasbare keuse met slegs pseudo-elemente [gevurk] deur utilitybend.
Demo: Of jy kan dit 'n kerf opskiet met hierdie Menu-keuse-demo deur optgroups te gebruik.
Sien die pen 'n werklike kieslys met optgroups [gevurk] deur utilitybend. Hierdie kenmerk alleen dui op 'n massiewe verskuiwing in hoe ons vorms sal bou, wat afhanklikhede en tegniese skuld verminder. Rolmerkers en die dood van die JavaScript-karrousel Die skep van karrousels was histories 'n wrywingspunt tussen ontwikkelaars en kliënte. Kliënte is mal oor hulle, ontwikkelaars vrees die JavaScript wat nodig is om hulle toeganklik en werksaam te maak. Die koms van ::scroll-marker en ::scroll-button() pseudo-elemente verander hierdie dinamiek heeltemal. Hierdie kenmerke stel ons in staat om navigasiekolletjies en rolknoppies bloot met CSS te skep, wat inheems aan die rolhouer gekoppel is. Soos ek op my blog geskryf het, was dit Liefde met die eerste skyfie. Die vermoë om 'n ten volle funksionele, toeganklike skuifbalk sonder 'n enkele lyn JavaScript te skep, is nie net gerieflik nie; dit is 'n triomf vir prestasie. Daar is 'n paar toeganklikheidsbekommernisse rondom hierdie kenmerk, en al is dit geldig, is daar dalk 'n manier vir ons ontwikkelaars om dit te laat werk. Die goeie ding is dat al hierdie UI-veranderinge dit baie makliker maak as persoonlike DOM-manipulasie en rondsleep van aria-etikette, maar ek wyk af ... Ons kan nou merkers outomaties groepeer deur gebruik te maak van scroll-merker-groep en die knoppies styler met ankerposisionering om hulle presies te plaas waar ons wil.
.carousel { oorloop-x: outomaties; rol-merker-groep: na; /* Skep die houer vir kolletjies */
/* Skep die knoppies */ &::scroll-knoppie(inlyn-einde),&::scroll-knoppie (inlyn-begin) { inhoud: " "; posisie: absoluut; /* Gebruik ankerposisionering om hulle te sentreer */ posisie-anker: --karrousel; top: anker(middel); }
/* Skep die merkers op die kinders */ div { &::scroll-merker { inhoud: " "; breedte: 24px; grens-radius: 50%; wyser: wyser; } /* Merk die aktiewe merker */ &::scroll-marker:target-current { agtergrond: wit; } } }
Demo: My eksperiment skep 'n karrousel suiwer uit HTML en CSS, met behulp van ankerposisionering om die knoppies te plaas.
Sien die Pen Carousel Pure HTML en CSS [gevurk] deur utilitybend.
Demo: 'n Webwinkel-slim slider-hermaak met attr() om agtergrondprente dinamies in die merkers in te trek.
Sien die Pen Webshop slick slider remake in CSS [gevurk] deur utilitybend. Staatsnavrae: taai ding vas? Snappy Thing Snapped? Vir 'n lang tyd het ons nie die vermoë gehad om te weet of 'n "taai ding vas is" of as 'n "snappy item gebreek is" sonder om op IntersectionObserver-hacks staat te maak. Chrome 133 het blaai-toestand-navrae ingestel, wat ons in staat stel om hierdie state verklarend navraag te doen. Deur houer-tipe: scroll-state in te stel, kan ons kinders nou styleer op grond van of hulle vas is, gebreek of oorloop. Dit is 'n massiewe "lewenskwaliteit"-verbetering waarvoor ek gretig gewag het sedert CSS-dag 2023. Dit het selfs baie ontwikkel sedert ons ook die rigting van die boekrol kan sien, pragtig! Vir 'n eenvoudige voorbeeld: ons kan uiteindelik 'n skaduwee op 'n kopskrif toepas slegs wanneer dit eintlik aan die bokant van die uitsigport kleef: .header-houer { houer-tipe: rol-toestand; posisie: taai; top: 0;
kopskrif { oorgang: boks-skadu 0.5s gemak-uit; /* Die navraag kontroleer die toestand van die houer */ @houer scroll-staat (vas: bo) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: 'n Taai kopskrif wat slegs 'n skaduwee toepas wanneer dit werklik vas is.
Sien die Pen Sticky headers met scroll-state-navraag, en kyk of die taai element vas is [gevurk] deur utilitybend.
Demo: 'n Pokémon-tema-lys wat blaai-toestand-navrae gekombineer met ankerposisionering gebruik om 'n raam oor die tans geknipte karakter te skuif.
Sien die Pen Scroll-staat-navraag om te kyk watter item met CSS, Pokémon-weergawe [gevurk] deur utilitybend geknip word. Geoptimaliseerde ergonomie: logika in CSS Die "Geoptimaliseerde Ergonomie"-afdeling van CSS Wrapped beklemtoon kenmerke wat ons werkvloei meer intuïtief maak. Drie kenmerke staan uit as transformerend vir hoe ons logika skryf:
if() StatementsOns kry uiteindelik voorwaardes in CSS. Die if()-funksie tree op soos 'n drieledige operateur vir stylblaaie, wat ons toelaat om waardes toe te pas op grond van media-, ondersteunings- of stylnavrae inlyn. Dit verminder die behoefte aan breedvoerige @media-blokke vir enkele eiendomsveranderinge. @funksiefunksiesOns kan uiteindelik 'n bietjie logika na 'n ander plek skuif, wat lei tot 'n paar skoner lêers, 'n werklike lewenskwaliteit-kenmerk. sibling-index() en sibling-count()Hierdie boomtelfunksies los die kwessie van verbysterende animasies of stileringitems op gebaseer op lysgrootte op. Soos ek in Stilering van broers en susters met CSS verken het, was nog nooit so maklik nie, dit skakel die behoefte uit om persoonlike eienskappe (soos --index: 1) in ons HTML hard te kodeer.
Voorbeeld: Berekening van uitlegte Ons kan nou bondige wiskundige formules skryf. Byvoorbeeld, dit word triviaal om 'n animasie vir kaarte wat die skerm binnekom te laat wankel: .card-houer > * { animasie: onthul 0.6s gemak-uit vorentoe; /* Nie meer handleiding --indeks veranderlikes nie! */ animasie-vertraging: calc(broer-indeks() * 0.1s); }
Ek het selfs geëksperimenteer met die gebruik van hierdie funksies saam met trigonometrie om items in 'n perfekte sirkel te plaas sonder enige JavaScript.
Demo: Verstommende kaartanimasies dinamies.
Sien die Pen Stagger-kaarte met behulp van sibling-index() [gevurk] deur utilitybend.
Demo: Plaas items in 'n perfekte sirkel met behulp van sibling-index, sibling-count, en die nuwe CSS @function-funksie.
Sien die Pen Die sirkel met behulp van sibling-indeks, sibling-telling en funksies [gevurk] deur utilitybend. My CSS-taaklys: Kenmerke wat ek nie kan wag om te probeer nie Terwyl ek besig was om keuses en oorgange te beeldhou, is die "CSS Wrapped 2025"-verslag propvol ander lekkernye wat ek nog nie die kans gehad het om in CodePen aan te blaas nie. Hierdie is hoog op my lys vir my volgende eksperimente: Geankerde houernavrae Ek het CSS Anchor Positioning vir die knoppies in my karrousel-demo gebruik, maar "CSS Wrapped" beklemtoon 'nevolusie hiervan: Anchored Container Queries. Dit los 'n probleem op wat ons almal met nutswenke gehad het: as die blaaier die nutswenk van bo na onder omdraai as gevolg van spasiebeperkings, bly die "pyl" dikwels die verkeerde kant toe wys. Met geankerde houernavrae (@houer geanker(terugval: flip-blok)), kan ons die element styleer op grond van watter terugvalposisie die blaaier eintlik gekies het. Geneste aansig-oorgangsgroepe View Transitions was 'n rewolusie, maar hulle het 'n spesifieke trade-off gehad: hulle het die elementboom platgedruk, wat dikwels 3D-transformasies of oorloop: clip gebreek het. Ek het altyd 'n gevoel gehad dat dit iets mis, en dit is dalk net die antwoord. Deur aansig-oorgangsgroep: naaste te gebruik, kan ons uiteindelik oorgangsgroepe binne mekaar nes. Dit stel ons in staat om knipeffekte of 3D-rotasies tydens 'n oorgang te handhaaf - iets wat voorheen onmoontlik was omdat die elemente tot op die boonste vlak opgehys is. .card img { sien-oorgang-naam: foto; sien-oorgang-groep: naaste; /* Hou dit geneste! */ }
Tipografie en vorms Ten slotte, die ergonomis in my is lus om Text Box Trim te probeer, wat beloof om daardie irriterende ekstra witspasie bo en onder teksinhoud (die voorste) te verwyder om uiteindelik perfekte vertikale belyning te bereik. En vir die kreatiewe kant, maak hoekvorm en die shape()-funksie nie-reghoekige uitlegte oop, wat voorsiening maak vir "vierkante" en komplekse paaie wat op CSS-veranderlikes reageer. Dit gesê, ek kan nie wag om 'n ontwerp vol squircles te hê nie! 'n Hoopvolle toekoms Ons is getuie van 'n wêreld waar CSS in staat word om logika, toestand en komplekse interaksies te hanteer wat voorheen aan JavaScript behoort het. Kenmerke soos moveBefore (behou DOM-toestand vir iframes/video's) en attr() (gebruik van tipes buite stringe vir kleure en roosters) versterk hierdie werklikheid verder. Alhoewel sommige van hierdie kenmerke tans eksperimenteel of spesifiek vir Chrome is, is die momentum onmiskenbaar. Ons moet hoop op volgehoue ondersteuning oor alle blaaiers deur inisiatiewe soos Interop om te verseker dat hierdie vermoëns die basislyn word. Dit gesê, om blaaier-enjins te hê, is net so belangrik as om al hierdie wonderlike kenmerke in "Chrome first" te hê. Hierdie nuwe kenmerke moet bespreek, mee gepeuter en getoets word voordat dit ooit in blaaiers beland word. Dit is 'n fantastiese oomblik om in CSS te kom. Ons stileer nie meer net dokumente nie; ons maak dinamiese, ergonomiese en robuuste toepassings met 'n inheemse gereedskapstel wat kragtiger as ooit is. Kom ons gaan aan die gang met hierdie nuwe era en versprei die woord. Dit is CSS Wrapped!
