Ọ bụrụ na m ga-ekewa CSS evolushọn n'ime ụdị, anyị agabigala ogologo ụbọchị mgbe anyị na-arịọ maka oke-radius ka ọ dị anyị ka anyị na-ebi n'ọdịnihu. Anyị na-ebi ugbu a n'oge ebe ikpo okwu na-enye anyị ngwá ọrụ na-abụghị naanị tweak oyi akwa a na-ahụ anya, kama na-akọwapụtakwa otu anyị si arụ ọrụ. Echere m na ọnụ ọgụgụ njirimara ekwuputara na 2024 enweghị ike ịtinye. Enwetụbeghị m ụdị obi ụtọ dị ukwuu.
Ndị otu Chrome "CSS Wrapped 2025" abụghị naanị ndepụta atụmatụ; ọ bụ ihe ngosi maka websaịtị siri ike. Dị ka onye nọrọla afọ ole na ole na-edepụta mgbanwe ndị a - site na ịkọwapụta oge "CSS5" ruo na mgbagwoju anya nke akụrụngwa nhazi ọgbara ọhụrụ - ahụrụ m onwe m na-ele ihe mkpuchi nke afọ a anya na nnukwu obi ụtọ. Anyị na-ahụ mgbanwe gaa na "Ergonomics kachasị mma" na "mmekọrịta ihe na-esote" nke na-enye anyị ohere ịkwụsị ịlụ ọgụ na koodu ahụ wee malite ịkpụgharị ihu na ọnọdụ ha.
N'ime edemede a, ị nwere ike ịchọta nlele zuru oke na njirimara pụtara ìhè sitere na akụkọ Chrome, nke a na-elele anya site na oghere nke nnwale m na-adịbeghị anya na olileanya maka ọdịnihu nke ikpo okwu.
Mgbanwe akụkụ ahụ: N'ikpeazụ, Nhọrọ Nhazi nke ala nna
Ruo ọtụtụ afọ, anyị adaberela n'ọbá akwụkwọ Javascript dị arọ ka ọ bụrụ ụdị ọdịda, "nsogbu afọ iri" nke ikpo okwu edozila. Dịka m kọwapụtara n'ime omimi m miri emi n'ime akụkọ ihe mere eme nke nhọrọ nhọrọ (na isiokwu ndị metụtara ya), nke a abụrụla ụzọ dị ogologo nke metụtara Open UI, aha igwe kwụ otu ebe dị ka
Ihe mgbakwunye mara mma iji kwe ka ọdịnaya bara ụba dị n'ime nhọrọ, dị ka onyonyo ma ọ bụ ọkọlọtọ, bụ ihe na-atọ ụtọ. Anyị nwere ike ịmepụta ụdị ahọpụtara n'oge a:
Ngosi: M mepụtara ihe ngosi Poké-adventure na-egosi ka ihe ọhụrụ
Hụ pen A nwere ike ịhazi ya nwere onyonyo dị n'ime nhọrọ yana ọdịnaya ahọpụtara [ndụra] site na utilitybend.
Ngosi: Nleba anya zuru oke na iji naanị ihe pseudo-eme ka ị na-eme nhọrọ.
Hụ pen A nwere ike ịhazi ya nwere naanị pseudo-elements [ndụrara] site na utilitybend.
Ngosi: Ma ọ bụ ị nwere ike were otu ngosi nhọrọ menu gbalite ya nke ọma.
Hụ mkpịsị ugodi n'ezie Họrọ NchNhr nwere otu ndị na-ahapụ ya site na utilitybend. Njirimara a naanị na-egosi nnukwu mgbanwe na otu anyị ga-esi wuo ụdị, na-ebelata ịdabere na ụgwọ ọrụ aka. Mpempe akwụkwọ mpịakọta na ọnwụ nke Carousel JavaScript Ịmepụta carousels bụ akụkọ ihe mere eme bụ ebe esemokwu n'etiti ndị mmepe na ndị ahịa. Ndị ahịa hụrụ ha n'anya, ndị mmepe na-atụ egwu Javascript chọrọ iji mee ka ha nweta ma rụọ ọrụ. Ọbịbịa nke :: mpịakọta-marker na :: pịgharịa-bọtịnụ() pseudo-elements na-agbanwe ike a kpamkpam. Atụmatụ ndị a na-enye anyị ohere ịmepụta ntụpọ nsoroụzọ na bọtịnụ mpịakọta naanị na CSS, jikọtara ya na akpa akwụkwọ mpịakọta. Dịka m dere na blọọgụ m, nke a bụ ịhụnanya na slide mbụ. Ikike imepụta ihe mmịfe nke na-arụ ọrụ nke ọma na enweghị otu ahịrị Javascript abụghị naanị adaba; ọ bụ mmeri maka arụmọrụ. Enwere ụfọdụ nchegbu nnweta gburugburu njirimara a, na agbanyeghị na ndị a bara uru, enwere ike ịnwe ụzọ anyị ndị nrụpụta ga-esi mee ka ọ rụọ ọrụ. Ihe dị mma bụ, mgbanwe UI ndị a niile na-eme ka ọ dịkwuo mfe karịa ịmegharị DOM omenala na ịdọrọ gburugburu mkpado aria, mana m na-atụgharị ... Ugbu a, anyị nwere ike ịchịkọta ihe nrịbama na-akpaghị aka site na iji mpịakọta-marker-group wee mee bọtịnụ ahụ site na iji ọnọdụ arịlịka ka idobe ha kpọmkwem ebe anyị chọrọ.
.carousel { ngabiga-x: akpaaka; mpịakọta-akara-otu: emechaa; /* Na-emepụta akpa maka ntụpọ */
/* Mepụta bọtịnụ */ &:: bọtịnụ mpịakọta (njedebe-njedebe),&:: pịgharịa-bọtịnụ(n'line-mmalite) { ọdịnaya: ""; ọnọdụ: zuru oke; /* Jiri ọnọdụ arịlịka ka etiti ha dị n'etiti */ ọnọdụ-arịlịka: --carousel; elu: arịlịka (etiti); }
/* Mepụta akara na ụmụaka */ div { & :: akwụkwọ mpịakọta-akara { ọdịnaya: ""; obosara: 24px; oke-radius: 50%; cursor: pointer; } /* Mee ka akara ngosi nọ n'ọrụ pụta ìhè */ & :: akwụkwọ mpịakọta-akara: ebumnuche-ugbu a { ndabere: ọcha; } } }
Ngosi: Nnwale m na-emepụta carousel sitere na HTML na CSS, na-eji nhazi arịlịka iji tinye bọtịnụ.
Hụ Pen Carousel Dị Ọcha HTML na CSS [ forked] site na utilitybend.
Ngosi: Nrụgharị ihe mmịfe Webshop slick site na iji attr () iji dọpụta onyonyo ndabere n'ụzọ siri ike n'ime akara.
Hụ Pen Webshop slick slider remake na CSS [ forked] site na utilitybend. Ajụjụ steeti: Ihe kwụgidere n'ụkwụ? Ihe Snappy agbanarị? Ruo ogologo oge, anyị enweghị ikike ịma ma "ihe na-arapara n'ahụ" ma ọ bụ ọ bụrụ na "ihe na-adịghị mma na-adaba" na-adabereghị na hacks IntersectionObserver. Chrome 133 webatara ajụjụ mpịakọta-steeti, na-enye anyị ohere ịjụ steeti ndị a n'ụzọ doro anya. Site n'ịtọ ụdị akpa: mpịakọta-steeti, anyị nwere ike ịke ụmụaka ugbu a dabere ma ha rapaara, sụọ, ma ọ bụ na-ejubiga ókè. Nke a bụ nnukwu nkwalite “ịdị mma nke ndụ” nke m na-atụsi anya ike kemgbe CSS Day 2023. O meela ọtụtụ ihe ebe anyị nwekwara ike ịhụ ntụzịaka nke akwụkwọ mpịakọta ahụ, ọmarịcha! Maka ọmụmaatụ dị mfe: anyị nwere ike mechaa tinye onyinyo na nkụnye eji isi mee naanị mgbe ọ na-arapara n'elu ebe nlele: .isi-akpa { ụdị akpa: mpịakọta-ala; ọnọdụ: nnyapade; n'elu: 0;
nkụnye eji isi mee { mgbanwe: igbe-onyinyo 0.5s mfe-apụ; /* Ajuju a na-enyocha ọnọdụ akpa ahụ */ @container mpịakọta-state (rapaara: n'elu) { igbe-onyinyo: rgba (0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Ihe ngosi: nkụnye eji isi mee nke na-etinye naanị onyinyo mgbe ọ rapaara n'ezie.
Hụ ihe nkụnye eji isi mee Pen Sticky nwere ajụjụ mpịakọta-steeti, na-elele ma ihe nnyapade ahụ araparawo [nyocha] site na utilitybend.
Ngosi: Ndepụta isiokwu Pokémon nke na-eji ajụjụ mpịakọta-steeti jikọtara ya na ọnọdụ arịlịka iji bugharịa etiti n'elu agwa ejidere ugbu a.
Hụ ajụjụ steeti mpịakọta Pen ka ịlele nke ihe ejiri CSS were, ụdị Pokemon [dị ndụdụ] site na utilitybend. Ergonomics kachasị mma: Logic na CSS Akụkụ “Ergonomics kachasị mma” nke CSS Wrapped na-egosipụta njirimara na-eme ka usoro ọrụ anyị dịkwuo nkọ. Atụmatụ atọ pụtara dị ka mgbanwe maka otu anyị si ede mgbagha:
if() Nkwupụta Anyị na-emesị nweta ọnọdụ na CSS. Ọrụ if() na-eme dị ka onye na-arụ ọrụ ternary maka mpempe akwụkwọ, na-enye anyị ohere itinye ụkpụrụ dabere na usoro mgbasa ozi, nkwado, ma ọ bụ ajụjụ ụdị n'ahịrị. Nke a na-ebelata mkpa verbose @media blocks maka otu ihe mgbanwe. Ọrụ @function Anyị nwere ike mechaa bugharịa ụfọdụ ezi uche gaa n'ebe dị iche, na-ebute faịlụ ndị dị ọcha, ezigbo njirimara ndụ. Sibling-index () na nwanne-count () Ọrụ ịgụ osisi ndị a na-edozi okwu nke ihe nkiri dị egwu ma ọ bụ nhazi ihe dabere na nha ndepụta. Dịka m nyochara na Styling sisters na CSS adịbeghịrị m mfe, nke a na-ewepụ mkpa ọ dị inwe njirimara omenala siri ike (dị ka --index: 1) na HTML anyị.
Ọmụmaatụ: Ịgbakọ okirikiri nhọrọ ukwuu Anyị nwere ike dee usoro mgbakọ na mwepụ nkenke. Dịka ọmụmaatụ, ịmegharị ihe nkiri maka kaadị na-abanye na ihuenyo na-aghọ ihe na-adịghị mkpa: .kaadị-akpa > * { animation: ikpughe 0.6s mfe-esi n'ihu; /* Enweghị akwụkwọ ntuziaka ọzọ --index variables! */ animation-egbu oge: calc ( nwanne-index () * 0.1s); }
Agbalịrị m iji ọrụ ndị a yana trigonometry idobe ihe na okirikiri zuru oke na-enweghị Javascript ọ bụla.
Ngosi: eserese kaadị na-atụ egwu nke ukwuu.
Hụ kaadị Pen Stagger site na iji nwanne-index() [nke agbadoro] site na utilitybend.
Ihe ngosi: idobe ihe n'okirikiri zuru oke site na iji akara nwanne, ọnụ ọgụgụ nwanne, yana njirimara CSS @ ọrụ ọhụrụ.
Hụ okirikiri Pen ahụ na-eji nrịbama nwanne, ọnụ ọgụgụ nwanne na ọrụ [nke agbadoro] site na utilitybend. Ndepụta CSS m ga-eme: atụmatụ m enweghị ike ichere ịnwale Ka m nọ na-arụsi ọrụ ike n'ịkpụ nhọrọ na ntụgharị, akụkọ "CSS Wrapped 2025" juputara na ihe ọma ndị ọzọ m na-enwebeghị ohere ịgbanye na CodePen ma. Ndị a dị elu na ndepụta m maka nnwale m na-esote: Ajụjụ arịa agbadoro Eji m CSS Anchor Positioning maka bọtịnụ dị na ngosi carousel m, mana "CSS Kechie" na-akọwapụta otu.evolushọn nke a: Arịrịọ Arịrịọ Akpado. Nke a na-edozi nsogbu anyị niile nwere site na ngwa ngwa: ọ bụrụ na ihe nchọgharị ahụ na-atụgharị ngwaọrụ ahụ site n'elu ruo na ala n'ihi oghere oghere, "akụ" na-anọkarị na-atụ aka n'ụzọ na-ezighi ezi. Site na ajị ajụjụ akpado agbadoro (@container anchored(fallback: flip-block)), anyị nwere ike ịkepụta mmewere dabere na ọnọdụ ọdịda ihe nchọgharị ahụ họọrọ n'ezie. Otu ngbanwe Nleta akwu View Transitions abụrụla mgbanwe, mana ha ji otu azụmaahịa wee bịa: ha na-emebi osisi mmewere, nke na-agbajikarị mgbanwe 3D ma ọ bụ njupụta: clip. Enwere m mmetụta mgbe niile na ọ nwere ihe na-efunahụ ya, nke a nwekwara ike ịbụ azịza ya. Site n'iji echiche-transition-otu: kacha nso, anyị nwere ike mechaa kpachie otu mgbanwe n'ime ibe anyị. Nke a na-enye anyị ohere idowe mmetụta clipping ma ọ bụ ntụgharị 3D n'oge mgbanwe - ihe na-agaghị ekwe omume na mbụ n'ihi na ebuliri ihe ndị ahụ ruo ọkwa dị elu. .kaadị img { ele-ngbanwe-aha: foto; ele-ngbanwe-otu: kacha nso; /* Debe ya n'ụlọ! */ }
Ụdị akwụkwọ na Ụdị N'ikpeazụ, ergonomist n'ime m na-afụ ụfụ ịnwale Text Box Trim, nke na-ekwe nkwa iwepụ oghere ahụ na-akpasu iwe n'elu na n'okpuru ọdịnaya ederede (nke na-eduga) n'ikpeazụ iji nweta nhazi kwụ ọtọ. Na maka akụkụ ihe okike, akụkụ-akuku na ọrụ () na-emepe oghere ndị na-abụghị akụkụ anọ, na-enye ohere maka "squaricles" na ụzọ mgbagwoju anya na-anabata mgbanwe CSS. Nke a na-ekwu, enweghị m ike ichere inwe ihe eji eme ihe juputara na squircles! Ọdịnihu Na-atụ anya Anyị na-ahụ ụwa ebe CSS na-enwe ike ijikwa mgbagha, steeti, na mmekọrịta dị mgbagwoju anya nke bụbu nke Javascript. Atụmatụ dị ka moveBefore (ichekwa steeti DOM maka iframes / vidiyo) na attr () (iji ụdị gafere ụdọ maka agba na grids) na-eme ka eziokwu a pụtakwuo. Ọ bụ ezie na ụfọdụ n'ime njirimara ndị a bụ nnwale ugbu a ma ọ bụ kpọmkwem maka Chrome, a pụghị ịgọnarị ọsọ ahụ. Anyị ga-atụ anya nkwado na-aga n'ihu n'ofe ihe nchọgharị niile site na atumatu dị ka Interop iji hụ na ikike ndị a ghọrọ ntọala. Nke a na-ekwu, ịnwe igwe ihe nchọgharị dị oke mkpa dị ka ịnwe atụmatụ ndị a dị egwu na "Chrome mbụ". Ọ dị mkpa ka a kparịta atụmatụ ọhụrụ ndị a, tinye aka na ya, ma nwalee tupu ha erute na ihe nchọgharị. Ọ bụ oge dị egwu ịbanye na CSS. Anyị abụghịzi naanị styling akwụkwọ; anyị na-eji ngwa emezighị emezi, ergonomic na nke siri ike na-arụ ọrụ nke dị ike karịa mgbe ọ bụla. Ka anyị na-aga na oge ọhụrụ a ma gbasaa okwu. Nke a bụ CSS Kechie!
