Kung hahatiin ko ang mga ebolusyon ng CSS sa mga kategorya, nalampasan na namin ang mga araw na humiling lang kami ng border-radius para maramdamang nabubuhay kami sa hinaharap. Kasalukuyan kaming nabubuhay sa isang sandali kung saan ang platform ay nagbibigay sa amin ng mga tool na hindi lamang nag-tweak sa visual na layer, ngunit sa panimula ay muling tukuyin kung paano kami nag-arkitekto ng mga interface. Naisip ko na ang bilang ng mga feature na inanunsyo noong 2024 ay hindi na mauuna. Hindi ako kailanman naging masaya na mali.
Ang "CSS Wrapped 2025" ng Chrome team ay hindi lamang isang listahan ng mga feature; ito ay isang manifesto para sa isang dynamic, katutubong web. Bilang isang taong gumugol ng ilang taon sa pagdodokumento ng mga ebolusyong ito — mula sa pagtukoy sa mga panahon ng "CSS5" hanggang sa mga masalimuot ng mga modernong kagamitan sa layout - nakita ko ang aking sarili na tumitingin sa pagtatapos ng taong ito nang may malaking pakiramdam ng pananabik. Nakikita namin ang pagbabago patungo sa "Optimized Ergonomics" at "Next-gen na mga pakikipag-ugnayan" na nagbibigay-daan sa amin na huminto sa pakikipaglaban sa code at magsimulang mag-sculpting ng mga interface sa kanilang natural na estado.
Sa artikulong ito, makakahanap ka ng komprehensibong pagtingin sa mga namumukod-tanging feature mula sa ulat ng Chrome, na tiningnan sa pamamagitan ng lens ng aking mga kamakailang eksperimento at pag-asa para sa hinaharap ng platform.
Ang Component Revolution: Panghuli, Isang Native Customizable Select
Sa loob ng maraming taon, umasa kami sa mga mabibigat na library ng JavaScript sa pag-istilo ng mga dropdown, isang "deka-dekadang lumang problema" na sa wakas ay nalutas na ng platform. Habang nagdedetalye ako sa aking malalim na pagsisid sa kasaysayan ng nako-customize na pili (at mga nauugnay na artikulo), ito ay naging isang mahabang daan na kinasasangkutan ng Open UI, pag-bikeshed ng mga pangalan tulad ng
Ang kamangha-manghang karagdagan upang payagan ang mayaman na nilalaman sa loob ng mga pagpipilian, tulad ng mga larawan o mga flag, ay napakasaya. Maaari tayong lumikha ng lahat ng uri ng mga pili ngayon:
Demo: Gumawa ako ng isang Poké-adventure demo na nagpapakita kung paano ang bagong
Tingnan ang Pen A na nako-customize na piliin na may mga larawan sa loob ng mga opsyon at ang napiling nilalaman [na-forked] ng utilitybend.
Demo: Isang komprehensibong pagtingin sa pag-istilo ng pili gamit ang mga pseudo-element lang.
Tingnan ang Pen A na nako-customize na pili na may mga pseudo-element lang [na-forked] ng utilitybend.
Demo: O maaari mo itong simulan sa isang demo ng pagpili ng Menu gamit ang mga optgroup.
Tingnan ang Pen An actual Select Menu na may mga optgroup na [na-forked] ng utilitybend. Ang tampok na ito lamang ay nagpapahiwatig ng malaking pagbabago sa kung paano tayo bubuo ng mga form, binabawasan ang mga dependency at teknikal na utang. Mga Scroll Marker At Ang Kamatayan Ng JavaScript Carousel Ang paggawa ng mga carousel ay dating isang friction point sa pagitan ng mga developer at kliyente. Gustung-gusto sila ng mga kliyente, kinatatakutan ng mga developer ang JavaScript na kinakailangan upang gawin silang naa-access at gumanap. Ang pagdating ng ::scroll-marker at ::scroll-button() pseudo-elements ay ganap na nagbabago sa dynamic na ito. Binibigyang-daan kami ng mga feature na ito na lumikha ng mga tuldok ng nabigasyon at mga pindutan ng pag-scroll gamit lamang ang CSS, na katutubong naka-link sa lalagyan ng scroll. Tulad ng isinulat ko sa aking blog, ito ay Pag-ibig sa unang slide. Ang kakayahang lumikha ng isang ganap na gumagana, naa-access na slider na walang isang linya ng JavaScript ay hindi lamang maginhawa; ito ay isang tagumpay para sa pagganap. Mayroong ilang mga alalahanin sa pagiging naa-access sa feature na ito, at kahit na valid ang mga ito, maaaring may paraan para sa aming mga developer na gawin itong gumana. Ang magandang bagay ay, lahat ng mga pagbabago sa UI na ito ay ginagawang mas madali kaysa sa custom na pagmamanipula ng DOM at pag-drag sa paligid ng mga aria tag, ngunit lumihis ako ... Maaari na nating igrupo ang mga marker nang awtomatiko gamit ang scroll-marker-group at i-istilo ang mga button gamit ang pagpoposisyon ng anchor upang ilagay ang mga ito nang eksakto kung saan natin gusto.
.carousel { overflow-x: auto; scroll-marker-group: pagkatapos; /* Lumilikha ng lalagyan para sa mga tuldok */
/* Lumikha ng mga pindutan */ &::scroll-button(inline-end),&::scroll-button(inline-start) { nilalaman: " "; posisyon: ganap; /* Gumamit ng anchor positioning para isentro ang mga ito */ posisyon-anchor: --carousel; tuktok: anchor(gitna); }
/* Lumikha ng mga marker sa mga bata */ div { &::scroll-marker { nilalaman: " "; lapad: 24px; hangganan-radius: 50%; cursor: pointer; } /* I-highlight ang aktibong marker */ &::scroll-marker:target-kasalukuyang { background: puti; } } }
Demo: Ang aking eksperimento sa paggawa ng carousel na puro HTML at CSS, gamit ang anchor positioning upang ilagay ang mga button.
Tingnan ang Pen Carousel Pure HTML at CSS [na-forked] ng utilitybend.
Demo: Isang Webshop slick slider remake gamit ang attr() upang dynamic na i-pull ang mga background na larawan sa mga marker.
Tingnan ang Pen Webshop slick slider remake sa CSS [na-forked] ng utilitybend. Mga Tanong ng Estado: Malagkit na Bagay na Natigil? Snappy Thing Snapped? Sa loob ng mahabang panahon, wala kaming kakayahang malaman kung ang isang "malagkit na bagay ay natigil" o kung ang isang "na-snap na item ay na-snap" nang hindi umaasa sa mga hack ng IntersectionObserver. Ipinakilala ng Chrome 133 ang mga scroll-state na query, na nagpapahintulot sa amin na i-query ang mga state na ito nang deklaratibo. Sa pamamagitan ng pagtatakda ng uri ng lalagyan: scroll-state, maaari na nating i-istilo ang mga bata batay sa kung sila ay natigil, naputol, o umaapaw. Isa itong napakalaking pagpapahusay sa "kalidad ng buhay" na sabik kong hinihintay mula noong Araw ng CSS 2023. Nag-evolve pa nga ito nang husto dahil nakikita rin natin ang direksyon ng scroll, ang ganda! Para sa isang simpleng halimbawa: maaari lang tayong maglapat ng anino sa isang header kapag ito ay talagang nananatili sa tuktok ng viewport: .header-container { uri ng lalagyan: scroll-state; posisyon: malagkit; tuktok: 0;
header { paglipat: box-shadow 0.5s ease-out; /* Sinusuri ng query ang estado ng lalagyan */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Isang malagkit na header na naglalapat lamang ng anino kapag ito ay talagang natigil.
Tingnan ang Pen Sticky na mga header na may scroll-state na query, tinitingnan kung ang sticky element ay na-stuck [na-forked] ng utilitybend.
Demo: Isang listahan na may temang Pokémon na gumagamit ng mga scroll-state na query na sinamahan ng pagpoposisyon ng anchor upang ilipat ang isang frame sa ibabaw ng kasalukuyang na-snap na character.
Tingnan ang Pen Scroll-state na query upang tingnan kung aling item ang na-snap gamit ang CSS, bersyon ng Pokemon [na-forked] ng utilitybend. Optimized Ergonomics: Logic Sa CSS Ang seksyong "Optimized Ergonomics" ng CSS Wrapped ay nagha-highlight ng mga feature na ginagawang mas intuitive ang aming mga workflow. Tatlong feature ang namumukod-tangi bilang transformative para sa kung paano namin isinusulat ang lohika:
if() Mga PahayagSa wakas ay nakakakuha kami ng mga kondisyon sa CSS. Ang function na if() ay gumaganap bilang isang ternary operator para sa mga stylesheet, na nagbibigay-daan sa amin na maglapat ng mga halaga batay sa media, suporta, o mga query sa istilo na inline. Binabawasan nito ang pangangailangan para sa mga verbose @media block para sa iisang pagbabago ng property. @function functionsMaaari naming sa wakas ilipat ang ilang lohika sa ibang lugar, na nagreresulta sa ilang mas malinis na mga file, isang tunay na tampok ng kalidad ng buhay. sibling-index() at sibling-count()Ang mga tree-counting function na ito ay nilulutas ang isyu ng nakakagulat na mga animation o styling item batay sa laki ng listahan. Habang nag-explore ako sa Pag-istilo ng magkakapatid na may CSS ay hindi kailanman naging mas madali, inaalis nito ang pangangailangan na mag-hard-code ng mga custom na katangian (tulad ng --index: 1) sa aming HTML.
Halimbawa: Pagkalkula ng Mga Layout Maaari na tayong sumulat ng mga maiikling pormula sa matematika. Halimbawa, ang pagsuray-suray ng animation para sa mga card na pumapasok sa screen ay nagiging walang halaga: .card-container > * { animation: ipakita ang 0.6s ease-out forward; /* Wala nang manu-manong --index na mga variable! */ animation-delay: calc(sibling-index() * 0.1s); }
Nag-eksperimento pa ako sa paggamit ng mga function na ito kasama ng trigonometry upang ilagay ang mga item sa isang perpektong bilog nang walang anumang JavaScript.
Demo: Nakakagulat na mga animation ng card nang pabago-bago.
Tingnan ang mga Pen Stagger card gamit ang sibling-index() [forked] ng utilitybend.
Demo: Paglalagay ng mga item sa isang perpektong bilog gamit ang sibling-index, sibling-count, at ang bagong tampok na CSS @function.
Tingnan ang Panulat Ang bilog gamit ang sibling-index, sibling-count at mga function na [na-forked] ng utilitybend. Aking CSS To-Do List: Mga Tampok na Hindi Ko Na Hihintaying Subukan Habang abala ako sa pag-sculpting ng mga pinili at paglipat, ang ulat na "CSS Wrapped 2025" ay puno ng iba pang mga goodies na hindi pa ako nagkakaroon ng pagkakataong paganahin sa CodePen. Mataas ang mga ito sa aking listahan para sa aking mga susunod na eksperimento: Mga Tanong sa Naka-angkla sa Container Gumamit ako ng CSS Anchor Positioning para sa mga button sa aking carousel demo, ngunit ang "CSS Wrapped" ay nagha-highlight ng isangebolusyon nito: Mga Anchored Container Query. Malulutas nito ang problema nating lahat sa mga tooltip: kung i-flip ng browser ang tooltip mula sa itaas hanggang sa ibaba dahil sa mga hadlang sa espasyo, ang "arrow" ay madalas na nananatiling nakaturo sa maling paraan. Gamit ang mga query sa naka-angkla na container (@container na naka-angkla(fallback: flip-block)), maaari naming i-istilo ang elemento batay sa kung aling fallback na posisyon ang aktwal na pinili ng browser. Nested View Transition Groups Ang View Transitions ay naging isang rebolusyon, ngunit ang mga ito ay may kasamang partikular na trade-off: pinatag nila ang element tree, na kadalasang sinisira ang 3D transforms o overflow: clip. Palagi kong nararamdaman na may kulang, at maaaring ito lang ang sagot. Sa pamamagitan ng paggamit ng view-transition-group: pinakamalapit, sa wakas ay maaari nating ilagay ang mga transition group sa bawat isa. Nagbibigay-daan ito sa amin na mapanatili ang mga clipping effect o 3D na pag-ikot sa panahon ng isang transition — isang bagay na dati ay imposible dahil ang mga elemento ay itinaas hanggang sa pinakamataas na antas. .card img { view-transition-name: larawan; view-transition-group: pinakamalapit; /* Panatilihin itong naka-nest! */ }
Typography at Hugis Sa wakas, ang ergonomist sa akin ay nangangati na subukan ang Text Box Trim, na nangangako na aalisin ang nakakainis na sobrang whitespace sa itaas at ibaba ng nilalaman ng teksto (ang nangungunang) upang sa wakas ay makamit ang perpektong vertical alignment. At para sa creative side, ang hugis ng sulok at ang shape() na function ay nagbubukas ng mga hindi hugis-parihaba na layout, na nagbibigay-daan para sa "mga parisukat" at kumplikadong mga landas na tumutugon sa mga variable ng CSS. Iyon ay sinabi, hindi ako makapaghintay na magkaroon ng isang disenyo na puno ng mga squircles! Isang Umaasa na Kinabukasan Nasasaksihan namin ang isang mundo kung saan ang CSS ay nagiging may kakayahang pangasiwaan ang lohika, estado, at kumplikadong mga pakikipag-ugnayan na dating kabilang sa JavaScript. Ang mga tampok tulad ng moveBefore (pagpapanatili ng estado ng DOM para sa mga iframe/video) at attr() (paggamit ng mga uri na lampas sa mga string para sa mga kulay at grids) ay higit na nagpapatibay sa katotohanang ito. Bagama't ang ilan sa mga feature na ito ay kasalukuyang pang-eksperimento o partikular sa Chrome, hindi maikakaila ang momentum. Dapat tayong umasa para sa patuloy na suporta sa lahat ng browser sa pamamagitan ng mga inisyatiba tulad ng Interop upang matiyak na ang mga kakayahan na ito ay magiging baseline. Iyon ay sinabi, ang pagkakaroon ng mga browser engine ay kasinghalaga ng pagkakaroon ng lahat ng kahanga-hangang feature na ito sa "Chrome muna." Ang mga bagong feature na ito ay kailangang talakayin, pag-usapan, at subukan bago mapunta sa mga browser. Ito ay isang kamangha-manghang sandali upang makapasok sa CSS. Hindi na lang tayo nag-istil ng mga dokumento; gumagawa kami ng mga dynamic, ergonomic, at matatag na application gamit ang native toolkit na mas malakas kaysa dati. Sumama tayo sa bagong panahon na ito at ipalaganap ang salita. Ito ay CSS Wrapped!
