O'zbek

Ota-ona elementlarni tanlashda inqilobiy yechim bo'lgan CSS :has() selektorini o'rganing. CSS uslublaringizni o'zgartirish uchun amaliy qo'llanmalar, brauzerlararo moslik va ilg'or texnikalarni bilib oling.

CSS :has() Selektorini O'zlashtirish: Ota-ona Element Tanlash Imkoniyatini Ochish

Ko'p yillar davomida CSS dasturchilari o'zlarining ichki elementlariga asoslanib ota-ona elementlarni tanlashning oddiy va samarali usulini orzu qilishardi. Kutish nihoyasiga yetdi! :has() psevdo-klassi nihoyat paydo bo'ldi va u CSS yozish uslubimizni inqilob qilmoqda. Ushbu kuchli selektor, agar ota-ona element ma'lum bir ichki elementni o'z ichiga olsa, uni nishonga olishga imkon beradi, bu esa dinamik va moslashuvchan uslublar uchun cheksiz imkoniyatlar dunyosini ochadi.

:has() Selektori Nima?

:has() psevdo-klassi argument sifatida selektorlar ro'yxatini qabul qiluvchi CSS munosabatli psevdo-klassidir. U, agar selektorlar ro'yxatidagi har qanday selektor elementning avlodlari orasida kamida bitta elementga mos kelsa, o'sha elementni tanlaydi. Sodda qilib aytganda, u ota-ona elementda ma'lum bir ichki element bor yoki yo'qligini tekshiradi va agar bor bo'lsa, ota-ona element tanlanadi.

Asosiy sintaksis:

parent:has(child) { /* CSS qoidalari */ }

Bu faqatgina kamida bitta child elementni o'z ichiga olgan parent elementini tanlaydi.

Nima Uchun :has() Shunchalik Muhim?

An'anaga ko'ra, CSS o'z ichidagi elementlarga asoslanib ota-ona elementlarni tanlash qobiliyatida cheklangan edi. Bu cheklov ko'pincha dinamik uslublashga erishish uchun murakkab JavaScript yechimlari yoki muqobil usullarni talab qilardi. :has() selektori bu noqulay usullarga bo'lgan ehtiyojni yo'qotadi va toza, saqlashga oson va samarali CSS kodini yozish imkonini beradi.

:has() ning nima uchun o'yin qoidalarini o'zgartiruvchi ekanligi quyidagilardan iborat:

:has() Selektorining Asosiy Misollari

:has() selektorining kuchini ko'rsatish uchun bir nechta oddiy misollardan boshlaymiz.

1-misol: Rasm Mavjudligiga Qarab Ota-ona Divni Uslublash

Tasavvur qiling, siz <div> elementiga faqat uning ichida <img> elementi bo'lganda chegara qo'shmoqchisiz:

div:has(img) { border: 2px solid blue; }

Ushbu CSS qoidasi kamida bitta <img> elementini o'z ichiga olgan har qanday <div> ga ko'k chegara qo'llaydi.

2-misol: Span Mavjudligiga Qarab Ro'yxat Elementini Uslublash

Aytaylik, sizda elementlar ro'yxati bor va agar ro'yxat elementi ma'lum bir klassga ega <span> elementini o'z ichiga olsa, uni ajratib ko'rsatmoqchisiz:

li:has(span.highlight) { background-color: yellow; }

Ushbu CSS qoidasi "highlight" klassiga ega <span> ni o'z ichiga olgan har qanday <li> ning fon rangini sariqqa o'zgartiradi.

3-misol: Kiritish Maydonining Yaroqliligiga Qarab Forma Yorlig'ini Uslublash

Siz :has() dan foydalanib, bog'langan kiritish maydoni yaroqli yoki yaroqsizligiga qarab forma yorlig'ini uslublashingiz mumkin (:invalid psevdo-klassi bilan birgalikda):

label:has(+ input:invalid) { color: red; font-weight: bold; }

Bu, agar yorliqdan keyin keladigan kiritish maydoni yaroqsiz bo'lsa, yorliqni qizil va qalin qilib ko'rsatadi.

:has() Selektorining Ilg'or Qo'llanilishlari

:has() selektori boshqa CSS selektorlari va psevdo-klasslar bilan birlashtirilganda yanada kuchliroq bo'ladi. Quyida bir nechta ilg'or qo'llash holatlari keltirilgan:

4-misol: Bo'sh Elementlarni Nishonga Olish

