Agar men CSS evolyutsiyalarini toifalarga bo'ladigan bo'lsam, biz kelajakda yashayotgandek his qilish uchun chegara radiusini so'ragan kunlardan ancha uzoqlashdik. Biz hozirda platforma bizga vizual qatlamni o'zgartiribgina qolmay, balki interfeyslarni qanday yaratishimizni tubdan qayta belgilovchi vositalarni taqdim etayotgan bir paytda yashayapmiz. 2024-yilda e’lon qilingan xususiyatlar sonini oshirib bo‘lmaydi, deb o‘yladim. Men hech qachon bunchalik baxtsiz xato qilmaganman.
Chrome jamoasining "CSS Wrapped 2025" bu shunchaki xususiyatlar ro'yxati emas; bu dinamik, mahalliy veb uchun manifest. Ushbu evolyutsiyalarni hujjatlashtirishga bir necha yil sarflagan odam sifatida - "CSS5" davrlarini aniqlashdan tortib, zamonaviy maket yordamchi dasturlarigacha - men o'zimni bu yil yakuniga katta hayajon bilan qarayman. Biz "Optimallashtirilgan ergonomika" va "Keyingi avlod o'zaro ta'siri" tomon siljishni ko'rmoqdamiz, bu bizga kod bilan kurashishni to'xtatish va interfeyslarni tabiiy holatida haykaltaroshlik qilishni boshlash imkonini beradi.
Ushbu maqolada siz Chrome hisobotidagi diqqatga sazovor xususiyatlarni to'liq ko'rib chiqishingiz mumkin, ular mening so'nggi tajribalarim ob'ektivi orqali ko'rib chiqiladi va platformaning kelajagi haqidagi umidlarim.
Komponent inqilobi: Nihoyat, mahalliy moslashtirilgan tanlov
Ko'p yillar davomida biz ochiladigan menyularni shakllantirish uchun og'ir JavaScript kutubxonalariga tayandik, bu platforma nihoyat hal qilgan "o'n yillik muammo". Sozlanishi mumkin boʻlgan tanlash (va tegishli maqolalar) tarixiga chuqur shoʻngʻishda batafsil aytib oʻtganimdek, bu Open UI,
Tasvirlar yoki bayroqlar kabi variantlar ichida boy kontentga ruxsat berish uchun ajoyib qo'shimcha juda qiziqarli. Biz bugungi kunda barcha turdagi tanlovlarni yaratishimiz mumkin:
Namoyish: Men yangi
Utilitybend orqali opsiyalarning ichidagi tasvirlar va tanlangan tarkibni [forked] bilan moslashtirilgan qalamga qarang.
Namoyish: Faqat psevdo-elementlar bilan tanlangan uslubni har tomonlama ko'rib chiqish.
Utilitybend tomonidan faqat psevdo-elementlar [forked] bilan moslashtirilgan qalamni ko'ring.
Namoyish: Yoki optgroups yordamida ushbu Menyu tanlovi demosi bilan uni yuqori darajaga ko'tarishingiz mumkin.
Utilitybend tomonidan optgroups [forked] bilan Haqiqiy tanlash menyusi Penga qarang. Bu xususiyatning o'zi biz shakllarni qanday yaratishimiz, qaramlik va texnik qarzlarni kamaytirishimizdagi katta o'zgarishlardan dalolat beradi. Scroll markers va JavaScript karuselining o'limi Karusellarni yaratish tarixan ishlab chiquvchilar va mijozlar o'rtasidagi ishqalanish nuqtasi bo'lgan. Mijozlar ularni yaxshi ko'radilar, ishlab chiquvchilar ularni qulay va samarali qilish uchun zarur bo'lgan JavaScript-dan qo'rqishadi. ::scroll-marker va ::scroll-button() psevdoelementlarining kelishi bu dinamikani butunlay o'zgartiradi. Bu xususiyatlar navigatsiya nuqtalari va aylantirish tugmachalarini faqat CSS-dan foydalanib, aylantirish konteyneriga bog'langan holda yaratishga imkon beradi. Men o'z blogimda yozganimdek, bu birinchi slaydda sevgi edi. JavaScript-ning bir qatorisiz to'liq ishlaydigan, foydalanish mumkin bo'lgan slayderni yaratish qobiliyati shunchaki qulay emas; bu ishlash uchun g'alabadir. Bu xususiyat atrofida ba'zi qulaylik bilan bog'liq muammolar mavjud va ular to'g'ri bo'lsa ham, biz ishlab chiquvchilar uchun uni ishlashi uchun yo'l bo'lishi mumkin. Yaxshi tomoni shundaki, bu barcha UI o'zgarishlari buni maxsus DOM manipulyatsiyasi va ariya teglari atrofida sudrab borishdan ko'ra ancha osonlashtirmoqda, lekin men chekinaman ... Endi biz markerlarni aylantirish-marker-guruhi yordamida avtomatik ravishda guruhlashimiz va ularni kerakli joyga joylashtirish uchun langar joylashuvidan foydalangan holda tugmalarni shakllantirishimiz mumkin.
.karusel { overflow-x: avtomatik; aylantirish-marker-guruh: keyin; /* Nuqtalar uchun konteyner yaratadi */
/* tugmalarni yarating */ &:: aylantirish tugmasi (inline-end),&:: aylantirish tugmasi (inline-start) { tarkib: ""; pozitsiyasi: mutlaq; /* Ularni markazlashtirish uchun langar joylashuvidan foydalaning */ pozitsiya-langar: --karusel; tepa: langar (markazda); }
/* Bolalarga markerlar yarating */ div { &:: o'tish belgisi { tarkib: ""; kengligi: 24px; chegara radiusi: 50%; kursor: ko'rsatgich; } /* Faol markerni belgilang */ &:: aylantirish-marker: maqsad-joriy { fon: oq; } } }
Namoyish: Tugmalarni joylashtirish uchun langar joylashuvidan foydalangan holda faqat HTML va CSS-dan karusel yaratish tajribam.
Utilitybend tomonidan Pen Carousel Pure HTML va CSS [forked] ga qarang.
Namoyish: fon tasvirlarini dinamik ravishda markerlarga tortish uchun attr() yordamida veb-do'konning silliq slayder remeyki.
Utilitybend tomonidan CSS [forked]-da Pen Webshop slick slayder remeykiga qarang. Davlat so'rovlari: Yopishqoq narsa tiqilib qoldimi? Snappy narsa uzildimi? Bizda uzoq vaqt davomida IntersectionObserver xakerlariga tayanmasdan “yopishqoq narsa tiqilib qolgan” yoki “tezkor buyum uzilib qolgan” yoki yo‘qligini bilish qobiliyatiga ega emas edik. Chrome 133 o'tish holati so'rovlarini taqdim etdi, bu bizga ushbu holatlarni deklarativ tarzda so'rash imkonini beradi. Konteyner turi: o‘tish holatini o‘rnatish orqali biz endi bolalarning tiqilib qolgan, qisilgan yoki to‘lib toshganligiga qarab uslublashimiz mumkin. Bu 2023-yil CSS kunidan beri men intiqlik bilan kutayotgan ulkan “hayot sifati” yaxshilanishi. Hatto varaqning yo‘nalishini ham ko‘rishimiz mumkin bo‘lgani uchun u juda ko‘p rivojlandi, yoqimli! Oddiy misol uchun: biz nihoyat sarlavhaga soyani faqat ko'rish oynasining yuqori qismiga yopishib qolganda qo'llashimiz mumkin: .header-container { konteyner turi: aylantirish holati; pozitsiyasi: yopishqoq; yuqori: 0;
sarlavha { o'tish: quti-soya 0,5 s qulaylik; /* So‘rov konteyner holatini tekshiradi */ @container scroll-state (tiqilib qolgan: tepa) { quti soyasi: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Namoyish: Yopishqoq sarlavha, u faqat yopishib qolganda soyani qo'llaydi.
Yopishqoq element utilitybend tomonidan yopishtirilganligini tekshirib ko'ring.
Namoyish: Pokemonga oid roʻyxat, bu roʻyxatda aylanib oʻtish holati soʻrovlari va langar joylashuvi bilan birlashtirilgan holda kadrni hozirda olingan belgi ustiga siljitish mumkin.
Qaysi element utilitybend tomonidan CSS, Pokemon versiyasi [forked] bilan uzilganligini tekshirish uchun Pen Scroll-state so'roviga qarang. Optimallashtirilgan ergonomika: CSS-da mantiq CSS Wrapped-ning "Optimallashtirilgan ergonomika" bo'limi ish oqimlarimizni yanada intuitiv qiladigan xususiyatlarni ta'kidlaydi. Mantiqni qanday yozishimiz uchun uchta xususiyat o'zgarib turadi:
if() bayonotlari Biz nihoyat CSS-da shartlarni olamiz. If() funksiyasi uslublar jadvallari uchun uchlik operatori kabi ishlaydi, bu bizga media, qo'llab-quvvatlash yoki uslub so'rovlari asosidagi qiymatlarni qo'llash imkonini beradi. Bu bitta xususiyatni o'zgartirish uchun batafsil @media bloklariga bo'lgan ehtiyojni kamaytiradi. @function functionsBiz nihoyat ba'zi mantiqni boshqa joyga ko'chirishimiz mumkin, natijada ba'zi toza fayllar, haqiqiy hayot sifati xususiyati paydo bo'ladi. sibling-index() va sibling-count() Daraxtlarni hisoblashning ushbu funksiyalari roʻyxat oʻlchamiga qarab hayratlanarli animatsiyalar yoki elementlarni uslublash masalasini hal qiladi. Men CSS bilan aka-ukalarni uslublash bo‘yicha o‘rganganimdek, bu bizning HTML-da maxsus xususiyatlarni (masalan, --index: 1) qattiq kodlash zaruratini yo‘q qiladi.
Misol: maketlarni hisoblash Endi biz ixcham matematik formulalarni yozishimiz mumkin. Misol uchun, ekranga kiradigan kartalar uchun animatsiyani hayratda qoldirish ahamiyatsiz bo'lib qoladi: .karta-konteyner > * { animatsiya: 0,6 soniyada oldinga siljish; /* Endi qo'lda --index o'zgaruvchilari yo'q! */ animatsiya-kechikish: calc(birodarlar-index() * 0,1s); }
Men hatto ushbu funktsiyalarni trigonometriya bilan birgalikda hech qanday JavaScript-ni ishlatmasdan mukammal doira ichiga joylashtirishni sinab ko'rdim.
Namoyish: Dinamik ravishda hayratlanarli karta animatsiyalari.
Utilitybend tomonidan sibling-index() [forked] yordamida Pen Stagger kartalariga qarang.
Namoyish: sibling-index, sibling-count va yangi CSS @function funksiyasidan foydalangan holda elementlarni mukammal aylanaga joylashtirish.
Utilitybend tomonidan sibling-index, sibling-count va funksiyalar [forked] yordamida aylana Penga qarang. Mening CSS vazifalar ro'yxatim: sinab ko'rishni kuta olmaydigan xususiyatlar Men tanlovlar va o‘tishlarni haykaltaroshlik bilan band qilgan bo‘lsam-da, “CSS Wrapped 2025” hisoboti CodePen’da hali ishga tushirish imkoniga ega bo‘lmagan boshqa sovg‘alar bilan to‘ldirilgan. Bular mening keyingi tajribalarim ro'yxatida yuqori: Ankorlangan konteyner so'rovlari Men karusel demosidagi tugmalar uchun CSS Anchor Positioning-dan foydalandim, ammo “CSS Wrapped”Buning evolyutsiyasi: Anchored konteyner so'rovlari. Bu barchamiz uchun maslahatlar bilan duch kelgan muammoni hal qiladi: agar brauzer bo'sh joy cheklanganligi sababli maslahatchini yuqoridan pastga aylantirsa, "o'q" ko'pincha noto'g'ri tomonga ishora qiladi. Ankorlangan konteyner so'rovlari bilan (@container anchored(fallback: flip-block)) biz elementni brauzer tanlagan zaxira pozitsiyasiga qarab uslublashimiz mumkin. Ichki koʻrinishdagi oʻtish guruhlari Ko'rish o'tishlari inqilob bo'ldi, lekin ular o'ziga xos kelishuv bilan keldi: ular element daraxtini tekislashdi, bu ko'pincha 3D o'zgarishlarni yoki to'lib-toshishni buzdi: klip. Men har doim nimadir etishmayotganini his qilardim va bu shunchaki javob bo'lishi mumkin. Ko'rish-o'tish guruhidan foydalanish: eng yaqin, biz nihoyat o'tish guruhlarini bir-biriga joylashtirishimiz mumkin. Bu bizga o'tish paytida kesish effektlarini yoki 3D aylanishlarni saqlab qolish imkonini beradi - bu avvallari imkonsiz bo'lgan narsa, chunki elementlar yuqori darajaga ko'tarilgan. .card img { ko'rish-o'tish-nomi: fotosurat; ko'rish-o'tish-guruh: eng yaqin; /* Uni ichkarida saqlang! */ }
Tipografiya va shakllar Va nihoyat, mendagi ergonomist Text Box Trim-ni sinab ko'rmoqchi bo'lib, u nihoyat mukammal vertikal hizalanishga erishish uchun matn mazmuni ustidagi va ostidagi zerikarli qo'shimcha bo'shliqni (etakchi) olib tashlashni va'da qiladi. Va ijodiy tomon uchun burchak shakli va shape() funksiyasi to'rtburchaklar bo'lmagan tartiblarni ochib beradi, bu esa CSS o'zgaruvchilariga javob beradigan "kvadratchalar" va murakkab yo'llarga imkon beradi. Aytgancha, men chizmalarga to'la dizaynga ega bo'lishni kuta olmayman! Umidli kelajak Biz CSS ilgari JavaScript-ga tegishli bo'lgan mantiq, holat va murakkab o'zaro ta'sirlarni boshqarishga qodir bo'lgan dunyoning guvohi bo'lamiz. MoveBefore (iframes/videolar uchun DOM holatini saqlash) va attr() (ranglar va panjaralar uchun satrlardan tashqari turlardan foydalanish) kabi xususiyatlar bu haqiqatni yanada mustahkamlaydi. Ushbu xususiyatlardan ba'zilari hozirda eksperimental yoki Chrome uchun xos bo'lsa-da, momentumni inkor etib bo'lmaydi. Interop kabi tashabbuslar orqali barcha brauzerlarda ushbu imkoniyatlarning asosiy bo'lishini ta'minlash uchun doimiy qo'llab-quvvatlashga umid qilishimiz kerak. Aytish joizki, brauzer dvigatellariga ega bo'lish "Chrome birinchi" da ushbu ajoyib xususiyatlarga ega bo'lish kabi muhimdir. Ushbu yangi xususiyatlar brauzerlarda paydo bo'lishidan oldin muhokama qilinishi, o'rnatilishi va sinovdan o'tkazilishi kerak. Bu CSS-ga kirish uchun ajoyib vaqt. Biz endi hujjatlarni uslublash emasmiz; biz har doimgidan ham kuchliroq mahalliy asboblar to'plami bilan dinamik, ergonomik va mustahkam ilovalarni yaratmoqdamiz. Keling, ushbu yangi davrni boshlaymiz va xabarni tarqatamiz. Bu CSS bilan o'ralgan!
