Dá mbeinn chun éabhlóidí CSS a roinnt ina gcatagóirí, ní mór dúinn bogadh i bhfad níos faide ná na laethanta nuair a d'iarr muid go simplí go n-aireofaí ar gha teorann go raibh muid ag maireachtáil sa todhchaí. Táimid ag maireachtáil i láthair na huaire ina bhfuil an t-ardán ag tabhairt uirlisí dúinn ní hamháin a dhéanann athrú ar an gciseal amhairc, ach a athshainmhíníonn go bunúsach an chaoi a ndéanaimid comhéadain ailtire. Shíl mé nach bhféadfaí cur leis an líon gnéithe a fógraíodh in 2024. Ní raibh mé riamh chomh sásta mícheart.
Ní liosta gnéithe amháin atá i “CSS Wrapped 2025” na foirne Chrome; is forógra é do ghréasán dinimiciúil, dúchasach. Mar dhuine a bhfuil cúpla bliain caite aige ag déanamh doiciméadú ar na héabhlóidí seo - ó réanna “CSS5” a shainmhíniú go dtí casta na bhfóntas nua-aimseartha maidir le leagan amach - braithim go bhfuilim féin ag féachaint ar fhilleadh na bliana seo le mothú ollmhór sceitimíní. Tá athrú le feiceáil againn i dtreo “Eirgeanamaíocht Optamaithe” agus “Idirghníomhaíochtaí an Chéad Ghlúin Eile” a ligeann dúinn stop a chur le troid an chóid agus tús a chur le comhéadain dealbhóireachta ina staid nádúrtha.
San Airteagal seo, is féidir leat breathnú cuimsitheach ar na gnéithe seasamh amach ó thuarascáil Chrome, a breathnaíodh trí lionsa mo thurgnaimh le déanaí agus dóchas do thodhchaí an ardáin.
An Réabhlóid Chomhpháirte: Ar deireadh, Rogha Dúchasach Inoiriúnaithe
Le blianta anuas, táimid ag brath ar leabharlanna trom JavaScript chun stíleanna anuas anuas, “fadhb le blianta fada” atá réitithe ag an ardán ar deireadh. Mar a mhionsonraigh mé i mo tumadh domhain isteach i stair an roghnaithe customizable (agus earraí gaolmhara), tá sé seo a bheith ina bóthar fada a bhaineann le Chomhéadain Oscailte, bikeshedding ainmneacha cosúil le
Is é an bhreis iontach chun ábhar saibhir taobh istigh a cheadú roghanna, mar shampla íomhánna nó bratacha, go leor spraoi. Is féidir linn gach cineál roghnúcháin a chruthú inniu:
Taispeántas: Chruthaigh mé taispeántas Poké-eachtraíochta a thaispeánann conas is féidir leis an eilimint nua
Féach ar an Peann A roghnú customizable le híomhánna taobh istigh de na roghanna agus an t-ábhar roghnaithe [forked] ag utilitybend.
Taispeántas: Súil chuimsitheach ar stíliú an roghnaithe gan ach míreanna bréige.
Féach ar an Peann A roghnú inoiriúnaithe gan ach gnéithe bréige [forked] ag utilitybend.
Taispeántas: Nó is féidir leat barr feabhais a chur air leis an taispeántas Roghchláir seo ag baint úsáide as optgroups.
Féach ar an Peann An Roghchlár iarbhír le optgroups [forked] ag utilitybend. Léiríonn an ghné seo amháin athrú ollmhór ar an gcaoi a dtógfaimid foirmeacha, ag laghdú spleáchais agus fiachas teicniúil. Marcóirí Scrollaigh Agus Bás An Timpealláin JavaScript Go stairiúil bhí cruthú timpealláin ina phointe cuimilte idir forbróirí agus cliaint. Is breá le cliaint iad, tá faitíos ar fhorbróirí an JavaScript a theastaíonn chun iad a dhéanamh inrochtana agus feidhmiúil. Nuair a tháinig ::scrollmharcóir agus ::cnaipe-scrollaigh() athraíonn an dinimic seo go hiomlán. Ligeann na gnéithe seo dúinn poncanna nascleanúna agus cnaipí scrollaithe a chruthú le CSS amháin, atá nasctha go dúchais leis an gcoimeádán scrollbharra. Mar a scríobh mé ar mo bhlag, ba é seo Love ar an gcéad sleamhnán. Níl sé áisiúil an cumas sleamhnán lánfheidhmiúil, inrochtana a chruthú gan aon líne amháin de JavaScript; is bua don fheidhmíocht é. Tá roinnt imní inrochtaineachta ann maidir leis an ngné seo, agus cé go bhfuil siad seo bailí, d'fhéadfadh go mbeadh bealach ann dúinne forbróirí a chur i bhfeidhm. Is é an rud go maith, tá na hathruithe Chomhéadain seo go léir á dhéanamh i bhfad níos éasca ná ionramháil saincheaptha DOM agus tarraingt timpeall ar chlibeanna aria, ach táim ag dul i léig… Is féidir linn marcóirí a ghrúpáil go huathoibríoch anois trí úsáid a bhaint as scroll-marker-group agus na cnaipí a stíliú trí úsáid a bhaint as suíomh ancaire chun iad a chur go díreach nuair is mian linn.
.carousel { thar maoil-x: uathoibríoch; scroll-marker-group: tar éis; /* Cruthaíonn an coimeádán le haghaidh poncanna */
/* Cruthaigh na cnaipí */ &:: scrollbharra (deireadh inlíne),&:: scrollbharra (tosú inlíne) { ábhar:" " ; seasamh: absalóideach; /* Úsáid suíomh ancaire chun iad a lárú */ seasamh-ancaire: --carousel; barr: ancaire (lár); }
/* Cruthaigh na marcóirí ar na páistí */ div { &::scrollmharcóir { ábhar:" " ; leithead: 24px; teorainn-ga: 50%; cúrsóir: pointeoir; } /* Aibhsigh an marcóir gníomhach */ &::scroll-marker:target-current { cúlra: bán; } } }
Taispeántas: Mo thurgnamh ag cruthú timpealláin as HTML agus CSS amháin, ag baint úsáide as suíomh ancaire chun na cnaipí a chur.
Féach ar an Pure Carousel Pure HTML agus CSS [forked] ag utilitybend.
Taispeántas: Athdhéan sleamhnáin slick Webshop ag baint úsáide as attr() chun íomhánna cúlra a tharraingt go dinimiciúil isteach sna marcóirí.
Féach ar an athdhéan sleamhnáin slick Pen Webshop i CSS [forked] ag utilitybend. Ceisteanna Stáit: Rud Greamaitheach Fostaithe? Snappy Rud Snap? Le fada an lá, ní raibh an cumas againn a fháil amach an bhfuil “rud greamaitheach greamaithe” nó an bhfuil “snappy item” gan a bheith ag brath ar hacks IntersectionObserver. Thug Chrome 133 ceisteanna scrollbharra isteach, rud a ligeann dúinn na stáit seo a fhiosrú go dearbhaithe. Trí chineál coimeádáin a shocrú: staid scrollaigh, is féidir linn anois leanaí a stíliú bunaithe ar cibé an bhfuil siad sáite, snasaithe nó ag cur thar maoil. Is feabhas ollmhór “caighdeán na beatha” é seo a bhfuilim ag fanacht go fonnmhar air ó Lá CSS 2023. Tá sé tar éis teacht chun cinn go mór fiú toisc gur féidir linn treo an scrolla a fheiceáil freisin, a bhreá! Mar shampla simplí: ní féidir linn scáth a chur ar cheanntásc ar deireadh ach amháin nuair atá sé ag cloí le barr an amhairc: .header-coimeádán { coimeádán-cineál: scrollbharra; seasamh: greamaitheach; barr: 0;
ceanntásc { trasdul: bosca-scáth 0.5s éasca-amach; /* Seiceálann an cheist staid an choimeádáin */ @container scroll-state(fostú: barr) { bosca-scáth: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Taispeántas: Ceanntásc greamaitheach a chuireann scáth i bhfeidhm ach amháin nuair a bhíonn sé greamaithe i ndáiríre.
Féach ar na ceanntásca Peann Sticky le ceist scrollbharra-stáit, ag seiceáil an bhfuil an eilimint greamaitheach greamaithe [forked] ag utilitybend.
Taispeántas: Liosta le téama Pokémon a úsáideann fiosrúcháin scrollbharra mar aon le suíomh ancaire chun fráma a bhogadh thar an gcarachtar atá gearrtha faoi láthair.
Féach ar an Peann Scroll-stáit ceist chun a sheiceáil cén mhír a thiomsóidh CSS, Pokémon leagan [forked] ag utilitybend. Eirgeanamaíocht Optamaithe: Loighic i CSS Aibhsíonn an rannán “Eirgeanamaíocht Optamaithe” de CSS Fillte gnéithe a dhéanann ár sreabhadh oibre níos iomasach. Seasann trí ghné amach mar ghné chlaochlaitheach don chaoi a scríobhaimid loighic:
if() StatementsTá coinníollacha á bhfáil againn faoi dheireadh i CSS. Feidhmíonn an fheidhm if() mar oibreoir trínártha do stílbhileoga, rud a ligeann dúinn luachanna a chur i bhfeidhm bunaithe ar cheisteanna meán, tacaíochta nó stíle inlíne. Laghdaíonn sé seo an gá atá le bloic verbose @media le haghaidh athruithe aonair maoine. @function functionsIs féidir linn roinnt loighic a aistriú go dtí áit eile ar deireadh, rud a fhágann go bhfuil roinnt comhaid níos glaine, gné fíor-chaighdeán saoil. Innéacs siblíní() agus Comhaireamh Siblíní() Réitíonn na feidhmeanna comhairimh crann seo an cheist maidir le beochan tuartha nó míreanna stíle bunaithe ar mhéid an liosta. Mar a rinne mé iniúchadh i Styling siblíní le CSS ní raibh sé níos éasca riamh, cuireann sé seo deireadh leis an ngá atá le crua-chódú airíonna saincheaptha (cosúil le --innéacs: 1) inár HTML.
Sampla: Leagan Amach a Ríomh Is féidir linn anois foirmlí matamaitice gonta a scríobh. Mar shampla, bíonn sé fánach beochan a thuisliú do chártaí a théann isteach sa scáileán: .card-coimeádán > * { beochan: nocht 0.6s éasca-amach ar aghaidh; /* Níl níos mó athróg láimhe --innéacs! */ beochan-moill: calc (innéacs deartháireacha () * 0.1s); }
Rinne mé fiú triail as na feidhmeanna seo a úsáid chomh maith le triantánacht chun míreanna a chur i gciorcal foirfe gan aon JavaScript.
Taispeántas: Beochan cártaí tuislithe go dinimiciúil.
Féach ar na cártaí Peann Stagger ag baint úsáide as innéacs sibling() [forked] ag utilitybend.
Taispeántas: Míreanna a chur i gciorcal foirfe ag baint úsáide as innéacs deartháireacha, comhaireamh deartháireacha, agus an ghné nua CSS @function.
Féach ar an Peann An ciorcal ag baint úsáide as innéacs deartháireacha, comhaireamh siblíní agus feidhmeanna [forked] ag fóntais Bend. Mo Liosta Rudaí le Déanamh CSS: Gnéithe Nach Féidir Liom Fan A Bhaint Astu Cé go raibh mé gnóthach ag dealbhóireacht roghnúcháin agus aistrithe, tá an tuarascáil “CSS Wrapped 2025” pacáilte le earraí maithe eile nach raibh deis agam iad a dhó i CodePen fós. Tá siad seo ard ar mo liosta le haghaidh mo chéad turgnaimh eile: Ceisteanna Coimeádán Ancaire Bhain mé úsáid as CSS Anchor Positioning do na cnaipí i mo thaispeántas timpealláin, ach cuireann “CSS Wrapped” béim aréabhlóid seo: Ceisteanna Coimeádán Ancaire. Réitíonn sé seo fadhb a bhí againn go léir le leideanna uirlisí: má shiompaíonn an brabhsálaí an leid uirlisí ó bhun go barr mar gheall ar shrianta spáis, is minic go bhfanann an “saighead” ag díriú ar an mbealach mícheart. Le fiosrúcháin maidir le coimeádán ancaire (@container ar ancaire (backback: smeach-bloc)), is féidir linn an eilimint a stíl atá bunaithe ar an suíomh cúltaca a roghnaigh an brabhsálaí i ndáiríre. Grúpaí Idirthréimhseacha Nested View Bhí View Transitions ina réabhlóid, ach tháinig siad le trádáil-uaire ar leith: leacaithe siad an crann eilimint, a bhris go minic 3D transforms nó thar maoil: gearrthóg. Mhothaigh mé i gcónaí go raibh rud éigin in easnamh air, agus b’fhéidir gurb é seo an freagra amháin. Trí úsáid a bhaint as view-transition-group: is gaire, is féidir linn grúpaí trasdula a neadú laistigh dá chéile ar deireadh. Ligeann sé seo dúinn éifeachtaí clipping nó rothlaithe 3D a choinneáil le linn trasdula - rud a bhí dodhéanta roimhe seo toisc go raibh na heilimintí ardaithe suas go dtí an leibhéal is airde. .card img { amharc-aistriú-ainm: grianghraf; view-transition-group: is gaire; /* Coinnigh nead é! */ }
Clóghrafaíocht agus Cruthanna Mar fhocal scoir, tá an eirgeanamaí ionamsa ag déanamh itching chun triail a bhaint as Text Box Trim, rud a gheallann go mbainfidh sé an spás bán breise annoying sin os cionn agus faoi bhun ábhar téacs (an tosaigh) chun ailíniú ingearach foirfe a bhaint amach ar deireadh. Agus don taobh cruthaitheach, tá cruth cúinne agus an fheidhm cruth () ag oscailt leagan amach neamhdhronuilleogach, rud a ligeann do “chearnóga” agus cosáin chasta a fhreagraíonn d’athróga CSS. É sin ráite, ní féidir liom fanacht go mbeidh dearadh lán d’ioraí agam! Todhchaí Dóchasach Táimid ag féachaint ar dhomhan ina bhfuil CSS ag éirí in ann déileáil le loighic, staid agus idirghníomhaíochtaí casta a bhain le JavaScript roimhe seo. Déanann gnéithe cosúil le moveBefore (staid DOM a chaomhnú le haghaidh iframes/físeáin) agus attr() (ag baint úsáide as cineálacha níos faide ná teaghráin le haghaidh dathanna agus greillí) an réaltacht seo a dhaingniú tuilleadh. Cé go bhfuil cuid de na gnéithe seo turgnamhach nó sainiúil do Chrome faoi láthair, ní féidir an móiminteam a shéanadh. Ní mór dúinn a bheith ag súil le tacaíocht leanúnach ar fud na mbrabhsálaithe go léir trí thionscnaimh mar Interop chun a chinntiú go mbeidh na cumais seo mar bhunlíne. É sin ráite, tá sé chomh tábhachtach céanna innill bhrabhsálaí a bheith agat agus na gnéithe uafásacha seo go léir a bheith agat in “Chrome first”. Ní mór na gnéithe nua seo a phlé, a tinkered leo agus a thástáil sula dtagann tú i dtír i mbrabhsálaithe riamh. Is nóiméad iontach é dul isteach sa CSS. Nílimid ag stíliú doiciméad a thuilleadh; tá feidhmchláir dhinimiciúla, eirgeanamaíochta agus láidre á ndéanamh againn le foireann uirlisí dúchais atá níos cumhachtaí ná riamh. Rachaimid leis an ré nua seo agus scaipfimid an scéal. Tá sé seo CSS Fillte!
