Inā wau e hoʻokaʻawale i nā hoʻololi CSS i nā ʻāpana, ua neʻe mākou ma mua o nā lā a mākou i noi wale ai i ka palena-radius e manaʻo ai mākou e noho nei i ka wā e hiki mai ana. Ke noho nei mākou i kahi manawa kahi e hāʻawi mai ai ka paepae iā mākou i nā mea hana ʻaʻole e hoʻololi wale i ka papa ʻike, akā hoʻololi hou i ke ʻano o kā mākou kūkulu ʻana i nā pilina. Ua manaʻo wau ʻaʻole hiki ke hoʻonui ʻia ka helu o nā hiʻohiʻona i hoʻolaha ʻia ma 2024. ʻAʻole loa wau i hewa me ka hauʻoli.
ʻO ka hui Chrome "CSS Wrapped 2025" ʻaʻole ia he papa inoa o nā hiʻohiʻona; he hōʻike ia no kahi pūnaewele hoʻoikaika kino. Ma ke ʻano he kanaka i hala ʻelua mau makahiki e kākau ana i kēia mau loli - mai ka wehewehe ʻana i nā wā "CSS5" a hiki i ka paʻakikī o nā pono hana hoʻolālā hou - ʻike wau iaʻu e nānā nei i ka ʻōwili ʻia o kēia makahiki me ka hauʻoli nui. Ke ʻike nei mākou i ka neʻe ʻana i ka "Optimized Ergonomics" a me "Next-gen interactions" e ʻae iā mākou e hoʻōki i ka hakakā ʻana i ke code a hoʻomaka i ke kālai ʻana i nā loulou i ko lākou kūlana kūlohelohe.
Ma kēia ʻatikala, hiki iā ʻoe ke ʻike i ka nānā piha ʻana i nā hiʻohiʻona kū mai ka hōʻike a Chrome, i nānā ʻia ma o ka lens o kaʻu mau hoʻokolohua hou a me nā manaʻolana no ka wā e hiki mai ana o ka paepae.
ʻO ka Component Revolution: ʻO ka hope, kahi koho ʻōiwi maʻamau
No nā makahiki, ua hilinaʻi mākou i nā hale waihona puke JavaScript koʻikoʻi i ke kāʻei ʻana i nā dropdowns, kahi "pilikia mau makahiki" i hoʻopau hope ʻia ka paepae. E like me kaʻu wehewehe ʻana i kaʻu luʻu hohonu i ka mōʻaukala o ka koho maʻamau (a me nā ʻatikala e pili ana), he ala lōʻihi kēia e pili ana i ka Open UI, nā inoa paʻa uila e like me
ʻO ka hoʻohui maikaʻi loa e ʻae i nā ʻike waiwai i loko o nā koho, e like me nā kiʻi a i ʻole nā hae, he leʻaleʻa. Hiki iā mākou ke hana i nā ʻano koho āpau i kēia mau lā:
Demo: Ua hana au i kahi demo Poké-adventure e hōʻike ana i ke ʻano o ka mea hou
E ʻike i ka Pen A koho maʻamau me nā kiʻi i loko o nā koho a me nā mea i koho ʻia [forked] e utilitybend.
Demo: ʻO ka nānā piha ʻana i ke kālai ʻana i ka mea koho me nā pseudo-element wale nō.
E ʻike i ka Pen A koho maʻamau me nā pseudo-elements wale nō [forked] e utilitybend.
Demo: A i ʻole hiki iā ʻoe ke kiʻi i kahi notch me kēia demo koho koho me ka hoʻohana ʻana i nā optgroups.
E ʻike i ka Pen He menu koho maoli me nā hui koho [forked] e utilitybend. ʻO kēia hiʻohiʻona wale nō ka hōʻailona i kahi loli nui i ke ʻano o kā mākou kūkulu ʻana i nā palapala, e hōʻemi ana i nā hilinaʻi a me nā ʻaiʻē loea. scroll markers a me ka make o ka JavaScript Carousel ʻO ka hana ʻana i nā carousels i ka wā kahiko, he wahi hakakā ma waena o nā mea hoʻomohala a me nā mea kūʻai aku. Aloha nā mea kūʻai aku iā lākou, makaʻu nā mea hoʻomohala i ka JavaScript e pono ai e hoʻokō iā lākou a me ka hana. ʻO ka hōʻea ʻana o ::scroll-marker a me ::scroll-button() pseudo-elements e hoʻololi holoʻokoʻa i kēia hana. Hāʻawi kēia mau hiʻohiʻona iā mākou e hana i nā kiko hoʻokele a me nā pihi ʻōwili maʻemaʻe me CSS, i hoʻopili maoli ʻia i ka ipu ʻōwili. E like me kaʻu i kākau ai ma kaʻu blog, ʻo ke aloha kēia ma ka paheʻe mua. ʻAʻole maʻalahi ka hiki ke hana i kahi slider holoʻokoʻa me ka laina ʻole o JavaScript; he lanakila no ka hana. Aia kekahi mau pilikia e pili ana i kēia hiʻohiʻona, a ʻoiai he kūpono kēia, aia paha kahi ala no mākou nā mea hoʻomohala e hana ai. ʻO ka mea maikaʻi, ʻoi aku ka maʻalahi o kēia mau hoʻololi UI āpau ma mua o ka hoʻopunipuni DOM maʻamau a me ka huki ʻana i nā inoa aria, akā haʻalele wau ... Hiki iā mākou ke hui pū i nā māka me ka hoʻohana ʻana i ka scroll-marker-group a kāhua i nā pihi me ka hoʻonohonoho ʻana i ka heleuma e kau pono iā lākou ma kahi a mākou e makemake ai.
.carousel { kahe-x: kaʻa; scroll-marker-group: ma hope; /* Hana i ka ipu no nā kiko */
/* Hana i nā pihi */ &:: pihi ʻōwili (hope-inline),&:: pihi-puka (hoʻomaka-inline) { maʻiʻo: " "; kūlana: paʻa; /* E hoʻohana i ka hoʻonohonoho heleuma e hoʻokau iā lākou */ kūlana- heleuma: --carousel; luna: heleuma(waena); }
/* Hana i nā māka ma nā keiki */ div { &::mea hōʻailona ʻōwili { maʻiʻo: " "; laula: 24px; palena palena: 50%; cursor: kuhikuhi; } /* Hoʻokalaka i ka māka hana */ &::scroll-marker:target-i kēia manawa { hope: keʻokeʻo; } } }
Demo: ʻO kaʻu hoʻokolohua e hana ana i kahi carousel ma waho o HTML a me CSS, me ka hoʻohana ʻana i ka hoʻonohonoho heleuma e kau i nā pihi.
E ʻike i ka Pen Carousel Pure HTML a me CSS [forked] e utilitybend.
Demo: He Webshop slick slider remake me ka hoʻohana ʻana i ka attr() e huki i nā kiʻi hope i loko o nā māka.
E ʻike i ka Pen Webshop slick slider remake ma CSS [forked] e utilitybend. Nā Nīnau Mokuʻāina: Sticky Thing Stuck? Snappy Mea Ua Paʻi ʻia? No ka manawa lōʻihi, ua nele mākou i ka hiki ke ʻike inā paʻa kahi "mea paʻa" a i ʻole "hoʻopaʻa ʻia kahi mea paʻi" me ka hilinaʻi ʻole i nā hacks IntersectionObserver. Ua hoʻolauna ʻo Chrome 133 i nā nīnau scroll-state, e ʻae iā mākou e nīnau i kēia mau mokuʻāina me ka hoʻolaha. Ma ka hoʻonohonoho ʻana i ke ʻano pahu: scroll-state, hiki iā mākou ke kāhiko i nā keiki e pili ana i ka paʻa, paʻa, a i ʻole ke kahe. He hoʻomaikaʻi "maikaʻi o ke ola" nui kēia aʻu i kali nui ai mai ka lā CSS 2023. Ua ulu nui aʻe ʻoiai hiki iā mākou ke ʻike i ke kuhikuhi o ka ʻōwili, nani! No kahi laʻana maʻalahi: hiki iā mākou ke hoʻopili i kahi aka i kahi poʻomanaʻo i ka wā e pili pono ana i ka piko o ka viewport: .header-container { ʻano pahu: scroll-state; kūlana: pili; luna: 0;
poʻo { hoʻololi: pahu-shadow 0.5s maʻalahi-waho; /* Nānā ka nīnau i ke kūlana o ka pahu */ @container scroll-state(paʻa: luna) { pahu-aka: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: He poʻomanaʻo paʻa e pili ana i ke aka ke paʻa maoli.
E ʻike i nā poʻomanaʻo ʻo Pen Sticky me ka nīnau mokuʻāina ʻōwili, e nānā ana inā paʻa ka mea paʻa e ka utilitybend.
Demo: He papa inoa Pokémon e hoʻohana ana i nā nīnau scroll-state i hui pū ʻia me ka hoʻonohonoho heleuma e hoʻoneʻe i kahi kiʻi ma luna o ke ʻano i hoʻopaʻa ʻia i kēia manawa.
E nana i ka Pen Scroll-state query e nānā i ka mea i paʻi ʻia me CSS, Pokemon version [forked] by utilitybend. Ergonomics Optimized: Logic I CSS ʻO ka ʻāpana "Optimized Ergonomics" o CSS Wrapped e hōʻike ana i nā hiʻohiʻona e ʻoi aku ka naʻau o kā mākou kaʻina hana. ʻEkolu mau hiʻohiʻona e kū nei i mea hoʻololi no ke ʻano o kā mākou kākau ʻana i ka loiloi:
inā () Nā ʻŌlelo Loaʻa iā mākou nā kūlana ma CSS. Hana ʻia ka hana inā () e like me ka mea hoʻohana ternary no nā stylesheet, e ʻae iā mākou e hoʻopili i nā waiwai e pili ana i ka media, kākoʻo, a i ʻole nā nīnau kāhua i ka laina. Hoʻemi kēia i ka pono o nā poloka verbose @media no nā hoʻololi waiwai hoʻokahi. @function functions Hiki iā mākou ke hoʻoneʻe i kekahi loina i kahi ʻokoʻa, e hopena i kekahi mau faila maʻemaʻe, kahi hiʻohiʻona maoli o ke ola. sibling-index() a me sibling-count() Hoʻoponopono kēia mau hana helu lāʻau i ka pilikia o ka hoʻoulu ʻana a i ʻole ke kāʻei ʻana i nā mea e pili ana i ka nui o ka papa inoa. I koʻu ʻimi ʻana ma Styling kaikaina me CSS ʻaʻole i maʻalahi, hoʻopau kēia i ka pono e hoʻopaʻa inoa paʻakikī i nā waiwai maʻamau (e like me --index: 1) i kā mākou HTML.
Laʻana: Ka helu ʻana i nā Layout Hiki iā mākou ke kākau i nā huahelu makemakika pōkole. No ka laʻana, he mea koʻikoʻi ka hoʻohālua ʻana i kahi animation no nā kāleka e komo ana i ka pale: . pahu pahu > * { animation: hōʻike i ka 0.6s maʻalahi i mua; /* ʻAʻohe manual --index variables! */ hoʻolōʻihi i ka animation: calc(sibling-index() * 0.1s); }
Ua hoʻāʻo au me ka hoʻohana ʻana i kēia mau hana me nā trigonometry e kau i nā mea i loko o kahi pōʻai kūpono me ka ʻole o JavaScript.
Demo: ʻO ka hoʻoulu ʻana i nā kiʻi kāleka staggering.
E ʻike i nā kāleka Pen Stagger e hoʻohana ana i ka sibling-index() [forked] e utilitybend.
Demo: Hoʻokomo i nā mea i loko o kahi pōʻai kūpono me ka hoʻohana ʻana i ka sibling-index, sibling-count, a me ka hiʻohiʻona CSS @function hou.
E ʻike i ka Pen Ka pōʻai e hoʻohana ana i ka sibling-index, sibling-count and functions [forked] by utilitybend. ʻO kaʻu papa inoa e hana ai CSS: ʻAʻole hiki iaʻu ke kali e hoʻāʻo ʻOiai wau e luhi nei i ke kālai ʻana i nā koho a me nā hoʻololi ʻana, ua hoʻopiha ʻia ka hōʻike "CSS Wrapped 2025" me nā mea maikaʻi ʻē aʻe i loaʻa ʻole iaʻu ka manawa e puhi ai ma CodePen. Aia kēia ma kaʻu papa inoa no kaʻu mau hoʻokolohua e hiki mai ana: Nā Nīnau Container i hoʻopaʻa ʻia Ua hoʻohana au i ka CSS Anchor Positioning no nā pihi ma kaʻu carousel demo, akā ʻo "CSS Wrapped" e hōʻike ana i kahievolution o keia: Anchored Container Queries. Hoʻoponopono kēia i kahi pilikia i loaʻa iā mākou a pau me nā hāmeʻa: inā e hoʻohuli ka polokalamu kele i ka ʻaoʻao mai luna a lalo ma muli o ke kaʻe o ka lewa, mau ka "pana" e kuhikuhi ana i ke ala hewa. Me nā nīnau pahu pahu (@container anchored(fallback: flip-block)), hiki iā mākou ke kāhiko i ka mea e pili ana i ke kūlana fallback i koho maoli ai ka polokalamu kele pūnaewele. Nā Pūʻulu Transition Nested View He hoʻololi ʻo View Transitions, akā ua hele mai lākou me kahi kūʻai kūʻai kikoʻī: hoʻopalapala lākou i ka kumulāʻau element, ka mea i haki pinepine i ka hoʻololi 3D a i ʻole overflow: clip. Ua loaʻa iaʻu ka manaʻo e nalowale ana kekahi mea, a ʻo ia paha ka pane. Ma ka hoʻohana ʻana i ka ʻike-transition-group: kokoke loa, hiki iā mākou ke hoʻopaʻa hope i nā pūʻulu hoʻololi i loko o kekahi. Hāʻawi kēia iā mākou e mālama i nā hopena clipping a i ʻole 3D rotations i ka wā o kahi hoʻololi - kahi mea i hiki ʻole ma mua no ka mea ua hoʻokiʻekiʻe ʻia nā mea i luna. .card img { nānā-hoʻololi-inoa: kiʻi; nānā-hoʻololi-hui: kokoke; /* E hoomau i ka punana! */ }
Kiʻi palapala a me nā ʻano ʻO ka mea hope loa, ke ʻimi nei ka ergonomist i loko oʻu e hoʻāʻo i ka Text Box Trim, ka mea e hoʻohiki ai e wehe i kēlā keʻokeʻo keʻokeʻo hoʻonāukiuki ma luna a ma lalo o nā kikokikona (ke alakaʻi) e hoʻokō hope loa i ka alignment kū pololei. A no ka ʻaoʻao noʻonoʻo, ʻo ke ʻano kihi a me ke ʻano () hana e wehe ana i nā hoʻolālā ʻokoʻa ʻole, e ʻae ana i nā "squaricles" a me nā ala paʻakikī e pane i nā mea hoʻololi CSS. ʻO ka ʻōlelo ʻana, ʻaʻole hiki iaʻu ke kali i kahi hoʻolālā piha i nā squircles! He Manaolana Ke ʻike nei mākou i kahi honua kahi e hiki ai iā CSS ke hoʻokele i ka noʻonoʻo, mokuʻāina, a me nā pilina paʻakikī i pili iā JavaScript ma mua. ʻO nā hiʻohiʻona e like me moveBefore (mālama ʻana i ka mokuʻāina DOM no nā iframes/wikiō) a me attr () (e hoʻohana ana i nā ʻano ma waho o nā kaula no nā kala a me nā grids) e hoʻopaʻa hou i kēia ʻoiaʻiʻo. ʻOiai ʻo kekahi o kēia mau hiʻohiʻona he hoʻokolohua a kikoʻī paha iā Chrome, ʻaʻole hiki ke hōʻole ʻia ka manawa. Pono mākou e manaʻolana no ke kākoʻo mau ʻana ma waena o nā mākaʻikaʻi āpau ma o nā hana e like me Interop e hōʻoia i kēia mau mea hiki ke lilo i kumu. ʻO ka mea i ʻōlelo ʻia, ʻo ka loaʻa ʻana o nā mīkini polokalamu kele he mea nui e like me ka loaʻa ʻana o kēia mau hiʻohiʻona weliweli i ka "Chrome mua". Pono e kūkākūkā ʻia kēia mau hiʻohiʻona hou, e hoʻāʻo a hoʻāʻo ʻia ma mua o ka pae ʻana i nā polokalamu kele pūnaewele. He manawa maikaʻi kēia e komo ai i CSS. ʻAʻole mākou e hana hou i nā palapala; Ke hana nei mākou i nā noi ikaika, ergonomic, a paʻa hoʻi me kahi pahu hana maoli i ʻoi aku ka ikaika ma mua o ka wā. E hele kākou i kēia au hou a hoʻolaha i ka ʻōlelo. ʻO CSS Wrapped kēia!
