Idan zan raba juyin halittar CSS zuwa nau'ikan, mun wuce nisa fiye da kwanakin da kawai muka nemi radius kan iyaka don jin kamar muna rayuwa a nan gaba. A halin yanzu muna rayuwa a lokacin da dandamali ke ba mu kayan aikin da ba wai kawai tweak Layer na gani ba, amma a zahiri sake fasalin yadda muke keɓance mu'amala. Ina tsammanin adadin abubuwan da aka sanar a cikin 2024 ba za a iya ɗauka ba. Ban taba yin kuskure da farin ciki ba.
Ƙungiyar Chrome ta "CSS Wrapped 2025" ba jerin abubuwa ba ne kawai; bayani ne don ingantaccen gidan yanar gizo na asali. A matsayina na wanda ya share shekaru biyu yana tattara waɗannan juyin halitta - daga ayyana zamanin “CSS5” zuwa rikitattun kayan aikin shimfidawa na zamani - Na sami kaina ina kallon kuɗaɗen wannan shekara tare da jin daɗi. Muna ganin canji zuwa "Ergonomics Ingantawa" da "Ma'amala na gaba" wanda ke ba mu damar dakatar da yaƙi da lambar kuma mu fara sassaƙa musaya a cikin yanayin yanayin su.
A cikin wannan labarin, zaku iya samun cikakkiyar kallon abubuwan da suka dace daga rahoton Chrome, wanda aka gani ta hanyar ruwan tabarau na gwaje-gwaje na kwanan nan da fatan makomar dandamali.
Juyin Juyin Halitta: A ƙarshe, Zaɓin Ƙarƙashin Ƙarƙashin Ƙasa
Shekaru da yawa, mun dogara da manyan ɗakunan karatu na JavaScript zuwa salo mai sauƙi, "matsalar shekaru goma" wanda dandamali ya warware a ƙarshe. Kamar yadda na yi cikakken bayani a cikin zurfin nutsewa cikin tarihin zaɓin da za a iya daidaitawa (da labarai masu alaƙa), wannan doguwar hanya ce da ta haɗa da Buɗe UI, sunaye na keɓaɓɓu kamar
Kyakkyawan ƙari don ba da izinin abun ciki mai arziƙi a cikin zaɓuɓɓuka, kamar hotuna ko tutoci, yana da daɗi da yawa. Za mu iya ƙirƙirar kowane irin zaɓaɓɓu a zamanin yau:
Demo: Na ƙirƙiri wani nuni na Poké-adventure yana nuna yadda sabon
Dubi zaɓin alƙalami wanda za'a iya daidaita shi tare da hotuna a cikin zaɓuɓɓukan da abun cikin da aka zaɓa [mai yatsa] ta utilitybend.
Demo: Cikakken kallon salo na zaɓi tare da abubuwan ƙira kawai.
Dubi zaɓin Alƙalami wanda za'a iya gyarawa tare da abubuwan ƙirƙira kawai [mai yatsa] ta utilitybend.
Demo: Ko za ku iya harba shi da kyau tare da wannan zaɓin zaɓi na Menu ta amfani da ƙungiyoyin ficewa.
Duba Alƙalami Menu na Zaɓa na ainihi tare da ƙungiyoyin gama-gari [cokali] ta utilitybend. Wannan fasalin shi kaɗai yana nuna babban canji a yadda za mu gina fom, rage dogaro da bashi na fasaha. Alamar Gungurawa da Mutuwar Carousel na JavaScript Ƙirƙirar carousels ya kasance a tarihi ya kasance yanki mai saɓani tsakanin masu haɓakawa da abokan ciniki. Abokan ciniki suna son su, masu haɓakawa suna jin tsoron JavaScript ɗin da ake buƙata don sa su sami dama da yin aiki. Isowar :: gungura-alama da :: gungura-button() abubuwan ƙira suna canza wannan ƙarfin gaba ɗaya. Waɗannan fasalulluka suna ba mu damar ƙirƙirar ɗigon kewayawa da maɓallan gungurawa kawai tare da CSS, an haɗa su ta asali zuwa kwandon gungurawa. Kamar yadda na rubuta a shafina, wannan shine Soyayya a farkon zamewar. Ikon ƙirƙirar cikakken aiki, mai sauƙi mai sauƙi ba tare da layi ɗaya na JavaScript ba kawai dace ba; nasara ce ga aiki. Akwai wasu abubuwan damuwa game da wannan fasalin, kuma kodayake waɗannan suna da inganci, akwai yuwuwar samun hanyar mu masu haɓakawa mu sa ta yi aiki. Abu mai kyau shine, duk waɗannan canje-canjen UI suna sa shi sauƙin sauƙi fiye da magudin DOM na al'ada da ja a kusa da alamun aria, amma na digress… Za mu iya yanzu rukuni alamomi ta atomatik ta amfani da gungura-marker-rukuni da kuma salon maɓallan ta amfani da matsayi na anga don sanya su daidai inda muke so.
.carousel { ambaliya-x: auto; gungura-alama-ƙungiyar: bayan; /* Yana ƙirƙirar akwati don ɗigo */
/* Create the buttons */ &:: gungura-maballin (ƙarshen layi),&:: gungura-button (farawa cikin layi) { abun ciki:""; matsayi: cikakke; /* Yi amfani da matsayar anka don sanya su tsakiya */ matsayi-anga: --carousel; saman: anga (tsakiyar); }
/* Ƙirƙiri alamomi akan yara */ div { &:: alamar alama { abun ciki:""; nisa: 24px; iyaka-radius: 50%; siginan kwamfuta: nuni; } /* Hana alamar mai aiki */ & :: gungura-alama: manufa-yanzu { bango: fari; } } }
Demo: Gwajina na ƙirƙirar carousel kawai daga HTML da CSS, ta amfani da sanya maɓallan anka.
Duba Pen Carousel Pure HTML da CSS [forked] ta utilitybend.
Demo: Sake yin slick slider na gidan yanar gizo ta amfani da attr() don jawo hotunan baya da kuzari cikin alamomi.
Duba Pen Webshop slick slick slider remake a cikin CSS [forked] ta utilitybend. Tambayoyin Jiha: Abin Dake Makale? Abin Da Ya Kamata Ya Faru? Na dogon lokaci, mun rasa ikon sanin ko "abu mai ɗaure ya makale" ko kuma idan "an kama wani abu" ba tare da dogaro da hacks na IntersectionObserver ba. Chrome 133 ya gabatar da tambayoyin gungura-jihar, yana ba mu damar yin tambaya ga waɗannan jihohin a fayyace. Ta hanyar saita nau'in kwantena: gungura-jihar, yanzu za mu iya salon yara bisa la'akari da ko sun makale, an kama su, ko kuma sun cika. Wannan babban ingantaccen “ingantacciyar rayuwa” ne wanda nake ɗokin jira tun ranar CSS 2023. Har ma ya samo asali da yawa tunda muna iya ganin jagorar gungurawa, kyakkyawa! Ga misali mai sauƙi: a ƙarshe za mu iya amfani da inuwa zuwa kan taken kawai lokacin da ainihin manne a saman kallon kallo: .kwantin kai { akwati-nau'in: gungura-jihar; matsayi: m; saman: 0;
kai { miƙa mulki: akwatin-inuwa 0.5s sauƙi-fita; /* Tambayar tana duba yanayin akwati */ @container gungura-jihar (manne: saman) { akwatin-inuwa: rgba (0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Kan kai mai ɗanko wanda ke shafa inuwa kawai lokacin da ta makale.
Dubi rubutun kan layi na Pen Sticky tare da neman gungurawa-jihar, duba idan abin da ke makale ya makale [cokali] ta utilitybend.
Demo: Jerin jigogi na Pokémon wanda ke amfani da tambayoyin gungurawa-jihar haɗe tare da matsayar anka don matsar da firam akan halin da aka kama a halin yanzu.
Dubi tambaya ta Pen Gungura-jihar don bincika abin da aka ɗauka tare da CSS, sigar Pokemon [forked] ta utilitybend. Ingantaccen Ergonomics: Logic A CSS Sashen "Ergonomics Ingantacce" na CSS Wrapped yana ba da ƙarin fasaloli waɗanda ke sa ayyukanmu su zama masu hankali. Fasaloli guda uku sun yi fice a matsayin masu canza yadda muke rubuta dabaru:
if() Bayanin A ƙarshe Muna samun sharuɗɗa a cikin CSS. Ayyukan if() yana aiki kamar mai aiki na ternary don zanen zane, yana ba mu damar amfani da ƙima bisa ga kafofin watsa labarai, tallafi, ko tambayoyin salon layi. Wannan yana rage buƙatar verbose @media tubalan don canje-canjen dukiya guda ɗaya. Ayyukan @aiki A ƙarshe za mu iya matsar da wasu dabaru zuwa wani wuri daban, haifar da wasu fayiloli masu tsabta, ingantaccen yanayin rayuwa. sibling-index() da sibling-count() Waɗannan ayyuka na kirga bishiyar suna warware matsalar raye-rayen raye-raye ko salon abubuwa bisa girman jeri. Kamar yadda na bincika a cikin Styling siblings tare da CSS bai taɓa yin sauƙi ba, wannan yana kawar da buƙatar ƙayyadaddun kaddarorin al'ada (kamar --index: 1) a cikin HTML ɗin mu.
Misali: Ƙididdiga Tsari Yanzu za mu iya rubuta taƙaitaccen dabarar lissafi. Misali, tada raye-raye don katunan shigar da allo ya zama maras muhimmanci: .kati-kwantena > * { rayarwa: bayyana 0.6s sauƙi-fitar gaba; /* Babu ƙarin jagora --masuman canji! */ jinkiri-jinkiri: calc (sibling-index () * 0.1s); }
Na ma gwada yin amfani da waɗannan ayyuka tare da trigonometry don sanya abubuwa a cikin cikakkiyar da'irar ba tare da kowane JavaScript ba.
Demo: raye-rayen katin ban mamaki da kuzari.
Duba katunan Pen Stagger ta amfani da sibling-index() [forked] ta utilitybend.
Demo: Sanya abubuwa a cikin cikakkiyar da'irar ta amfani da sibling-index, sibling-count, da sabon fasalin CSS @aiki.
Dubi da'irar Alƙalami ta amfani da fihirisar 'yan'uwa, ƙidayar 'yan'uwa da ayyuka [mai yatsa] ta utilitybend. Jerin abubuwan Yi na CSS: Abubuwan da Ba zan iya Jiran Gwadawa ba Yayin da nake shagaltuwa da zaɓen zaɓe da sauye-sauye, rahoton "CSS Wrapped 2025" yana cike da wasu kyawawan abubuwan da ban sami damar kunna wuta a CodePen ba tukuna. Waɗannan suna kan jerin sunayena don gwaje-gwaje na na gaba: Tambayoyin Kwantena Mai Rufe Na yi amfani da CSS Anchor Positioning don maɓallan da ke cikin demo carousel dina, amma "CSS Wrapped" yana ba da haske.Juyin Halitta na wannan: Anchored Container Queries. Wannan yana magance matsalar da muka samu duka tare da bayanan kayan aiki: idan mai binciken ya juye tip ɗin kayan aiki daga sama zuwa ƙasa saboda ƙarancin sararin samaniya, “kibiya” sau da yawa tana tsayawa tana nuna hanya mara kyau. Tare da anga tambayoyin akwati (@container anchored(fallback: flip-block)), za mu iya salon fasalin kashi dangane da matsayin koma baya da mai binciken ya zaɓa. Ƙungiyoyin Canja wurin Nested View Duba Canje-canje sun kasance juyin juya hali, amma sun zo tare da takamaiman ciniki: sun daidaita bishiyar, wanda sau da yawa ya karya 3D canza ko ambaliya: shirin. A koyaushe ina jin cewa yana rasa wani abu, kuma wannan na iya zama amsar kawai. Ta hanyar amfani da ra'ayi-transition-group: mafi kusa, za mu iya ƙarasa ƙungiyoyin miƙa mulki a tsakanin juna. Wannan yana ba mu damar kiyaye tasirin tsinkewa ko jujjuyawar 3D yayin canji - wani abu wanda a baya ba zai yiwu ba saboda an ɗaga abubuwan har zuwa matakin sama. .kati img { view-transition-name: hoto; rukunin ra'ayi-canzawa: mafi kusa; /* Ajiye shi! */ }
Rubutun rubutu da Siffofinsa A ƙarshe, ergonomist a cikina yana ƙaiƙayi don gwada Akwatin Rubutu, wanda yayi alƙawarin cire wannan ƙarin farin sarari a sama da ƙasa abun ciki na rubutu (jagora) don cimma cikakkiyar daidaitawa a tsaye. Kuma ga gefen ƙirƙira, siffar kusurwa da siffar () aikin suna buɗewa ba tare da rectangular shimfidu ba, suna ba da izinin "squaricles" da hanyoyi masu rikitarwa waɗanda ke amsa masu canji na CSS. Wannan ana cewa, ba zan iya jira don samun zane mai cike da squircles ba! Kyakkyawan Makoma Muna shaida duniyar da CSS ke zama mai iya sarrafa dabaru, yanayi, da hadaddun hulɗar da suka kasance na JavaScript a baya. Siffofin kamar motsiBefore (kiyaye jihar DOM don iframes/bidiyo) da kuma attr () (amfani da nau'ikan da suka wuce kirtani don launuka da grids) suna ƙara tabbatar da wannan gaskiyar. Yayin da wasu daga cikin waɗannan fasalulluka a halin yanzu na gwaji ne ko keɓance ga Chrome, ba za a iya musun ƙarfin ƙarfin ba. Dole ne mu yi fatan samun ci gaba da goyan baya a cikin duk masu bincike ta hanyar tsare-tsare kamar Interop don tabbatar da cewa waɗannan damar sun zama tushen tushe. Wannan ana cewa, samun injunan bincike yana da mahimmanci kamar samun duk waɗannan abubuwan ban mamaki a cikin "Chrome farko". Waɗannan sabbin fasalulluka suna buƙatar tattaunawa, ƙulla su, da kuma gwada su kafin saukowa cikin masu bincike. Lokaci ne mai ban sha'awa don shiga CSS. Ba mu zama takardun salo kawai ba; muna ƙirƙira ƙaƙƙarfan aikace-aikace, ergonomic, da ƙaƙƙarfan aikace-aikace tare da kayan aiki na asali wanda ya fi kowane lokaci ƙarfi. Bari mu tafi tare da wannan sabon zamani kuma mu yada kalma. Wannan CSS Nade ne!
