Če bi razvoj CSS razdelil v kategorije, smo daleč presegli dneve, ko smo preprosto zahtevali radij obrobe, da bi se počutili, kot da živimo v prihodnosti. Trenutno živimo v trenutku, ko nam platforma predaja orodja, ki ne spreminjajo le vizualne plasti, ampak temeljito na novo definirajo, kako oblikujemo vmesnike. Mislil sem, da število funkcij, napovedanih leta 2024, ni mogoče preseči. Še nikoli se nisem tako srečno zmotil.
»CSS Wrapped 2025« skupine Chrome ni le seznam funkcij; je manifest za dinamičen, domači splet. Kot nekdo, ki je nekaj let dokumentiral te evolucije – od definiranja obdobij »CSS5« do zapletenosti sodobnih orodij za postavitev – se mi zdi, da na zaključek letošnjega leta gledam z velikim občutkom navdušenja. Opažamo premik k »optimizirani ergonomiji« in »interakcijam naslednje generacije«, ki nam omogočata, da se nehamo boriti s kodo in začnemo oblikovati vmesnike v njihovem naravnem stanju.
V tem članku lahko najdete obsežen pogled na izjemne funkcije iz Chromovega poročila, gledane skozi optiko mojih nedavnih poskusov in upov za prihodnost platforme.
Revolucija komponent: končno, izvorna prilagodljiva izbira
Dolga leta smo se za oblikovanje spustnih menijev zanašali na obsežne knjižnice JavaScript, kar je "desetletja star problem", ki ga je platforma končno rešila. Kot sem podrobno opisal v svojem globokem potopu v zgodovino prilagodljivega izbora (in sorodnih člankov), je bila to dolga pot, ki je vključevala odprti uporabniški vmesnik, imena bikeshedding, kot sta
Fantastičen dodatek, ki omogoča bogato vsebino znotraj možnosti, kot so slike ali zastave, je zelo zabaven. Dandanes lahko ustvarimo vse vrste izbir:
Predstavitev: Ustvaril sem predstavitev Poké-pustolovščine, ki prikazuje, kako lahko novi element
Oglejte si Prilagodljiv izbor Pen A s slikami znotraj možnosti in izbrano vsebino [razcepljeno] s strani utilitybend.
Demo: Celovit pogled na oblikovanje izbranih s samo psevdoelementi.
Oglejte si prilagodljivo izbiro peresa A s samo psevdoelementi [razvejano] s strani utilitybend.
Demo: ali pa s to predstavitvijo izbire menija z optgroups naredite korak višje.
Oglejte si pero. Dejanski izbirni meni z optgroups [forked] s strani utilitybend. Že sama ta funkcija nakazuje ogromen premik v tem, kako bomo gradili obrazce, zmanjšali odvisnosti in tehnični dolg. Označevalci drsenja in smrt vrtiljaka JavaScript Ustvarjanje vrtiljakov je bilo v preteklosti točka trenja med razvijalci in strankami. Stranke jih obožujejo, razvijalci se bojijo JavaScripta, ki je potreben, da bi bili dostopni in zmogljivi. Prihod psevdoelementov ::scroll-marker in ::scroll-button() to dinamiko popolnoma spremeni. Te funkcije nam omogočajo, da ustvarimo navigacijske pike in gumbe za pomikanje izključno s CSS, ki so izvorno povezani s vsebnikom za pomikanje. Kot sem napisal na svojem blogu, je bil to diapozitiv Ljubezen na prvi. Možnost ustvarjanja popolnoma funkcionalnega, dostopnega drsnika brez ene same vrstice JavaScripta ni le priročna; to je zmaga za uspešnost. V zvezi s to funkcijo obstaja nekaj pomislekov glede dostopnosti, in čeprav so veljavni, morda obstaja način, da razvijalci omogočimo, da deluje. Dobra stvar je, da vse te spremembe uporabniškega vmesnika veliko olajšajo kot manipulacija DOM po meri in vlečenje oznak aria, vendar sem se oddaljil ... Zdaj lahko samodejno združimo oznake z uporabo scroll-marker-group in oblikujemo gumbe z uporabo sidrnega pozicioniranja, da jih postavimo točno tam, kjer želimo.
.carousel { overflow-x: samodejno; scroll-marker-group: po; /* Ustvari vsebnik za pike */
/* Ustvari gumbe */ &::scroll-button(inline-end),&::scroll-button(inline-start) { vsebina: " "; položaj: absolutno; /* Uporabi položaj sidra, da jih središ */ položaj-sidro: --vrtiljak; zgoraj: sidro (sredina); }
/* Ustvari oznake na podrejenih */ div { &::scroll-marker { vsebina: " "; širina: 24px; polmer obrobe: 50 %; kazalec: kazalec; } /* Označi aktivni marker */ &::scroll-marker:target-current { ozadje: belo; } } }
Predstavitev: moj poskus ustvarjanja vrtiljaka izključno iz HTML in CSS z uporabo sidrnega pozicioniranja za postavitev gumbov.
Glejte Pen Carousel Pure HTML in CSS [forked] by utilitybend.
Predstavitev: predelava drsnika v spletni trgovini z uporabo attr() za dinamično vlečenje slik ozadja v oznake.
Oglejte si predelavo gladkega drsnika Pen Webshop v CSS [forked], ki jo je izvedel utilitybend. Poizvedbe o stanju: Sticky Thing Stuck? Snappy Thing Se je zlomilo? Dolgo časa nismo mogli vedeti, ali se je »lepljiva stvar zataknila« ali če je »hitri element zaskočil«, ne da bi se zanašali na vdore IntersectionObserver. Chrome 133 je uvedel poizvedbe po stanju drsenja, kar nam omogoča deklarativno poizvedovanje po teh stanjih. Z nastavitvijo container-type: scroll-state lahko zdaj oblikujemo podrejene glede na to, ali so obtičali, zaskočili ali prelili. To je ogromna izboljšava »kakovosti življenja«, ki sem jo nestrpno čakal od dneva CSS 2023. Zelo se je celo razvil, saj lahko vidimo tudi smer drsenja, čudovito! Za preprost primer: končno lahko uporabimo senco na glavo samo, ko se dejansko drži vrha vidnega polja: .header-container { vrsta vsebnika: drsno stanje; položaj: lepljiv; vrh: 0;
glava { prehod: box-shadow 0,5s umiritev; /* Poizvedba preveri stanje vsebnika */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Lepljiva glava, ki uporabi senco samo, ko je dejansko obtičala.
Oglejte si glave Pen Sticky s poizvedbo o stanju drsenja, preverjanje, ali je lepljivi element zataknjen [razcepljen] s pomočjo utilitybend.
Demo: Seznam na temo Pokémon, ki uporablja poizvedbe o stanju drsenja v kombinaciji s pozicioniranjem sidra za premikanje okvirja nad trenutno posnetim znakom.
Oglejte si poizvedbo Pen Scroll-state, da preverite, kateri element je zaskočil s CSS, različico Pokemon [forked] s strani utilitybend. Optimizirana ergonomija: logika v CSS Razdelek »Optimizirana ergonomija« v CSS Wrapped poudarja funkcije, zaradi katerih so naši delovni tokovi bolj intuitivni. Tri lastnosti izstopajo kot transformativne za to, kako pišemo logiko:
Izjave if() Končno dobivamo pogojnike v CSS. Funkcija if() deluje kot ternarni operator za tabele slogov, kar nam omogoča uporabo vrednosti na podlagi medijev, podpore ali slogovnih poizvedb v vrstici. To zmanjša potrebo po podrobnih blokih @media za posamezne spremembe lastnosti. Funkcije @funkcije Končno lahko premaknemo nekaj logike na drugo mesto, kar ima za posledico nekaj čistejših datotek, funkcijo resnične kakovosti življenja. sibling-index() in sibling-count()Ti funkciji drevesnega štetja rešujeta težavo osupljivih animacij ali oblikovanja elementov glede na velikost seznama. Kot sem raziskoval v poglavju Oblikovanje bratov in sester s CSS še nikoli ni bilo lažje, to odpravlja potrebo po trdem kodiranju lastnosti po meri (kot je --index: 1) v našem HTML-ju.
Primer: Izračun postavitev Zdaj lahko pišemo jedrnate matematične formule. Na primer, zaporedna animacija za karte, ki vstopajo na zaslon, postane trivialna: .card-container > * { animacija: odkrivanje 0,6s popuščanja naprej; /* Nič več ročnih spremenljivk --index! */ zakasnitev animacije: calc(sibling-index() * 0,1 s); }
Eksperimentiral sem celo z uporabo teh funkcij skupaj s trigonometrijo za umeščanje elementov v popoln krog brez JavaScripta.
Demo: dinamično premikanje animacij kartic.
Oglejte si kartice Pen Stagger z uporabo sibling-index() [forked] s strani utilitybend.
Predstavitev: Postavljanje elementov v popoln krog z uporabo sibling-index, sibling-count in nove funkcije CSS @function.
Oglejte si Pen The Circle z uporabo sibling-index, sibling-count in funkcij [razcepljenih] z utilitybend. Moj seznam opravil CSS: Funkcije, ki jih komaj čakam, da preizkusim Medtem ko sem bil zaposlen z oblikovanjem izbir in prehodov, je poročilo »CSS Wrapped 2025« polno drugih dobrot, ki jih še nisem imel priložnosti sprožiti v CodePen. Ti so visoko na mojem seznamu za moje naslednje poskuse: Poizvedbe zasidranega vsebnika Za gumbe v svoji predstavitvi vrtiljaka sem uporabil CSS Anchor Positioning, vendar »CSS Wrapped« poudarjarazvoj tega: zasidrane vsebniške poizvedbe. To rešuje težavo, ki smo jo vsi imeli z namigi orodij: če brskalnik obrne namige orodja od zgoraj navzdol zaradi prostorskih omejitev, »puščica« pogosto ostane usmerjena v napačno smer. S poizvedbami zasidranega vsebnika (@container anchored(fallback: flip-block)) lahko element oblikujemo glede na to, kateri nadomestni položaj je brskalnik dejansko izbral. Prehodne skupine ugnezdenih pogledov Prehodi pogleda so bili revolucija, vendar so prišli s posebnim kompromisom: sploščili so drevo elementov, ki je pogosto pokvarilo 3D transformacije ali overflow: clip. Vedno sem imel občutek, da mu nekaj manjka, in to bi lahko bil le odgovor. Z uporabo view-transition-group: nearest lahko končno ugnezdimo prehodne skupine eno v drugo. To nam omogoča, da ohranimo učinke izrezovanja ali 3D rotacije med prehodom - nekaj, kar je bilo prej nemogoče, ker so bili elementi dvignjeni na najvišjo raven. .card img { pogled-prehod-ime: fotografija; view-transition-group: najbližje; /* Naj bo ugnezdeno! */ }
Tipografija in oblike Nazadnje, ergonomist v meni hrepeni, da bi preizkusil Text Box Trim, ki obljublja, da bo odstranil nadležen dodaten prazen prostor nad in pod vsebino besedila (glavni), da bi končno dosegel popolno navpično poravnavo. Kar zadeva ustvarjalno plat, kotna oblika in funkcija shape() odpirata nepravokotne postavitve, kar omogoča "kvadratke" in kompleksne poti, ki se odzivajo na spremenljivke CSS. Kot rečeno, komaj čakam, da imam dizajn, poln vijugic! Upanja polna prihodnost Priča smo svetu, v katerem postaja CSS sposoben obravnavati logiko, stanje in kompleksne interakcije, ki so prej pripadale JavaScriptu. Funkcije, kot sta moveBefore (ohranjanje stanja DOM za iframe/videoposnetke) in attr() (uporaba vrst zunaj nizov za barve in mreže), dodatno utrjujejo to realnost. Medtem ko so nekatere od teh funkcij trenutno poskusne ali specifične za Chrome, je zagon nesporen. Upati moramo na nadaljnjo podporo v vseh brskalnikih prek pobud, kot je Interop, da zagotovimo, da te zmogljivosti postanejo osnova. Kot rečeno, imeti motorje brskalnika je enako pomembno kot imeti vse te izjemne funkcije v »Chrome first«. O teh novih funkcijah je treba razpravljati, jih predelati in preizkusiti, preden sploh pristanejo v brskalnikih. To je fantastičen trenutek za vstop v CSS. Ne oblikujemo več le dokumentov; izdelujemo dinamične, ergonomske in robustne aplikacije z izvirnim kompletom orodij, ki je zmogljivejši kot kdaj koli prej. Začnimo s to novo dobo in razširimo besedo. To je CSS Wrapped!
