Ako bih podijelio evoluciju CSS-a u kategorije, otišli smo daleko dalje od dana kada smo jednostavno tražili radijus granice da bismo se osjećali kao da živimo u budućnosti. Trenutno živimo u trenutku kada nam platforma daje alate koji ne samo da podešavaju vizuelni sloj, već suštinski redefinišu način na koji arhitekturu interfejsa. Mislio sam da se broj funkcija najavljenih 2024. ne može nadmašiti. Nikada nisam tako srećno pogrešio.
"CSS Wrapped 2025" Chrome tima nije samo lista funkcija; to je manifest za dinamičan, izvorni web. Kao neko ko je proveo nekoliko godina dokumentujući ove evolucije - od definisanja "CSS5" era do zamršenosti modernih uslužnih programa za izgled - smatram da gledam ovogodišnji zaključak sa ogromnim osećajem uzbuđenja. Vidimo pomak ka „optimizovanoj ergonomiji“ i „interakcijama sledeće generacije“ koje nam omogućavaju da prestanemo da se borimo protiv koda i počnemo da oblikujemo interfejse u njihovom prirodnom stanju.
U ovom članku možete pronaći sveobuhvatan pogled na istaknute karakteristike iz Chromeovog izvještaja, sagledan kroz sočivo mojih nedavnih eksperimenata i nada za budućnost platforme.
Revolucija komponenti: Konačno, izvorni prilagodljivi odabir
Godinama smo se oslanjali na teške JavaScript biblioteke za stiliziranje padajućih menija, „decenijski star problem“ koji je platforma konačno riješila. Kao što sam detaljno opisao u svom dubokom poniranju u historiju prilagodljivog odabira (i srodnih članaka), ovo je bio dug put koji je uključivao Open UI, bikeshedding imena kao što su
Fantastičan dodatak koji omogućava bogat sadržaj unutar opcija, kao što su slike ili zastavice, vrlo je zabavan. Danas možemo kreirati sve vrste odabira:
Demo: Napravio sam Poké-adventure demo koji pokazuje kako novi element
Pogledajte Pen A prilagodljiv odabir sa slikama unutar opcija i odabranim sadržajem [račvanim] pomoću utilitybenda.
Demo: Sveobuhvatan pogled na stiliziranje odabira samo sa pseudo-elementima.
Pogledajte Pen A prilagodljiv odabir sa samo pseudo-elementima [račvanim] pomoću utilitybenda.
Demo: Ili ga možete poboljšati pomoću ove demonstracije odabira izbornika koristeći optgroups.
Pogledajte olovku. Stvarni Izborni meni sa optgrupama [račvanim] pomoću utilitybenda. Sama ova karakteristika signalizira ogromnu promjenu u načinu na koji ćemo graditi forme, smanjujući ovisnosti i tehnički dug. Markeri za pomicanje i smrt JavaScript vrtuljke Stvaranje vrtuljki je istorijski bila tačka trvenja između programera i klijenata. Klijenti ih vole, programeri se plaše JavaScripta potrebnog da bi bili dostupni i učinkoviti. Dolazak pseudoelemenata ::scroll-marker i ::scroll-button() u potpunosti mijenja ovu dinamiku. Ove karakteristike nam omogućavaju da kreiramo navigacione tačke i dugmad za skrolovanje isključivo pomoću CSS-a, koji su izvorno povezani sa kontejnerom za pomeranje. Kao što sam napisao na svom blogu, ovo je bila Ljubav na prvi slajd. Mogućnost kreiranja potpuno funkcionalnog, pristupačnog klizača bez ijednog reda JavaScripta nije samo zgodna; to je trijumf za performanse. Postoje neki problemi oko pristupačnosti oko ove funkcije, i iako su one važeće, možda postoji način da mi programeri to učinimo da radi. Dobra stvar je što sve ove promjene korisničkog sučelja to čine mnogo lakšim od prilagođene DOM manipulacije i povlačenja aria tagova, ali skrećem pažnju... Sada možemo automatski grupirati markere koristeći Scroll-marker-group i stilizirati dugmad koristeći sidreno pozicioniranje kako bismo ih postavili tačno tamo gdje želimo.
.carousel { overflow-x: auto; skrol-marker-grupa: poslije; /* Kreira kontejner za tačke */
/* Kreirajte dugmad */ &::scroll-dugme (inline-end),&::scroll-button(inline-start) { sadržaj: " "; pozicija: apsolutna; /* Koristite pozicioniranje sidra da ih centrirate */ položaj-sidro: --vrtuljak; vrh: sidro (centar); }
/* Kreirajte markere na djeci */ div { &::scroll-marker { sadržaj: " "; širina: 24px; radijus granice: 50%; kursor: pokazivač; } /* Označite aktivni marker */ &::scroll-marker:target-current { pozadina: bijela; } } }
Demo: Moj eksperiment kreiranja vrtuljka isključivo od HTML-a i CSS-a, koristeći pozicioniranje sidra za postavljanje dugmadi.
Pogledajte Pen Carousel Pure HTML i CSS [račvane] od utilitybenda.
Demo: Remake webshop klizača koji koristi attr() za dinamičko povlačenje pozadinskih slika u markere.
Pogledajte remake klizača Pen Webshop u CSS-u [forked] od strane utilitybenda. Državni upiti: Sticky Thing Stuck? Snappy Thing Snapped? Dugo vremena nam je nedostajala mogućnost da saznamo da li je “ljepljiva stvar zaglavljena” ili je “štampana stavka pukla” bez oslanjanja na IntersectionObserver hakove. Chrome 133 je uveo upite o stanju pomicanja, omogućavajući nam da deklarativno postavljamo upite za ova stanja. Postavljanjem tipa kontejnera: stanje pomicanja, sada možemo stilizirati djecu na osnovu toga da li su zaglavljeni, prekinuti ili preliveni. Ovo je ogromno poboljšanje „kvaliteta života“ koje sam željno čekao od CSS Dana 2023. Čak je i dosta evoluirao jer možemo vidjeti i smjer skrolovanja, divno! Za jednostavan primjer: konačno možemo primijeniti sjenu na zaglavlje samo kada se ono stvarno drži vrha prozora za prikaz: .header-container { tip kontejnera: stanje pomicanja; položaj: lepljiv; vrh: 0;
zaglavlje { prelaz: box-shadow 0.5s ease-out; /* Upit provjerava stanje kontejnera */ @container scroll-state(zaglavio: vrh) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Lepljivo zaglavlje koje primenjuje senku samo kada je stvarno zaglavljeno.
Pogledajte Pen Sticky zaglavlja sa upitom o stanju pomicanja, provjeravajući da li je ljepljivi element zaglavio [račvano] pomoću utilitybenda.
Demo: Lista na temu Pokémona koja koristi upite o stanju pomicanja u kombinaciji sa pozicioniranjem sidra za pomicanje okvira preko trenutno slomljenog karaktera.
Pogledajte upit o stanju pomicanja olovke da provjerite koja je stavka uhvaćena CSS-om, Pokemon verzija [račvana] pomoću utilitybenda. Optimizirana ergonomija: logika u CSS-u Odjeljak „Optimizirana ergonomija“ u CSS Wrapped naglašava funkcije koje naše radne tokove čine intuitivnijim. Tri karakteristike se ističu kao transformativne za način na koji pišemo logiku:
if() IzjaveNapokon dobijamo uslovne u CSS-u. Funkcija if() djeluje kao ternarni operator za stilove, omogućavajući nam da primijenimo vrijednosti zasnovane na medijima, podršci ili upitima o stilu. Ovo smanjuje potrebu za opširnim @media blokovima za pojedinačne promjene svojstva. Funkcije @funkcije Konačno možemo premjestiti dio logike na drugo mjesto, što će rezultirati nekim čišćim datotekama, značajkom stvarnog kvaliteta života. sibling-index() i sibling-count()Ove funkcije brojanja stabala rješavaju problem zapanjujućih animacija ili stilskih stavki na osnovu veličine liste. Kao što sam istražio u Styling siblings sa CSS-om nikada nije bilo lakše, ovo eliminira potrebu za tvrdim kodiranjem prilagođenih svojstava (kao što je --index: 1) u našem HTML-u.
Primjer: Izračunavanje rasporeda Sada možemo pisati sažete matematičke formule. Na primjer, pomicanje animacije za kartice koje ulaze na ekran postaje trivijalno: .card-container > * { animacija: otkrivanje 0.6s ease-out naprijed; /* Nema više ručnih --index varijabli! */ kašnjenje animacije: calc(sibling-index() * 0.1s); }
Čak sam eksperimentirao s korištenjem ovih funkcija zajedno s trigonometrijom da postavim stavke u savršeni krug bez JavaScripta.
Demo: dinamično zapanjujuće animacije kartica.
Pogledajte kartice Pen Stagger koristeći sibling-index() [forked] od utilitybenda.
Demo: Postavljanje stavki u savršeni krug pomoću sibling-index, sibling-count i nove CSS funkcije @function.
Pogledajte olovku Krug koji koristi sibling-index, sibling-count i funkcije [račvane] pomoću utilitybenda. Moja CSS lista obaveza: funkcije koje jedva čekam da isprobam Dok sam bio zauzet oblikovanjem odabira i prijelaza, izvještaj “CSS Wrapped 2025” je prepun drugih dobrota koje još nisam imao priliku pokrenuti u CodePen-u. Ovo su visoko na mojoj listi za moje sljedeće eksperimente: Usidreni upiti kontejnera Koristio sam CSS Anchor Positioning za dugmad u mom demonstraciji vrteške, ali "CSS Wrapped" ističeevolucija ovoga: Usidreni upiti kontejnera. Ovo rješava problem koji smo svi imali s opisima alata: ako preglednik okreće opis alata odozgo prema dolje zbog ograničenja prostora, "strelica" često ostaje usmjerena na pogrešan način. Sa usidrenim upitima kontejnera (@container anchored(fallback: flip-block)), možemo stilizirati element na osnovu rezervne pozicije koju je pretraživač zapravo izabrao. Ugniježđene grupe prijelaza View Transitions su bili revolucija, ali su došli sa specifičnim kompromisom: spljoštili su stablo elemenata, što je često razbijalo 3D transformacije ili prelivanje: clip. Uvijek sam imao osjećaj da nešto nedostaje, a ovo bi mogao biti samo odgovor. Koristeći view-transition-group: closest, konačno možemo ugnijezditi prelazne grupe jednu u drugu. Ovo nam omogućava da zadržimo efekte klipinga ili 3D rotacije tokom tranzicije – nešto što je ranije bilo nemoguće jer su elementi bili podignuti na najviši nivo. .card img { view-transition-name: photo; view-transition-group: najbliža; /* Neka bude ugniježđeno! */ }
Tipografija i oblici Konačno, ergonomista u meni žudi da isproba Text Box Trim, koji obećava da će ukloniti taj dosadni dodatni razmak iznad i ispod tekstualnog sadržaja (vodeći) kako bi se konačno postiglo savršeno vertikalno poravnanje. A za kreativnu stranu, corner-shape i shape() funkcija otvaraju nepravougaone rasporede, omogućavajući "kvadrikule" i složene putanje koje odgovaraju na CSS varijable. Uzimajući to u obzir, jedva čekam da imam dizajn pun šarenica! A Hopeful Future Svjedoci smo svijeta u kojem CSS postaje sposoban za rukovanje logikom, stanjem i složenim interakcijama koje su ranije pripadale JavaScriptu. Funkcije poput moveBefore (očuvanje DOM stanja za iframe/video) i attr() (koristeći tipove izvan nizova za boje i mreže) dodatno učvršćuju ovu realnost. Iako su neke od ovih funkcija trenutno eksperimentalne ili specifične za Chrome, zamah je neosporan. Moramo se nadati kontinuiranoj podršci u svim pretraživačima kroz inicijative kao što je Interop kako bismo osigurali da ove mogućnosti postanu osnova. S obzirom na to, posjedovanje motora pretraživača jednako je važno kao i posjedovanje svih ovih sjajnih funkcija u "Chrome-u na prvom mjestu". O ovim novim funkcijama treba razgovarati, popravljati ih i testirati prije nego što se ikada ubace u pretraživače. To je fantastičan trenutak za ulazak u CSS. Mi više nismo samo stilizirani dokumenti; izrađujemo dinamične, ergonomske i robusne aplikacije s izvornim alatom koji je moćniji nego ikad. Krenimo s ovom novom erom i širimo vijest. Ovo je CSS omotan!
