Ja es dalītu CSS evolūcijas kategorijās, mēs esam pārsnieguši laiku, kad mēs vienkārši prasījām robežas rādiusu, lai justos kā dzīvotu nākotnē. Pašlaik mēs dzīvojam brīdī, kad platforma mums piedāvā rīkus, kas ne tikai uzlabo vizuālo slāni, bet arī būtiski no jauna definē to, kā mēs veidojam saskarnes. Man šķita, ka 2024. gadā paziņoto funkciju skaitu nevar pārsniegt. Es nekad neesmu tik laimīgi kļūdījies.
Chrome komandas “CSS Wrapped 2025” nav tikai funkciju saraksts; tas ir manifests dinamiskam, vietējam tīmeklim. Kā cilvēks, kurš ir pavadījis pāris gadus, dokumentējot šīs evolūcijas — no “CSS5” laikmetu noteikšanas līdz moderno izkārtojuma utilītu sarežģījumiem, es uzskatu, ka skatos uz šī gada noslēgumu ar milzīgu sajūsmu. Mēs redzam pāreju uz “Optimizētu ergonomiku” un “Nākamās paaudzes mijiedarbību”, kas ļauj mums pārtraukt cīņu pret kodu un sākt veidot saskarnes to dabiskajā stāvoklī.
Šajā rakstā varat atrast visaptverošu ieskatu Chrome pārskatā ietvertajām izcilajām funkcijām, kas aplūkotas, izmantojot manus nesenos eksperimentus un cerības uz platformas nākotni.
Komponentu revolūcija: visbeidzot, vietējā pielāgojama izvēle
Gadiem ilgi mēs esam paļāvušies uz smagām JavaScript bibliotēkām, lai veidotu nolaižamās izvēlnes — šī ir “gadus desmitiem veca problēma”, kuru platforma beidzot ir atrisinājusi. Kā es detalizēti iedziļinājos pielāgojamās atlases (un saistīto rakstu) vēsturē, šis ir bijis garš ceļš, kas ietvēra atvērto lietotāja interfeisu, nosaukumiem, piemēram,
Fantastiskais papildinājums, kas ļauj iekļaut opcijās bagātīgu saturu, piemēram, attēlus vai karogus, ir ļoti jautrs. Mūsdienās varam izveidot visdažādākās izlases:
Demonstrācija: es izveidoju Poké-adventure demonstrāciju, kurā parādīts, kā jaunais elements
Skatiet pildspalvu Pielāgojama atlase ar attēliem opciju iekšpusē un atlasīto saturu [forked] ar utilitybend.
Demonstrācija: visaptverošs ieskats atlases veidošanā, izmantojot tikai pseidoelementus.
Skatiet pildspalvu Pielāgojama atlase, kurā ir tikai pseidoelementi [forked] ar utilitybend.
Demonstrācija: vai arī varat to uzlabot ar šo izvēlnes atlases demonstrāciju, izmantojot opciju grupas.
Skatiet pildspalvu Faktiskā atlases izvēlne ar optiskām grupām [forked] by utilitybend. Šī funkcija vien liecina par masveida izmaiņām veidlapu veidošanā, samazinot atkarības un tehniskos parādus. Ritināšanas marķieri un JavaScript karuseļa nāve Karuseļu izveide vēsturiski ir bijusi berzes punkts starp izstrādātājiem un klientiem. Klienti tos mīl, izstrādātāji baidās no JavaScript, kas nepieciešams, lai padarītu tos pieejamus un veiktspējīgus. ::scroll-marker un ::scroll-button() pseidoelementu ienākšana pilnībā maina šo dinamiku. Šīs funkcijas ļauj mums izveidot navigācijas punktus un ritināšanas pogas, izmantojot tikai CSS, kas ir sākotnēji saistītas ar ritināšanas konteineru. Kā jau rakstīju savā emuārā, šis bija Mīlestība pirmajā slaidā. Iespēja izveidot pilnībā funkcionālu, pieejamu slīdni bez vienas JavaScript rindiņas ir ne tikai ērta; tas ir snieguma triumfs. Saistībā ar šo funkciju pastāv zināmas pieejamības problēmas, un, lai gan tās ir derīgas, mēs, izstrādātāji, varam nodrošināt tā darbību. Labā lieta ir tā, ka visas šīs lietotāja saskarnes izmaiņas padara to daudz vienkāršāku nekā pielāgotas DOM manipulācijas un aria tagu vilkšana, taču es novirzos… Tagad mēs varam automātiski grupēt marķierus, izmantojot ritināšanas marķieru grupu, un veidot pogas, izmantojot enkura pozicionēšanu, lai novietotu tos tieši vēlamajā vietā.
.carousel { overflow-x: auto; scroll-marker-group: after; /* Izveido konteineru punktiem */
/* Izveidojiet pogas */ &::ritināšanas poga (iekļauts beigas),&::scroll-button(inline-start) { saturs: " "; pozīcija: absolūta; /* Izmantojiet enkura pozicionēšanu, lai tos centrētu */ pozīcija-enkurs: --karuselis; augšā: enkurs(centrs); }
/* Izveidojiet marķierus uz bērniem */ div { &::scroll-marker { saturs: " "; platums: 24 pikseļi; apmales rādiuss: 50%; kursors: rādītājs; } /* Iezīmējiet aktīvo marķieri */ &::scroll-marker:target-current { fons: balts; } } }
Demonstrācija: mans eksperiments, izveidojot karuseli tikai no HTML un CSS, izmantojot enkura pozicionēšanu, lai novietotu pogas.
Skatiet Pen Carousel Pure HTML un CSS [forked] ar utilitybend.
Demonstrācija: tīmekļa veikala gluds slīdņa pārtaisījums, izmantojot attr(), lai dinamiski ievilktu fona attēlus marķieros.
Skatiet Pen Webshop gludā slīdņa pārtaisīšanu CSS [forked] by utilitybend. Valsts vaicājumi: lipīga lieta iestrēgusi? Snappy Thing Snapped? Ilgu laiku mums nav bijis iespēju zināt, vai “pielipusi lieta ir iestrēgusi” vai “uzķerta lieta”, nepaļaujoties uz IntersectionObserver uzlaušanu. Pārlūkā Chrome 133 tika ieviesti ritināšanas stāvokļa vaicājumi, ļaujot mums vaicāt par šiem stāvokļiem deklaratīvi. Iestatot konteinera veidu: ritināšanas statuss, mēs tagad varam veidot bērnu stilu, pamatojoties uz to, vai tie ir iestrēguši, salauzti vai pārpildīti. Šis ir milzīgs dzīves kvalitātes uzlabojums, ko es ar nepacietību gaidīju kopš 2023. gada CSS dienas. Tas ir pat ļoti attīstījies, kopš mēs varam redzēt arī ritināšanas virzienu, jauki! Vienkāršam piemēram: mēs beidzot varam lietot ēnu galvenē tikai tad, ja tā faktiski pielīp skata loga augšdaļai: .header-container { konteinera veids: ritināšanas stāvoklis; pozīcija: lipīga; augšā: 0;
galvene { pāreja: box-shadow 0,5s easy-out; /* Vaicājums pārbauda konteinera stāvokli */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demonstrācija: lipīga galvene, kas izmanto ēnu tikai tad, kad tā faktiski ir iestrēdzis.
Skatiet Pen Sticky galvenes ar ritināšanas stāvokļa vaicājumu, pārbaudot, vai lipīgais elements nav iestrēdzis [atzarots] ar utilitybend.
Demonstrācija: Pokémon tēmas saraksts, kurā tiek izmantoti ritināšanas stāvokļa vaicājumi apvienojumā ar enkura pozicionēšanu, lai pārvietotu rāmi virs pašlaik uzņemtās rakstzīmes.
Skatiet pildspalvas ritināšanas stāvokļa vaicājumu, lai pārbaudītu, kurš vienums ir nofiksēts, izmantojot CSS, Pokemon versiju [forked] ar utilitybend. Optimizēta ergonomika: loģika CSS CSS Wrapped sadaļā “Optimizētā ergonomika” ir izceltas funkcijas, kas padara mūsu darbplūsmas intuitīvākas. Trīs funkcijas izceļas kā pārveidojošas loģikas rakstīšanai:
if() paziņojumi Mēs beidzot saņemam nosacījumus CSS. Funkcija if() darbojas kā trīskāršs stila lapu operators, ļaujot mums lietot vērtības, kuru pamatā ir multivides, atbalsta vai stila vaicājumi. Tas samazina nepieciešamību pēc detalizētiem @media blokiem viena rekvizīta maiņai. @function functionsMēs beidzot varam pārvietot daļu loģikas uz citu vietu, tādējādi radot dažus tīrākus failus un reālu dzīves kvalitātes funkciju. sibling-index() un sibling-count()Šīs koku skaitīšanas funkcijas atrisina satriecošu animāciju vai elementu stilu, pamatojoties uz saraksta lielumu, problēmu. Kā es izpētīju rakstā brāļu un māsu veidošana, izmantojot CSS, tas nekad nav bijis vienkāršāks, tāpēc mūsu HTML nav jākodē pielāgotie rekvizīti (piemēram, --index: 1).
Piemērs: izkārtojumu aprēķināšana Tagad mēs varam uzrakstīt kodolīgas matemātiskas formulas. Piemēram, animācijas sakārtošana kartītēm, kas nonāk ekrānā, kļūst triviāla: .card-container > * { animācija: atklāj 0,6 s atvieglojumus uz priekšu; /* Vairs nav manuālu --index mainīgo! */ animācijas aizkave: calc(sibling-index() * 0.1s); }
Es pat eksperimentēju ar šo funkciju izmantošanu kopā ar trigonometriju, lai vienumus novietotu ideālā lokā bez JavaScript.
Demonstrācija: dinamiski satriecošas kartīšu animācijas.
Skatiet Pen Stagger kartes, izmantojot sibling-index() [forked] by utilitybend.
Demonstrācija: vienumu ievietošana ideālā lokā, izmantojot sibling-index, sibling-count un jauno CSS @function funkciju.
Skatiet pildspalvu Aplis, izmantojot sibling-index, sibling-count un funkcijas [forked] by utilitybend. Mans CSS uzdevumu saraksts: funkcijas, kuras nevaru vien sagaidīt, kad izmēģināšu Kamēr esmu aizņemts ar atlases un pāreju veidošanu, pārskatā “CSS Wrapped 2025” ir daudz citu labumu, kurus man vēl nav bijusi iespēja izmantot CodePen. Šie ir manā nākamo eksperimentu sarakstā. Noenkurotie konteineru vaicājumi Karuseļa demonstrācijas pogām izmantoju CSS enkura pozicionēšanu, bet “CSS Wrapped” izceļevolūcija: enkurotu konteineru vaicājumi. Tas atrisina problēmu, kas mums visiem ir bijusi saistībā ar rīka padomiem: ja pārlūkprogramma vietas ierobežojumu dēļ pārvērš rīka padomu no augšas uz leju, “bultiņa” bieži vien norāda uz nepareizo pusi. Izmantojot noenkurotu konteinera vaicājumus (@container anched(atkāpšanās: flip-block)), mēs varam veidot elementu, pamatojoties uz to, kuru atkāpšanās pozīciju pārlūkprogramma faktiski izvēlējās. Ligzdota skata pārejas grupas View Transitions ir bijusi revolūcija, taču tām bija īpašs kompromiss: tās saplacināja elementu koku, kas bieži vien pārtrauca 3D transformācijas vai pārplūdi: klipu. Man vienmēr bija sajūta, ka tam kaut kā pietrūkst, un tā varētu būt tikai atbilde. Izmantojot view-transition-group: vistuvāko, mēs beidzot varam ligzdot pārejas grupas viena otrai. Tas ļauj mums saglabāt apgriešanas efektus vai 3D rotācijas pārejas laikā — tas, kas iepriekš nebija iespējams, jo elementi tika pacelti līdz augstākajam līmenim. .card img { view-transition-name: foto; view-transition-group: tuvākā; /* Saglabājiet to ligzdā! */ }
Tipogrāfija un formas Visbeidzot, ergonomists manī vēlas izmēģināt Text Box Trim, kas sola noņemt šo kaitinošo papildu atstarpi virs un zem teksta satura (vadošā), lai beidzot panāktu perfektu vertikālo izlīdzināšanu. Un radošajā pusē stūra forma un forma() funkcija paver netaisnstūrveida izkārtojumus, ļaujot izveidot “kvadrātus” un sarežģītus ceļus, kas reaģē uz CSS mainīgajiem. To sakot, es nevaru sagaidīt, kad man būs pilns dizains ar svirām! Cerīga nākotne Mēs esam liecinieki pasaulei, kurā CSS kļūst spējīgs apstrādāt loģiku, stāvokli un sarežģītas mijiedarbības, kas iepriekš piederēja JavaScript. Tādas funkcijas kā moveBefore (DOM statusa saglabāšana iframe/videoklipu) un attr() (krāsām un režģiem tiek izmantoti veidi, kas pārsniedz virknes), vēl vairāk nostiprina šo realitāti. Lai gan dažas no šīm funkcijām pašlaik ir eksperimentālas vai raksturīgas pārlūkam Chrome, impulss ir nenoliedzams. Mums jācer uz nepārtrauktu atbalstu visās pārlūkprogrammās, izmantojot tādas iniciatīvas kā Interop, lai nodrošinātu, ka šīs iespējas kļūst par bāzes līniju. Tomēr pārlūkprogrammas dzinēji ir tikpat svarīgi kā visas šīs lieliskās funkcijas pārlūkprogrammā Chrome vispirms. Šīs jaunās funkcijas ir jāapspriež, jāpielāgo un jāpārbauda, pirms tās nonāk pārlūkprogrammās. Šis ir fantastisks brīdis, lai iekļūtu CSS. Mēs vairs ne tikai veidojam dokumentus; mēs izstrādājam dinamiskas, ergonomiskas un stabilas lietojumprogrammas, izmantojot vietējo rīku komplektu, kas ir jaudīgāks nekā jebkad agrāk. Sāksim šo jauno laikmetu un izplatīsim šo vārdu. Tas ir CSS iesaiņots!