Siz :not() psevdo-klassini :has() bilan birgalikda ma'lum bir ichki elementga ega *bo'lmagan* elementlarni nishonga olish uchun ishlatishingiz mumkin. Masalan, rasmlarni o'z ichiga *olmagan* divlarni uslublash uchun:

div:not(:has(img)) { background-color: #f0f0f0; }

Bu <img> elementini o'z ichiga olmagan har qanday <div> ga och kulrang fon qo'llaydi.

5-misol: Murakkab Maketlarni Yaratish

:has() selektorini konteyner tarkibiga asoslangan dinamik maketlarni yaratish uchun ishlatish mumkin. Masalan, siz setka katakchasi ichidagi ma'lum bir turdagi elementning mavjudligiga qarab setka maketini o'zgartirishingiz mumkin.

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item:has(img) { grid-column: span 2; }

Bu, agar setka elementi rasm o'z ichiga olsa, uni ikki ustun bo'ylab cho'zadi.

6-misol: Dinamik Forma Uslublash

Siz :has() dan foydalanib, forma elementlarini ularning holatiga qarab (masalan, fokuslangan, to'ldirilgan yoki yaroqli) dinamik ravishda uslublashingiz mumkin.

.form-group:has(input:focus) { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group:has(input:valid) { border-color: green; } .form-group:has(input:invalid) { border-color: red; }

Bu, kiritish maydoni fokuslanganda ko'k soya, yaroqli bo'lsa yashil chegara va yaroqsiz bo'lsa qizil chegara qo'shadi.

7-misol: Ichki Elementlar Soniga Qarab Uslublash

Garchi :has() to'g'ridan-to'g'ri ichki elementlar sonini sanamasa-da, siz uni boshqa selektorlar va CSS xususiyatlari bilan birlashtirib, shunga o'xshash effektlarga erishishingiz mumkin. Masalan, siz :only-child dan foydalanib, ota-ona elementda faqat bitta ma'lum turdagi ichki element bo'lsa, uni uslublashingiz mumkin.

div:has(> p:only-child) { background-color: lightgreen; }

Bu <div> ni faqatgina uning bevosita ichki elementi sifatida bitta <p> elementi bo'lsa, och yashil fon bilan uslublaydi.

Brauzerlararo Moslik va Muqobil Yechimlar

2023 yil oxiridan boshlab, :has() selektori Chrome, Firefox, Safari va Edge kabi zamonaviy brauzerlarda a'lo darajada qo'llab-quvvatlanadi. Biroq, uni ishlab chiqarishda qo'llashdan oldin, ayniqsa eski brauzerlarni qo'llab-quvvatlash kerak bo'lsa, Can I use saytida moslikni tekshirish muhim.

Quyida moslik bo'yicha ma'lumotlar keltirilgan:

Muqobil Yechimlarni Taqdim Etish

Agar siz eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, muqobil yechimlarni taqdim etishingiz kerak bo'ladi. Quyida bir nechta strategiyalar keltirilgan:

Quyida xususiyat so'rovini ishlatishga misol keltirilgan:

.parent { /* Barcha brauzerlar uchun asosiy uslublash */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* :has() ni qo'llab-quvvatlaydigan brauzerlar uchun kengaytirilgan uslublash */ border: 3px solid blue; } }

Ushbu kod barcha brauzerlarda .parent elementiga qora chegara qo'llaydi. :has() ni qo'llab-quvvatlaydigan brauzerlarda, agar .parent elementi rasm o'z ichiga olsa, u ko'k chegara qo'llaydi.

Samaradorlik Masalalari

Garchi :has() sezilarli afzalliklarni taqdim etsa-da, uning samaradorlikka potentsial ta'sirini, ayniqsa keng qo'llanilganda yoki murakkab selektorlar bilan ishlatilganda, hisobga olish muhim. Brauzerlar sahifadagi har bir element uchun selektorni baholashi kerak, bu esa hisoblash jihatidan qimmat bo'lishi mumkin.

:has() samaradorligini optimallashtirish bo'yicha ba'zi maslahatlar:

Yo'l Qo'yiladigan Umumiy Xatolar

:has() selektori bilan ishlaganda, kutilmagan natijalarga olib kelishi mumkin bo'lgan xatolarga yo'l qo'yish oson. Quyida oldini olish kerak bo'lgan ba'zi umumiy xatolar keltirilgan:

:has() dan Foydalanish Bo'yicha Eng Yaxshi Amaliyotlar

:has() selektorining afzalliklarini maksimal darajada oshirish va potentsial muammolardan qochish uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

Haqiqiy Dunyo Misollari va Qo'llash Holatlari

Keling, :has() selektori umumiy dizayn muammolarini hal qilish uchun qanday ishlatilishi mumkin bo'lgan ba'zi real dunyo misollarini ko'rib chiqaylik.

8-misol: Moslashuvchan Navigatsiya Menyularini Yaratish

Siz :has() dan foydalanib, ma'lum menyu elementlarining mavjudligiga qarab turli ekran o'lchamlariga moslashadigan moslashuvchan navigatsiya menyularini yaratishingiz mumkin.

Foydalanuvchi tizimga kirgan yoki kirmaganligiga qarab turli navigatsiya menyusini ko'rsatmoqchi bo'lgan stsenariyni tasavvur qiling. Agar ular tizimga kirgan bo'lsa, profil va chiqish amallarini ko'rsatishingiz mumkin, aks holda kirish/ro'yxatdan o'tishni ko'rsatishingiz mumkin.

nav:has(.user-profile) { /* Tizimga kirgan foydalanuvchilar uchun uslublar */ } av:not(:has(.user-profile)) { /* Tizimdan chiqqan foydalanuvchilar uchun uslublar */ }

9-misol: Karta Komponentlarini Uslublash

:has() selektorini karta komponentlarini ularning tarkibiga qarab uslublash uchun ishlatish mumkin. Masalan, siz kartaga faqat rasm o'z ichiga olgan taqdirdagina soya qo'shishingiz mumkin.

.card:has(img) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

10-misol: Dinamik Mavzularni Amalga Oshirish

Siz :has() dan foydalanib, foydalanuvchi afzalliklari yoki tizim sozlamalariga asoslangan dinamik mavzularni amalga oshirishingiz mumkin. Masalan, siz sahifaning fon rangini foydalanuvchi qorong'u rejimni yoqqan yoki yoqmaganligiga qarab o'zgartirishingiz mumkin.

body:has(.dark-mode) { background-color: #333; color: #fff; }

Ushbu misollar :has() selektorining ko'p qirraliligini va keng ko'lamli dizayn muammolarini hal qilish qobiliyatini ko'rsatadi.

CSS Kelajagi: Keyingisi Nima?

:has() selektorining joriy etilishi CSS evolyutsiyasida muhim bir qadamni belgilaydi. Bu dasturchilarga JavaScriptga kamroq tayanib, yanada dinamik, moslashuvchan va saqlashga oson uslublar jadvallarini yaratish imkonini beradi. :has() uchun brauzer qo'llab-quvvatlashi o'sishda davom etar ekan, biz ushbu kuchli selektorning yanada innovatsion va ijodiy qo'llanilishlarini ko'rishimizni kutishimiz mumkin.

Kelajakka nazar tashlaydigan bo'lsak, CSS Ishchi Guruhi CSS imkoniyatlarini yanada kengaytiradigan boshqa qiziqarli xususiyatlar va yaxshilanishlarni o'rganmoqda. Bularga quyidagilar kiradi:

So'nggi CSS ishlanmalari bilan doimo xabardor bo'lish va :has() kabi yangi xususiyatlarni o'zlashtirish orqali dasturchilar CSSning to'liq salohiyatini ochib, chinakam ajoyib veb-tajribalarni yaratishlari mumkin.

Xulosa

:has() selektori CSS vositalar to'plamiga kuchli qo'shimcha bo'lib, ota-ona elementni tanlash imkonini beradi va dinamik hamda moslashuvchan uslublash uchun yangi imkoniyatlar ochadi. Brauzer mosligi va samaradorlik oqibatlarini hisobga olish muhim bo'lsa-da, toza, saqlashga oson va samarali CSS kodi uchun :has() dan foydalanishning afzalliklari shubhasizdir. Ushbu o'yinni o'zgartiruvchi selektorni qabul qiling va bugun o'z CSS uslublaringizni inqilob qiling!

Maxsus imkoniyatlarni hisobga olishni va eski brauzerlar uchun muqobil mexanizmlarni taqdim etishni unutmang. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz :has() selektorining to'liq salohiyatidan foydalanishingiz va butun dunyo bo'ylab foydalanuvchilar uchun chinakam ajoyib veb-tajribalarni yaratishingiz mumkin.