Afai e tatau ona ou vaevae le CSS evolutions i vaega, ua matou agai mamao atu i tua atu o aso na matou fesili ai mo tuaoi-radius e lagona ai o loo matou ola i le lumanaʻi. O loʻo tatou ola nei i se taimi o loʻo tuʻuina mai ai e le faʻasalalauga ia i tatou meafaigaluega e le na o le faʻaogaina o le ata vaaia, ae o le faʻavaeina o le toe faʻamalamalamaina o le auala tatou te fausia ai fesoʻotaʻiga. Na ou manatu o le numera o foliga na faʻasalalau i le 2024 e le mafai ona faʻaulu. Ou te lei sese lava ma le fiafia.
O le 'au a le Chrome "CSS Wrapped 2025" e le na'o se lisi o foliga; ose fa'aaliga mo se upega tafa'ilagi fa'anatinati. I le avea ai ma se tasi na faʻaaluina ni nai tausaga e faʻamaumau ai nei suiga - mai le faʻamalamalamaina o "CSS5" era i le lavelave o mea faʻaoga faʻaonaponei - ou te vaʻavaʻai i le afifiina o lenei tausaga ma se lagona tele o le fiafia. O loʻo matou vaʻaia se suiga agai i le "Optimized Ergonomics" ma le "Next-gen interactions" lea e mafai ai ona tatou taofi le tauina o le tulafono ma amata faʻatagata faʻatagata i lo latou tulaga masani.
I totonu o lenei tusiga, e mafai ona e mauaina se vaʻaiga manino i foliga faʻapitoa mai le lipoti a Chrome, vaʻai i tioata o aʻu faʻataʻitaʻiga lata mai ma faʻamoemoe mo le lumanaʻi o le faʻavae.
The Component Revolution: Mulimuli ane, A Native Customizable Selection
Mo le tele o tausaga, sa matou faʻalagolago i faletusi JavaScript mamafa e faʻapipiʻi faʻamaulalo, o se "faafitauli ua tele tausaga" lea ua iu lava ina foia e le tulaga. E pei ona ou auiliiliina i laʻu suʻesuʻega loloto i le tala faʻasolopito o le filifiliga faʻapitoa (ma tala faʻatatau), o se auala umi lea e aofia ai Open UI, faʻailoga uila igoa e pei o
O le faʻaopoopoga matagofie e faʻataga ai le tele o mea i totonu o filifiliga, e pei o ata poʻo fuʻa, e tele le malie. E mafai ona tatou faia ituaiga uma o filifiliga i aso nei:
Fa'aaliga: Na ou faia se fa'ata'ita'iga Poke-adventure e fa'aalia ai pe fa'afefea e le elemene fou
Va'ai le Pen O se filifiliga fa'apitoa fa'atasi ai ma ata i totonu o filifiliga ma mea na filifilia [fa'asolo] e le utilitybend.
Fa'ata'ita'iga: O se va'aiga fa'apitoa i le fa'avasegaina o le filifiliga fa'atasi ma na'o elemene pseudo.
Va'ai le Pen O se filifiliga fa'apitoa fa'atasi ma na'o elemene pseudo [tu'u] e le utilitybend.
Fa'ata'ita'iga: Pe e mafai fo'i ona e togiina i luga le fa'ata'ita'iga o le filifiliga Menu e fa'aaoga ai vaega fa'apitoa.
Va'ai le Peni O se Menu Filifilia moni ma optgroups [forked] e utilitybend. O le vaega lava lea e fa'ailoa mai ai se suiga tele i le auala o le a tatou fausia ai fomu, fa'aitiitia ai fa'alagolago ma aitalafu fa'apitoa. Fa'ailoga Ta'ai Ma Le Maliu O Le JavaScript Carousel O le fa'atupuina o carousels sa avea ma fa'alavelave i le va o tagata atia'e ma tagata fa'atau. E fiafia tagata fa'atau ia i latou, e fefefe le au atina'e i le JavaScript e mana'omia ina ia fa'aogaina ma fa'atino. O le taunuu mai o :: scroll-marker ma :: scroll-button() pseudo-elements e suia atoa ai lenei malosi. O nei foliga e mafai ai ona matou faia ni togitogi fa'atau ma fa'amau ta'ai mama i le CSS, fa'afeso'ota'i fa'aletagata i le koneteina ta'ai. A o ou tusia i luga o laʻu blog, o le Alofa lea i le ata muamua. O le mafai ona fatuina se faʻaoga atoatoa, faʻaogaina faʻaseʻe e aunoa ma se laina se tasi o le JavaScript e le naʻo le faigofie; o se manumalo mo le faatinoga. O lo'o i ai ni atugaluga fa'afeso'ota'i e uiga i lenei vaega, ma e ui lava e aoga ia mea, atonu e i ai se auala mo i matou tagata atia'e e fa'aoga ai. O le mea lelei, o nei suiga uma a le UI ua sili atu ona faigofie nai lo le faʻaogaina o le DOM masani ma le tosoina o faʻailoga aria, ae ou te alu ese ... E mafai nei ona tatou fa'avasega fa'ailoga e fa'aaoga otometi le fa'aogaina o le scroll-marker-group ma fa'apena fa'amau e fa'aoga ai le fa'atulagaina o taula e tu'u tonu ai i le mea tatou te manana'o ai.
.carousel { tauma-x: ta'avale; scroll-marker-group: ina ua uma; /* Fausia le koneteina mo togi */
/* Fausia faamau */ &::fa'amau-fa'amau(i totonu-i'uga),&::fa'amau-fa'amau(i totonu-amata) { anotusi: " "; tulaga: atoatoa; /* Fa'aoga le fa'atulagaina o taula e fa'atotonu ai */ tulaga-taula: --carousel; pito i luga: taula(ogatotonu); }
/* Fausia maka i luga o tamaiti */ div { &::fa'ailoga tusi { anotusi: " "; lautele: 24px; tuaoi-radius: 50%; fa'ailoga: fa'asino; } /* Fa'ailoga le fa'ailoga galue */ &::fa'ailoga ta'ai:fa'atatau-le taimi nei { tua: paepae; } } }
Fa'ata'ita'iga: O la'u fa'ata'ita'iga e fai ai se carousel mama mai le HTML ma le CSS, fa'aaoga le fa'atutuga taula e tu'u ai fa'amau.
Va'ai le Pen Carousel Pure HTML ma le CSS [forked] by utilitybend.
Fa'aaliga: O le Webshop slick slider remake e fa'aaoga ai le attr() e toso fa'amalosi ata i tua i fa'ailoga.
Va'ai le Pen Webshop slick slider remake i le CSS [forked] by utilitybend. Fesili a le Setete: Pi'i Mea Pili? Ua Snappy Mea? Mo se taimi umi, ua matou le maua le tomai e iloa ai pe o se "mea pipii o loʻo pipii" poʻo pe o se "mea puʻupuʻu ua malepe" e aunoa ma le faʻalagolago i le IntersectionObserver hacks. Chrome 133 na faʻafeiloaʻi fesili taʻavale-setete, faʻatagaina i matou e fesiligia nei setete faʻamaonia. I le setiina o container-type: scroll-state, ua mafai nei ona tatou siiina tamaiti e fa'atatau i le mau, ma'i, pe taumasuasua. O se fa'aleleia tele lea o le "lelei o le olaga" lea sa ou fa'atalitali ma le naunau talu mai le aso CSS 2023. Ua o'o lava ina tupu tele talu ai e mafai fo'i ona tatou va'ai i le itu o le tusi ta'ai, manaia! Mo se faʻataʻitaʻiga faigofie: e mafai ona matou faʻaaogaina se ata lafoia i se ulutala pe a pipii moni i le pito i luga o le vaʻaiga: .header-container { ituaiga pusa: scroll-state; tulaga: pipii; pito i luga: 0;
ulutala { suiga: pusa-paolo 0.5s faigofie-i fafo; /* E siaki e le fesili le tulaga o le container */ @container scroll-state(tumau: luga) { pusa-ata: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Fa'aaliga: O se ulutala pipii e na'o se ata lafoia pe a mau.
Va'ai i ulutala Pen Sticky ma le scroll-state query, siaki pe o lo'o pipi'i le elemene pipi'i [ga] e le utilitybend.
Fa'aaliga: O se lisi e fa'atatau i Pokémon e fa'aogaina ai fesili ta'avale-setete fa'atasi ma le fa'atulagaina o taula e fa'anofo ai se fa'avaa i luga o le tagata ua pu'eina nei.
Va'ai le Pen Scroll-state query e siaki po'o fea mea e pu'e ile CSS, Pokemon version [forked] by utilitybend. Optimized Ergonomics: Logic I CSS O le vaega "Optimized Ergonomics" o le CSS Wrapped o loʻo faʻamaonia ai foliga e faʻafaigofie ai a tatou galuega. E tolu vaega o loʻo tu mai e suia mo le auala tatou te tusia ai manatu:
if() Fa'amatalaga Ua i'u lava ina maua aiaiga ile CSS. O le galuega if() e galue e pei o se tagata fa'afoe mo sitaili pepa, fa'atagaina i matou e fa'aoga tulaga fa'atatau i luga o ala fa'asalalau, lagolago, po'o sitaili fesili i totonu. E fa'aitiitia ai le mana'oga mo verbose @media poloka mo suiga o meatotino e tasi. @function functionsE mafai ona matou faʻanofoina ni manatu i se isi nofoaga, e maua ai ni faila mama, o se uiga moni o le olaga. sibling-index() ma sibling-count()O nei galuega faitau laau e foia ai le mataupu o le fa'ateteleina o fa'afiafiaga po'o le fa'avasegaina o mea e fa'atatau i le tele o lisi. A o ou suʻesuʻeina i le Styling siblings with CSS e leʻi faigofie lava, o lenei mea e faʻaumatia ai le manaʻoga e faʻamaonia mea faʻapitoa (pei o --index: 1) i la tatou HTML.
Fa'ata'ita'iga: Fa'atatauina Fa'atonu Ua mafai nei ona matou tusia fua fa'atatau o le matematika. Mo se faʻataʻitaʻiga, o le faʻateteleina o se faʻafiafiaga mo kata o loʻo ulufale i luga o le lau e faʻatauvaʻa: .card-container > * { fa'afiafiaga: fa'aalia le 0.6s fa'alelei i luma; /* Leai se isi tusi --index fesuiaiga! */ animation-tuai: calc(sibling-index() * 0.1s); }
Na ou faʻataʻitaʻia foʻi le faʻaogaina o nei galuega faʻatasi ma le trigonometry e tuʻu ai mea i se liʻo atoatoa e aunoa ma se JavaScript.
Fa'ata'ita'iga: Fa'afiafiaga kata fa'ate'ia fa'amalosi.
Va'ai kata Pen Stagger e fa'aaoga ai sibling-index() [forked] by utilitybend.
Fa'aaliga: Tu'u mea i totonu o se li'o atoatoa e fa'aaoga ai sibling-index, sibling-count, ma le CSS fou @function feature.
Va'ai le Pen O le li'o e fa'aaoga ai sibling-index, sibling-count ma galuega [tu'u] e le utilitybend. O la'u lisi o mea e fai CSS: mea e le mafai ona ou faatali e taumafai A o ou pisi i le vaneina o filifiliga ma suiga, o le lipoti "CSS Wrapped 2025" o loʻo tumu i isi mea lelei ou te leʻi maua le avanoa e faʻaulu ai i CodePen. O loʻo maualuga nei i laʻu lisi mo aʻu suʻega e sosoo ai: Fa'atatau ile Container Queries Na ou faʻaogaina le CSS Anchor Positioning mo faʻamau i laʻu demo carousel, ae o le "CSS Wrapped" e faʻamaonia ai sefa'atupuina o lenei: Fa'atatau i le Container Queries. O lenei mea e foia ai se faʻafitauli sa matou maua uma i meafaigaluega: afai e faʻafefe e le suʻesuʻe le pito o meafaigaluega mai luga i lalo ona o le faʻatapulaʻaina o avanoa, o le "arrow" e masani ona tuʻu i le ala sese. Faatasi ai ma fesili o pusa taula (@container taula(fallback: flip-block)), e mafai ona tatou fa'avasegaina le elemene e fa'atatau i le tulaga fa'afo'i na filifilia e le browser. Nested View Transition Groups View Transitions o se suiga, ae na latou o mai ma se fefaʻatauaʻiga faʻapitoa: na latou faʻamafola le laau elemene, lea e masani ona gau ai suiga 3D poʻo le tafe: clip. Sa i ai lava ia te au se lagona o loo misi se mea, ma atonu o le tali lea. I le fa'aogaina o le va'aiga-transition-group: latalata, e mafai ona tatou fa'aulu fa'asolo vaega i totonu ole isi. Ole mea lea e mafai ai ona tatou fa'atumauina a'afiaga po'o suiga 3D i le taimi o se suiga - o se mea na le mafai muamua ona o elemene na si'itia i luga o le tulaga maualuga. .card img { va'ai-suiga-igoa: ata; va'aiga-sui-vaega: latalata; /* Taofi faamoega! */ }
Tusitusi ma Faiga Ma le mea mulimuli, o le ergonomist i totonu ia te aʻu o loʻo manaʻo e faʻataʻitaʻi le Text Box Trim, lea e folafola mai e aveese lena avanoa faʻafefe i luga ma lalo ifo o tusitusiga (le taʻitaʻiga) e iu ai ina ausia le faʻaogaina lelei atoatoa. Ma mo le itu foafoa, o le tulimanu-foliga ma le foliga () galuega o loʻo tatalaina ai faʻataʻitaʻiga e le faʻatutusa, faʻatagaina mo "squaricles" ma ala lavelave e tali atu i fesuiaiga CSS. I le faapea atu, ua ou le faatali e maua se mamanu e tumu i squircles! Se Lumana'i Fa'amoemoe O loʻo matou molimauina se lalolagi o loʻo mafai ai e le CSS ona faʻatautaia manatu, setete, ma fesoʻotaʻiga lavelave sa iai muamua i le JavaScript. O mea e pei o le moveBefore (fa'asaoina le setete o le DOM mo iframes/videos) ma le attr() (fa'aogaina o ituaiga i tua atu o manoa mo lanu ma grids) fa'amaua atili lenei mea moni. E ui o nisi o nei foliga o loʻo faʻataʻitaʻi pe faʻapitoa i Chrome, o le malosi e le mafai ona faʻafitia. E tatau ona tatou faʻamoemoe mo le faʻaauauina o le lagolago i luga o suʻesuʻega uma e ala i fuafuaga e pei o Interop ina ia mautinoa o nei gafatia e avea ma laina faʻavae. O lona uiga, o le i ai o masini suʻesuʻe e tutusa lava le taua ma le i ai o nei mea mataʻutia uma i le "Chrome muamua". O nei foliga fou e manaʻomia ona talanoaina, faʻataʻitaʻi, ma faʻataʻitaʻi aʻo leʻi tulaʻi mai i suʻesuʻega. Ose taimi manaia e ulufale ai ile CSS. E le o toe na o le stylingina o pepa; o lo'o matou faia ni fa'aoga fa'amalosi, ergonomic, ma malosi fa'atasi ai ma se mea faigaluega fa'aletino e sili atu le mamana nai lo se isi lava taimi. Tatou aga’i i lenei vaitau fou ma fa’asalalau le tala. Ole CSS lea ua afifi!
