Ngati ndikanati ndigawane kusintha kwa CSS m'magulu, tapita kutali kwambiri ndi masiku omwe tinkangopempha kuti tipeze malire kuti timve ngati tikukhala m'tsogolo. Tikukhala mu nthawi yomwe nsanja ikutipatsa zida zomwe sizimangosintha mawonekedwe, koma zimafotokozeranso momwe timalumikizirana. Ndidaganiza kuti kuchuluka kwazinthu zomwe zidalengezedwa mu 2024 sizingachuluke. Sindinayambe ndalakwitsa mosangalala.
Gulu la Chrome la "CSS Wrapped 2025" si mndandanda wazinthu; ndi chiwonetsero cha ukonde wosinthika, wachilengedwe. Monga munthu yemwe watha zaka zingapo akulemba zachisinthikozi - kuyambira kufotokozera za "CSS5" mpaka zovuta zamakono zamakono - ndikupeza kuti ndikuyang'ana kumapeto kwa chaka chino ndi chisangalalo chachikulu. Tikuwona kusintha kwa "Optimized Ergonomics" ndi "Next-gen interactions" zomwe zimatilola kuti tisiye kulimbana ndi kachidindo ndikuyamba kujambula zolumikizira mu chikhalidwe chawo.
M'nkhaniyi, mudzapeza kuyang'ana mwatsatanetsatane pazochitika zoyimilira kuchokera ku lipoti la Chrome, zomwe zimawonedwa kudzera muzoyesera zanga zaposachedwa komanso chiyembekezo chamtsogolo cha nsanja.
The Component Revolution: Pomaliza, A Native Customizable Select
Kwa zaka zambiri, takhala tikudalira malaibulale olemera a JavaScript kuti asinthe mawonekedwe otsika, "vuto lazaka makumi angapo" lomwe nsanja yathetsa. Monga ndikufotokozera mwatsatanetsatane zakuya kwanga m'mbiri ya zomwe mungasankhidwe (ndi nkhani zokhudzana nazo), iyi yakhala njira yayitali yokhudzana ndi Open UI, mayina a bikeshedding monga
Zowonjezera zabwino zomwe zimalola kuti zikhale zolemera mkati mwazosankha, monga zithunzi kapena mbendera, ndizosangalatsa kwambiri. Titha kupanga zosankha zamitundu yonse masiku ano:
Chiwonetsero: Ndinapanga chiwonetsero cha Poké-adventure chosonyeza momwe chinthu chatsopano cha
Onani Cholembera A chosankha chomwe chili ndi zithunzi mkati mwazosankha ndi zomwe zasankhidwa [zopangidwa ndi foloko] ndi utilitybend.
Chiwonetsero: Kuyang'ana mwatsatanetsatane pamakongoletsedwe osankhidwa ndi zinthu zabodza zokha.
Onani Cholembera A chosankha chomwe chili ndi zinthu zongopeka zokha [zopindidwa] ndi utilitybend.
Chiwonetsero: Kapena mutha kuchiyika pachithunzichi pogwiritsa ntchito ma optgroups.
Onani Cholembera Chosankha Chokha Chokha chokhala ndi magulu optgroups [opangidwa ndi foloko] ndi utilitybend. Izi zokha zikuwonetsa kusintha kwakukulu momwe tingapangire mafomu, kuchepetsa kudalira ndi ngongole zaukadaulo. Zolemba Zolemba Ndi Imfa Ya JavaScript Carousel Kupanga ma carousel m'mbiri yakale kwakhala kukangana pakati pa opanga ndi makasitomala. Makasitomala amawakonda, opanga amawopa JavaScript yofunikira kuti azitha kupezeka komanso kuchita bwino. Kufika kwa ::scroll-marker ndi ::scroll-button() pseudo-elements kumasintha izi kwathunthu. Izi zimatipatsa mwayi wopanga madontho oyenda ndi mabatani oyenda ndi CSS, olumikizidwa mwachilengedwe ndi chidebe cha mipukutu. Monga ndidalemba pabulogu yanga, ichi chinali Chikondi poyambira. Kutha kupanga slider yogwira ntchito bwino, yopezeka popanda mzere umodzi wa JavaScript sikophweka; ndi chigonjetso chakuchita bwino. Pali zovuta zina zokhudzana ndi kupezeka kozungulira gawoli, ndipo ngakhale izi ndi zovomerezeka, pakhoza kukhala njira yoti ife otukula tigwiritse ntchito. Chinthu chabwino ndichakuti, zosintha zonsezi za UI zikupangitsa kuti zikhale zosavuta kwambiri kuposa kusintha kwa DOM ndikukokera ma tag aaria, koma ndimasiya ... Tsopano titha kuyika zolembera zokha pogwiritsa ntchito scroll-marker-group ndikusintha mabataniwo pogwiritsa ntchito nangula kuti tiziyika pomwe tikufuna.
.carousel { kusefukira-x: auto; scroll-marker-gulu: pambuyo; /* Amapanga chidebe cha madontho */
/* Pangani mabatani */ &:: batani-mpukutu (pamzere-kumapeto),&:: batani-mpukutu (kuyambira-paintaneti) { zomwe: ""; udindo: mtheradi; /* Gwiritsani ntchito nangula kuti muyike pakati */ udindo-nangula: --carousel; pamwamba: nangula (pakati); }
/* Pangani zolembera pa ana */ div { &:: cholembera { zomwe: ""; m'lifupi: 24px; malire ozungulira: 50%; cholozera: cholozera; } /* Onetsani chikhomo chogwira ntchito */ &::scroll-marker: chandamale-pano { maziko: oyera; } } }
Chiwonetsero: Kuyesera kwanga kupanga carousel kuchokera mu HTML ndi CSS, pogwiritsa ntchito nangula poyika mabatani.
Onani Pen Carousel Pure HTML ndi CSS [yafoloko] ndi utilitybend.
Chiwonetsero: Webshop slick slider remake pogwiritsa ntchito attr() kukoka zithunzi zakumbuyo mwamphamvu pazolembera.
Onani Pen Webshop slick slider remake mu CSS [foloko] ndi utilitybend. Mafunso a Boma: Zinthu Zomata Zakhazikika? Kodi Snappy Chomwe Chachitika? Kwa nthawi yayitali, takhala tikulephera kudziwa ngati "chinthu chomata chikukakamira" kapena ngati "chinthu chosavuta chikugwedezeka" popanda kudalira IntersectionObserver hacks. Chrome 133 idayambitsa mafunso amtundu wa mpukutu, kutilola kuti tifunse mafunso awa momveka bwino. Pokhazikitsa mtundu wa chidebe: scroll-state, tsopano titha kukongoletsa ana kutengera ngati ali okakamira, osweka, kapena kusefukira. Uku ndi kuwongolera kwakukulu kwa "moyo wabwino" womwe ndakhala ndikudikirira mwachidwi kuyambira Tsiku la CSS 2023. Zasintha kwambiri popeza tikuthanso kuwona komwe mipukutu ikupita, wokongola! Kwa chitsanzo chosavuta: titha kugwiritsa ntchito mthunzi pamutu pokhapokha ngati ukumamatira pamwamba pa malo owonera: .chotengera chamutu { mtundu wa chidebe: mpukutu-boma; udindo: zomata; pamwamba: 0;
mutu { kusintha: bokosi-mthunzi 0.5s kumasuka; /* Funso limayang'ana momwe chidebecho chilili */ @container scroll-state(yokakamira: pamwamba) { bokosi-mthunzi: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Chiwonetsero: Mutu womata womwe umangogwiritsa ntchito mthunzi ukamatira.
Onani mitu ya Pen Sticky yokhala ndi funso la scroll-state, ndikuwona ngati chinthu chomatacho chamamatira [pamafoloko] ndi utilitybend.
Chiwonetsero: Mndandanda wa Pokémon-themed womwe umagwiritsa ntchito mafunso a scroll-state kuphatikiza ndi nangula kuti asunthire chimango pamwamba pa zilembo zomwe zadutsidwa.
Onani funso la Pen Scroll-state kuti muwone kuti ndi chinthu chiti chomwe chajambulidwa ndi CSS, Pokemon version [yafoloko] ndi utilitybend. Kukonzekera kwa Ergonomics: Logic Mu CSS Gawo la "Optimized Ergonomics" la CSS Wrapped limawunikira zinthu zomwe zimapangitsa kuti ntchito yathu ikhale yabwino. Zinthu zitatu zimawoneka ngati zosintha momwe timalembera zomveka:
if() StatementsTikupeza zovomerezeka mu CSS. If() ntchito imagwira ntchito ngati ternary opareta pama stylesheets, zomwe zimatilola kugwiritsa ntchito mfundo zotengera media, chithandizo, kapena mafunso amtundu wamkati. Izi zimachepetsa kufunika kwa verbose @media blocks pakusintha kwachinthu chimodzi. @function functionTitha kusuntha malingaliro kupita kumalo ena, zomwe zimapangitsa kuti pakhale mafayilo oyeretsa, mawonekedwe enieni amoyo. sibling-index() ndi sibling-count()Ntchito zowerengera mitengozi zimathetsa nkhani ya makanema ojambula modabwitsa kapena masitayelo kutengera kukula kwa mndandanda. Monga ndidasanthula abale a Styling omwe ali ndi CSS sizinakhalepo zophweka, izi zimachotsa kufunikira kokhala ndi zida zolimba (monga --index: 1) mu HTML yathu.
Chitsanzo: Kuwerengera Maonekedwe Tsopano titha kulemba mwachidule masamu. Mwachitsanzo, kuchititsa makanema ojambula pamakhadi omwe akulowa pazenera kumakhala kocheperako: .khadi-chotengera > * { makanema ojambula: kuwulula 0.6s omasuka kupita patsogolo; /* Palibenso zosintha zamanja --index! */ kuchedwa kwa makanema: calc(m'bale-index() * 0.1s); }
Ndidayesanso kugwiritsa ntchito izi limodzi ndi trigonometry kuti ndiike zinthu mozungulira popanda JavaScript.
Chiwonetsero: Makanema odabwitsa a makadi mwamphamvu.
Onani makhadi a Pen Stagger pogwiritsa ntchito sibling-index() [forked] ndi utilitybend.
Chiwonetsero: Kuyika zinthu mozungulira bwino pogwiritsa ntchito index ya abale, abale, ndi CSS @function yatsopano.
Onani Cholembera Chozungulira pogwiritsa ntchito index ya abale, chiwerengero cha abale ndi ntchito [zopangidwa] ndi utilitybend. Mndandanda Wanga Wochita wa CSS: Zomwe Sindingathe Kudikirira Kuti Ndiyese Ngakhale ndakhala ndikugwira ntchito yosema zisankho ndikusintha, lipoti la "CSS Wrapped 2025" lili ndi zinthu zina zabwino zomwe sindinakhalepo ndi mwayi woziwotcha mu CodePen pano. Izi ndizapamwamba pamndandanda wanga wazoyeserera kotsatira: Mafunso a Anchored Container Ndinagwiritsa ntchito CSS Anchor Positioning pa mabatani omwe ali muwonetsero yanga ya carousel, koma "CSS Wrapped" ikuwonetseratukusinthika kwa izi: Mafunso a Anchored Container. Izi zimathetsa vuto lomwe tonse takhala nalo ndi zida: ngati msakatuli atembenuza chida kuchokera pamwamba mpaka pansi chifukwa cha zovuta za danga, "muvi" nthawi zambiri umakhala ukuloza njira yolakwika. Ndi mafunso a chidebe chozikika (@container anchored(fallback: flip-block)), titha kupanga mawonekedwe potengera komwe msakatuli wasankha. Nested View Transition Groups View Transitions wakhala kusintha, koma anabwera ndi malonda enieni: iwo anaphwasula mtengo wa element, womwe nthawi zambiri umaswa masinthidwe a 3D kapena kusefukira: kopanira. Nthawi zonse ndimakhala ndikumverera kuti ndikusowa chinachake, ndipo ili likhoza kukhala yankho. Pogwiritsa ntchito view-transition-group: pafupi kwambiri, titha kupanga zisa zamagulu pakati pawo. Izi zimatithandizira kukhalabe ndi zotsatira zodula kapena kusintha kwa 3D panthawi ya kusintha - chinthu chomwe sichinali kotheka chifukwa zinthuzo zidakwezedwa pamwamba. .card img { view-kusintha-dzina: chithunzi; view-transition-gulu: lapafupi; /* Khalani ndi zisa! */ }
Kujambula ndi Mawonekedwe Pomaliza, ergonomist mwa ine akuyang'ana kuyesa Text Box Trim, yomwe imalonjeza kuti ichotsa malo oyera omwe amakwiyitsa pamwamba ndi pansi palemba (otsogolera) kuti pamapeto pake akwaniritse kulumikizana kolunjika. Ndipo kwa mbali yolenga, mawonekedwe a ngodya ndi mawonekedwe () ntchito ikutsegula mapangidwe osakhala akona, kulola "squaricles" ndi njira zovuta zomwe zimayankha kumitundu ya CSS. Izi zikunenedwa, sindingathe kudikira kukhala ndi mapangidwe odzaza ndi squircles! Tsogolo Lachiyembekezo Tikuwona dziko lomwe CSS ikutha kuthana ndi malingaliro, boma, ndi zochitika zovuta zomwe kale zinali za JavaScript. Zinthu monga moveBefore (kusunga DOM state for iframes/videos) ndi attr() (kugwiritsa ntchito mitundu yopitilira zingwe zamitundu ndi ma gridi) zimatsimikizira izi. Ngakhale zina mwazinthuzi ndizoyesera kapena zenizeni za Chrome, kukwera kwake sikungatsutsidwe. Tiyenera kuyembekezera thandizo lopitilira asakatuli onse kudzera munjira ngati Interop kuwonetsetsa kuti izi zizikhala zoyambira. Izi zikunenedwa, kukhala ndi injini zakusaka ndikofunikira monga kukhala ndi zinthu zonsezi mu "Chrome poyamba". Zatsopanozi ziyenera kukambidwa, kusinthidwa, ndi kuyesedwa musanalowe mu msakatuli. Ndi mphindi yabwino kwambiri kulowa mu CSS. Sitikungopanganso zikalata zokha; tikupanga mapulogalamu amphamvu, owoneka bwino, komanso olimba ndi zida zakubadwa zomwe ndizamphamvu kuposa kale. Tiyeni tipite ndi nyengo yatsopanoyi ndikufalitsa mawu. Iyi ndi CSS Yokutidwa!
