Iwapo ningegawanya mabadiliko ya CSS katika kategoria, tumesonga zaidi ya siku ambazo tuliuliza kwa urahisi eneo la mpaka ili kuhisi kama tunaishi katika siku zijazo. Kwa sasa tunaishi katika wakati ambapo jukwaa linatupa zana ambazo hazibadilishi tu safu ya kuona, lakini kimsingi hufafanua jinsi tunavyosanifu miingiliano. Nilidhani idadi ya vipengele vilivyotangazwa mwaka wa 2024 haviwezi kuongezwa. Sijawahi kukosea kwa furaha.
Timu ya Chrome "CSS Iliyofungwa 2025" sio tu orodha ya vipengele; ni manifesto ya wavuti inayobadilika, asili. Kama mtu ambaye ametumia miaka kadhaa kurekodi mabadiliko haya - kutoka kufafanua enzi za "CSS5" hadi ugumu wa huduma za kisasa za mpangilio - ninajikuta nikitazama umaliziaji wa mwaka huu kwa msisimko mkubwa. Tunaona mabadiliko kuelekea "Optimized Ergonomics" na "Maingiliano ya kizazi kipya" ambayo huturuhusu kuacha kupigana na kanuni na kuanza kuchora miingiliano katika hali yao ya asili.
Katika makala haya, unaweza kupata mwonekano wa kina wa vipengele maarufu kutoka kwa ripoti ya Chrome, vinavyotazamwa kupitia lenzi ya majaribio yangu ya hivi majuzi na matumaini ya mustakabali wa jukwaa.
Mapinduzi ya Kipengele: Hatimaye, Chaguo Asilia Inayoweza Kubinafsishwa
Kwa miaka mingi, tumekuwa tukitegemea maktaba nzito za JavaScript kutengeneza menyu kunjuzi, "tatizo la miongo kadhaa" ambalo mfumo huo umesuluhisha hatimaye. Kama nilivyoeleza kinagaubaga katika historia ya chaguo linaloweza kubinafsishwa (na vifungu vinavyohusiana), hii imekuwa njia ndefu inayohusisha UI wazi, majina ya kubahatisha baiskeli kama
Nyongeza nzuri ya kuruhusu maudhui tele ndani ya chaguo, kama vile picha au bendera, ni ya kufurahisha sana. Tunaweza kuunda aina zote za chaguo siku hizi:
Onyesho: Nimeunda onyesho la matukio ya Poké inayoonyesha jinsi kipengele kipya cha
Angalia kalamu A inayoweza kugeuzwa kukufaa iliyo na picha ndani ya chaguo na maudhui yaliyochaguliwa [yaliyogawanyika] na ukanda wa matumizi.
Onyesho: Mtazamo wa kina wa kuweka mtindo uliochaguliwa kwa kutumia vipengele bandia pekee.
Angalia kalamu A inayoweza kubinafsishwa iliyo na vipengele vya uwongo pekee [zilizogawanyika] na upinde wa matumizi.
Onyesho: Au unaweza kuipandisha daraja kwa onyesho hili la uteuzi wa Menyu kwa kutumia optgroups.
Tazama Kalamu Chaguo halisi la Menyu iliyo na optgroups [zilizogawanyika] na ukanda wa matumizi. Kipengele hiki pekee kinaashiria mabadiliko makubwa katika jinsi tutakavyounda fomu, kupunguza utegemezi na deni la kiufundi. Alama za Sogeza na Kifo cha Jarida la JavaScript Uundaji wa jukwa kihistoria umekuwa msuguano kati ya wasanidi programu na wateja. Wateja wanazipenda, wasanidi programu wanaogopa JavaScript inayohitajika ili kuzifanya ziweze kufikiwa na kutenda. Kuwasili kwa ::scroll-marker na ::scroll-button() pseudo-elements hubadilisha nguvu hii kabisa. Vipengele hivi huturuhusu kuunda nukta za usogezaji na vitufe vya kusogeza kwa kutumia CSS pekee, vilivyounganishwa asili kwenye kontena la kusogeza. Kama nilivyoandika kwenye blogu yangu, hii ilikuwa Upendo mwanzoni mwa slaidi. Uwezo wa kuunda slider inayofanya kazi kikamilifu, inayoweza kupatikana bila mstari mmoja wa JavaScript sio rahisi tu; ni ushindi kwa utendaji. Kuna baadhi ya masuala ya ufikivu karibu na kipengele hiki, na ingawa haya ni halali, kunaweza kuwa na njia kwa sisi wasanidi programu kuifanya ifanye kazi. Jambo zuri ni kwamba, mabadiliko haya yote ya UI yanaifanya iwe rahisi zaidi kuliko upotoshaji maalum wa DOM na kuburuta karibu na vitambulisho vya aria, lakini mimi huacha… Sasa tunaweza kupanga vialamisho kiotomatiki kwa kutumia kikundi-alama-kusogeza na kuweka mtindo wa vitufe kwa kutumia nafasi ya nanga ili kuviweka pale tunapotaka.
.jukwa { kufurika-x: otomatiki; scroll-marker-group: baada ya; /* Huunda chombo cha vitone */
/* Unda vifungo */ &::kitufe cha kusogeza (mwisho-mwisho),&::kitufe cha kusogeza(kuanza-ndani) { yaliyomo: ""; nafasi: kabisa; /* Tumia nafasi ya nanga ili kuziweka katikati */ nafasi-nanga: --carousel; juu: nanga (katikati); }
/* Unda alama kwa watoto */ div { &::alama ya kusogeza { yaliyomo: ""; upana: 24px; mpaka-radius: 50%; mshale: pointer; } /* Angazia alama inayotumika */ &::scroll-marker:target-current { background: nyeupe; } } }
Onyesho: Jaribio langu la kuunda jukwa nje ya HTML na CSS, kwa kutumia nafasi ya nanga kuweka vitufe.
Tazama HTML Safi ya Kalamu Carousel na CSS [iliyogawanyika] na upinde wa matumizi.
Onyesho: Urekebishaji wa kitelezi mjanja sana wa Webshop kwa kutumia attr() kuvuta taswira za usuli kwa nguvu kwenye vialamisho.
Tazama urekebishaji wa slaidi mjanja wa Pen Webshop katika CSS [iliyogawanyika] na ukanda wa matumizi. Maswali ya Jimbo: Kitu Kinata Kimekwama? Kitu cha Snappy Kimepigwa? Kwa muda mrefu, tumekosa uwezo wa kujua ikiwa "kitu nata kimekwama" au ikiwa "kipengee cha haraka kimepigwa" bila kutegemea udukuzi wa IntersectionObserver. Chrome 133 ilianzisha hoja za hali ya kusogeza, ikituruhusu kuuliza maswali haya kwa ufasaha. Kwa kuweka aina ya chombo: hali ya kusogeza, sasa tunaweza kuweka mtindo wa watoto kulingana na kama wamekwama, wamebanwa, au wamefurika. Huu ni uboreshaji mkubwa wa "ubora wa maisha" ambao nimekuwa nikingojea kwa hamu tangu Siku ya CSS 2023. Imebadilika sana kwa vile tunaweza pia kuona mwelekeo wa kusogeza, kupendeza! Kwa mfano rahisi: hatimaye tunaweza kuweka kivuli kwenye kichwa tu wakati kinashikamana na sehemu ya juu ya kituo cha kutazama: .kichwa-chombo { chombo-aina: kitabu-hali; msimamo: fimbo; juu: 0;
kichwa { mpito: sanduku-kivuli 0.5s urahisi-nje; /* Hoja hukagua hali ya chombo */ @container scroll-state(imekwama: juu) { sanduku-kivuli: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Onyesho: Kichwa cha kunata ambacho hutumika tu kivuli wakati kimekwama.
Tazama vichwa vya Kunata kalamu vilivyo na hoja ya hali ya kusogeza, ukiangalia ikiwa kipengele nata kimekwama [kimegawanywa] na upinde wa matumizi.
Onyesho: Orodha yenye mandhari ya Pokemon inayotumia hoja za hali ya kusogeza pamoja na uwekaji nanga ili kusogeza fremu juu ya herufi iliyopigwa kwa sasa.
Tazama hoja ya hali ya kusogeza kwa kalamu ili kuangalia ni kipengee kipi kimenaswa kwa CSS, toleo la Pokemon [lililogawanyika] na upinde wa matumizi. Ergonomics Iliyoboreshwa: Mantiki Katika CSS Sehemu ya "Optimized Ergonomics" ya CSS Iliyofungwa huangazia vipengele vinavyofanya utiririshaji wetu wa kazi uwe rahisi zaidi. Vipengele vitatu vinaonekana kama mabadiliko ya jinsi tunavyoandika mantiki:
if() Taarifa Hatimaye tunapata masharti katika CSS. If() chaguo za kukokotoa hufanya kama opereta wa mwisho wa laha za mitindo, huturuhusu kutumia thamani kulingana na midia, usaidizi, au maswali ya mtindo ndani ya mstari. Hii inapunguza hitaji la vizuizi vya kitenzi @media kwa mabadiliko ya sifa moja. @function functionsHatimaye tunaweza kuhamisha baadhi ya mantiki hadi mahali tofauti, na hivyo kusababisha baadhi ya faili safi, ubora halisi wa kipengele cha maisha. sibling-index() na sibling-count()Hizi za kuhesabu miti hutatua suala la uhuishaji wa ajabu au vipengee vya mitindo kulingana na ukubwa wa orodha. Kama nilivyogundua katika Styling ndugu na CSS haijawahi kuwa rahisi, hii inaondoa hitaji la kuweka msimbo maalum (kama --index: 1) katika HTML yetu.
Mfano: Kuhesabu Mipangilio Sasa tunaweza kuandika fomula fupi za hisabati. Kwa mfano, kushtua uhuishaji kwa kadi zinazoingia kwenye skrini inakuwa jambo dogo: .chombo cha kadi > * { uhuishaji: onyesha 0.6s urahisi-nje mbele; /* Hakuna vigeuzo vya mwongozo --index! */ kucheleweshwa kwa uhuishaji: calc(sibling-index() * 0.1s); }
Nilijaribu hata kutumia kazi hizi pamoja na trigonometry kuweka vitu kwenye mduara mzuri bila JavaScript yoyote.
Onyesho: Uhuishaji wa kadi za kushangaza kwa nguvu.
Tazama kadi za Pen Stagger kwa kutumia sibling-index() [forked] na utilitybend.
Onyesho: Kuweka vipengee katika mduara mzuri kwa kutumia faharasa ya ndugu, hesabu ya ndugu, na kipengele kipya cha CSS @function.
Tazama Kalamu Mduara ukitumia faharasa ya ndugu, hesabu ya ndugu na vitendakazi [zilizogawanyika] na upinde wa matumizi. Orodha Yangu ya Mambo ya Kufanya ya CSS: Vipengele ambavyo Siwezi Kusubiri Ili Kujaribu Ingawa nimekuwa nikishughulika na uchongaji wa chaguo na mabadiliko, ripoti ya "CSS Iliyofungwa 2025" imejaa vitu vingine vya kupendeza ambavyo bado sijapata nafasi ya kuzitumia katika CodePen. Hizi ni za juu kwenye orodha yangu kwa majaribio yangu yafuatayo: Hoja za Kontena Zilizotiwa nanga Nilitumia CSS Anchor Positioning kwa vitufe kwenye onyesho langu la jukwa, lakini "CSS Iliyofungwa" inaangaziamageuzi ya haya: Hoja za Kontena Zilizozingirwa. Hili hutatua tatizo ambalo sote tumekuwa nalo na vidokezo vya zana: ikiwa kivinjari kitageuza ncha ya zana kutoka juu hadi chini kwa sababu ya vikwazo vya nafasi, mara nyingi "mshale" hubakia ukielekeza njia isiyo sahihi. Kwa hoja za kontena zilizoimarishwa (@container anchored(fallback: flip-block)), tunaweza kutengeneza kipengee kulingana na nafasi ambayo kivinjari kilichagua. Vikundi vya Mpito vya Kutazama Vilivyo Nested Tazama Mabadiliko yamekuwa mapinduzi, lakini yalikuja na ubadilishanaji mahususi: yaliboresha mti wa kipengele, ambao mara nyingi ulivunja mageuzi ya 3D au kufurika: klipu. Siku zote nilikuwa na hisia kwamba ilikuwa inakosa kitu, na hii inaweza kuwa jibu tu. Kwa kutumia view-transition-group: karibu zaidi, hatimaye tunaweza kuanzisha vikundi vya mpito ndani ya kila kimoja. Hii huturuhusu kudumisha madoido ya kukata au mizunguko ya 3D wakati wa mpito - jambo ambalo halikuwezekana hapo awali kwa sababu vipengele viliinuliwa hadi kiwango cha juu. .kadi img { mtazamo-mpito-jina: picha; kikundi cha mtazamo-mpito: karibu zaidi; /* Weka kiota! */ }
Uchapaji na Maumbo Hatimaye, mtaalamu wa ergonomist ndani yangu anajaribu kujaribu Nakala Box Trim, ambayo inaahidi kuondoa nafasi nyeupe ya ziada juu na chini ya maudhui ya maandishi (inayoongoza) ili hatimaye kufikia usawa kamili wa wima. Na kwa upande wa ubunifu, umbo la kona na umbo () kazi hufungua mipangilio isiyo ya mstatili, kuruhusu "squaricles" na njia ngumu zinazojibu kwa vigezo vya CSS. Hiyo inasemwa, siwezi kungoja kuwa na muundo uliojaa squircles! Wakati Ujao Wenye Tumaini Tunashuhudia ulimwengu ambapo CSS inakuwa na uwezo wa kushughulikia mantiki, hali, na mwingiliano changamano ambao hapo awali ulikuwa wa JavaScript. Vipengele kama vile moveBefore (kuhifadhi hali ya DOM kwa iframe/video) na attr() (kutumia aina zaidi ya mifuatano ya rangi na gridi) huimarisha zaidi ukweli huu. Ingawa baadhi ya vipengele hivi kwa sasa ni vya majaribio au mahususi kwa Chrome, kasi hiyo haiwezi kukanushwa. Ni lazima tutegemee usaidizi unaoendelea katika vivinjari vyote kupitia mipango kama vile Interop ili kuhakikisha kuwa uwezo huu unakuwa msingi. Hiyo inasemwa, kuwa na injini za kivinjari ni muhimu sawa na kuwa na vipengele hivi vyote vya kupendeza katika "Chrome kwanza". Vipengele hivi vipya vinahitaji kujadiliwa, kuchezewa, na kujaribiwa kabla ya kuingia kwenye vivinjari. Ni wakati mzuri sana kuingia kwenye CSS. Hatutengenezi hati tu tena; tunaunda programu zinazobadilika, ergonomic, na thabiti kwa zana asilia ya zana ambayo ina nguvu zaidi kuliko hapo awali. Wacha tuende na enzi hii mpya na tueneze habari. Hii ni CSS Imefungwa!
