Moslashuvchan va adaptiv veb-komponentlarni yaratish uchun CSS konteyner so'rovlari uslubining kuchini o'rganing. Konteyner o'lchami va xususiyatlariga asoslangan uslublarni boshqarishni o'rganib, dizayningizning moslashuvchanligi va foydalanuvchi tajribasini oshiring.
CSS Konteyner So'rovlari Uslubini O'zlashtirish: Zamonaviy Veb-dizayn uchun Uslubga Asoslangan Konteyner So'rovlari
Veb-dasturlashning doimiy rivojlanayotgan landshaftida haqiqatan ham moslashuvchan va adaptiv dizaynlarni yaratish qobiliyati birinchi o'rinda turadi. CSS Konteyner So'rovlari media so'rovlarining cheklovlaridan tashqariga chiqib, dasturchilarga elementlarni ularning to'g'ridan-to'g'ri ota-ona konteynerlarining o'lchami va xususiyatlariga asoslanib uslublash imkonini beruvchi kuchli vosita sifatida paydo bo'lmoqda. Ushbu blog posti CSS konteyner so'rovlari uslubi tushunchasiga chuqur kirib boradi, uning imkoniyatlari, amaliy qo'llanilishi va global auditoriya uchun veb-interfeyslarni yaratishga yondashuvingizni qanday o'zgartirishi mumkinligi haqida keng qamrovli tushuncha beradi.
Konteyner So'rovlariga bo'lgan Ehtiyojni Tushunish
An'anaviy media so'rovlari muhim bo'lsa-da, cheklovlarga ega. Ular asosan ko'rish oynasini – brauzer oynasining o'lchamlarini nishonga oladi. Bu shuni anglatadiki, agar sizda karta yoki forma kabi komponent bo'lsa va u o'zining ko'rinishini kattaroq maket ichidagi *mahalliy* o'lchamiga qarab moslashtirishi kerak bo'lsa, media so'rovlari yetarli emas. Moslashuvchan to'r (grid) maketiga ega veb-saytni ko'rib chiqing. Ushbu to'r ichidagi karta o'z matnining o'lchamini, rasm ko'rinishini yoki umumiy maketini ko'rish oynasi o'lchamidan qat'i nazar, *to'r katakchasi ichida* mavjud bo'lgan bo'shliqqa qarab o'zgartirishi kerak bo'lishi mumkin. Aynan shu yerda konteyner so'rovlari o'zini namoyon qiladi.
Konteyner so'rovlari sizga o'z kontekstida haqiqatan ham mustaqil va moslashuvchan bo'lgan komponentlarni yaratish imkonini beradi. Bu ayniqsa quyidagilar uchun qimmatlidir:
- Qayta foydalanish mumkin bo'lgan komponentlar: Turli veb-sayt bo'limlari va maketlarida benuqson ishlaydigan komponentlar yarating.
- Dinamik Maketlar: Komponent uslublarini mavjud bo'shliqqa qarab moslashtiring, bu esa ekran maydonidan samaraliroq foydalanishga olib keladi.
- Yaxshilangan Foydalanuvchi Tajribasi: Keng doiradagi qurilmalar va ekran o'lchamlarida yanada intuitiv va vizual jozibali tajribani taklif qiling.
Konteyner So'rovlari Uslubining Asosiy Tushunchalari
Konteyner so'rovlari uslubi sizga konteyner elementining *hisoblangan o'lchamiga* asoslangan CSS uslublarini qo'llash imkonini beradi. Bu odatda siz uslublayotgan elementning to'g'ridan-to'g'ri ota-onasi bo'ladi, lekin agar siz uni maxsus belgilasangiz, konteyner ajdod ham bo'lishi mumkin. Asosiy jihatlar quyidagilardan iborat:
- `container-type` Xususiyati: Bu xususiyat juda muhim. Siz uni konteyner elementiga qo'llaysiz va konteyner so'rovlari uchun qanday muomala qilinishi kerakligini belgilaysiz. Asosiy qiymatlar:
- `container-type: normal;` (standart qiymat; `container-name` ko'rsatilmagan bo'lsa, bu uning konteyner so'rovlari uchun konteyner bo'lishiga to'sqinlik qiladi)
- `container-type: size;` (konteynerning o'lchamlari so'rovlar uchun mavjud bo'ladi)
- `container-type: inline-size;` (faqat konteynerning ichki o'lchami (gorizontal o'lcham) so'raladi)
- `container-type: style;` (konteynerning uslublari so'rovlar uchun mavjud bo'ladi)
- `container-name` Xususiyati: Agar sizda bir nechta konteyner bo'lsa va ularni farqlash kerak bo'lsa, yoki DOM daraxtida yuqoriroqda joylashgan elementda konteyner so'rovini ishlatmoqchi bo'lsangiz, konteyneringizga nom berish uchun ushbu xususiyatdan foydalanasiz. Keyin bu nom konteyner so'rovingizda havola qilinadi.
- Konteyner So'rovi Sintaksisi (`@container`): Bu konteyner so'rovi mexanizmining yadrosidir. Siz `@container` qoidasidan konteyner o'lchami yoki xususiyatlariga asoslanib qo'llaniladigan uslublarni aniqlash uchun foydalanasiz.
Konteyner So'rovi Sintaksisining Tushuntirilishi
`@container` qoidasi `@media` so'rovlariga o'xshash sintaksisga amal qiladi, lekin ko'rish oynasini so'rash o'rniga, u konteynerning o'lchamlari yoki xususiyatlarini so'raydi. Mana asosiy tuzilma:
@container (min-width: 400px) {
/* Konteyner kengligi kamida 400px bo'lganda qo'llaniladigan uslublar */
}
Siz `max-width`, `min-height`, `max-height` va `aspect-ratio` kabi boshqa taqqoslash operatorlaridan ham foydalanishingiz mumkin. Shuningdek, agar konteynerga `container-type: style` qo'llanilgan bo'lsa, `--my-custom-property`, `font-weight` yoki hatto `color` kabi xususiyatlardan foydalanib, uslub xususiyatlari uchun so'rov yuborishingiz mumkin.
Keling, buni amaliy misol bilan ko'rib chiqaylik. Karta komponentini tasavvur qiling. Biz kartaning tarkibi uning kengligiga qarab moslashishini xohlaymiz. Buni quyidagicha amalga oshirish mumkin:
<div class="container">
<div class="card">
<img src="image.jpg" alt="">
<h2>Karta Sarlavhasi</h2>
<p>Karta haqida ba'zi tavsiflovchi matn.</p>
</div>
</div>
.container {
display: flex;
width: 100%;
/* Ixtiyoriy: Demonstratsiya uchun, moslashuvchan to'rni simulyatsiya qilamiz */
max-width: 800px;
margin: 0 auto;
}
.card {
border: 1px solid #ccc;
padding: 1rem;
margin: 1rem;
flex: 1 1 300px; /* Kartalarning o'ralishiga ruxsat berish */
container-type: size; /* Konteyner so'rovlarini yoqish */
}
.card img {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
}
@container (min-width: 400px) {
.card {
flex: 1 1 400px; /*Kengroq kartalar */
}
.card h2 {
font-size: 1.5rem;
}
}
@container (min-width: 600px) {
.card {
flex: 1 1 600px;
}
}
Ushbu misolda:
- Biz `.card` elementini konteyner qilish uchun unga `container-type: size` ni o'rnatdik.
- So'ngra `@container` qoidalari konteyner kengligiga asoslanib `.card` uslublarini o'zgartiradi.
Uslub Xususiyatlari uchun Konteyner So'rovi - `container-type: style`
`container-type: style` ning kiritilishi yanada dinamik va komponentlashtirilgan uslublash imkonini beradi. Bu bilan siz konteynerning *hisoblangan* uslub xususiyatlariga nisbatan so'rov yuborishingiz mumkin. Bu moslashuvchan dizaynlar uchun butunlay yangi imkoniyatlar ochadi.
Bu qanday ishlaydi:
- Konteyner elementiga `container-type: style` ni qo'llang. Bu brauzerga uning uslub xususiyatlarini so'rashingizni bildiradi.
- Konteynerda maxsus xususiyatlarni (CSS o'zgaruvchilari) o'rnating. Bu o'zgaruvchilar siz kuzatmoqchi bo'lgan uslublarni ifodalaydi.
- Ushbu maxsus xususiyatlarni so'rash uchun `@container` dan foydalaning. So'rov sintaksisi o'lcham so'rovlariga o'xshaydi, lekin endi uslublarni ishga tushirish uchun xususiyat va uning qiymatlaridan foydalanadi.
Keling, konteynerga ma'lum bir sinf qo'llanilganligiga qarab, konteyner ichidagi tugmaning rangini o'zgartirmoqchi bo'lgan vaziyatni ko'rib chiqaylik. Mana CSS:
.container {
container-type: style; /* Uslubga asoslangan konteyner so'rovlarini yoqish */
--button-color: blue; /* Tugmaning standart rangi */
}
.container-highlighted {
--button-color: red; /* Konteyner ajratilganda rangni o'zgartirish */
}
.button {
color: var(--button-color);
padding: 10px 20px;
border: 1px solid var(--button-color);
background-color: white;
}
@container style (--button-color: red) {
.button {
background-color: var(--button-color);
color: white;
}
}
Ushbu misolda, konteynerga `container-highlighted` klassi qo'llanilganda tugmaning fon rangi qizil rangga o'zgaradi. Bu konteynerning holati yoki boshqa xususiyatlariga asoslangan yuqori darajada dinamik uslublash imkonini beradi.
Konteyner So'rovlarining Ilg'or Texnikalari
Asoslardan tashqari, konteyner so'rovlaringizni yanada kuchliroq qilish uchun bir nechta ilg'or texnikalarni qo'llashingiz mumkin.
- Konteyner So'rovlarini Birlashtirish: Siz `and`, `or` va `not` kabi mantiqiy operatorlar yordamida bir nechta konteyner so'rovlarini birlashtirishingiz mumkin. Bu sizga yanada murakkab va nozik uslublash qoidalarini yaratish imkonini beradi.
- Ichki Konteyner So'rovlari: Ko'p qatlamli moslashuvchan xatti-harakatlarni yaratish uchun konteyner so'rovlarini bir-birining ichiga joylashtirishingiz mumkin.
- `container-name` dan Foydalanish: Murakkabroq maketlar uchun `container-name` juda muhim bo'lib qoladi. Siz konteyner elementlaringizga nomlar berishingiz va ularni so'rovlaringizda maxsus nishonga olishingiz mumkin. Bu sizda bir nechta konteyner elementlari bo'lganda yoki ajdod yoki yonma-yon konteynerlardagi uslublashga ta'sir qilish kerak bo'lganda bebaho hisoblanadi.
<div class="grid-container" style="container-type: size; container-name: grid;"> <div class="card">...</div> <div class="card">...</div> </div> <div class="sidebar-container" style="container-type: size; container-name: sidebar;"> <!-- Yon panel tarkibi --> </div>@container grid (min-width: 600px) { .card { /* 'grid' konteyneri kengligi kamida 600px bo'lganda uslublar */ } } @container sidebar (min-width: 300px) { /* Yon panel uchun uslublar */ }
@container (min-width: 300px) and (max-width: 600px) {
/* Kengligi 300px va 600px oralig'ida bo'lgan konteynerlar uchun uslublar */
}
@container (min-width: 500px) {
.card {
/* Konteyner kengligi kamida 500px bo'lganda uslublar */
}
@container (min-width: 700px) {
.card {
/* Konteyner kengligi kamida 700px bo'lganda yanada aniqroq uslublar */
}
}
}
Global Auditoriya uchun Amaliy Qo'llanilishlar va Misollar
Konteyner so'rovlari global auditoriya va turli foydalanuvchi ehtiyojlarini qondiradigan turli veb-dizayn stsenariylarida keng qo'llanilishga ega. Keling, bir nechta amaliy misollarni ko'rib chiqaylik.
- Moslashuvchan To'r Maketlari: O'zlarining ota-ona konteynerlarining o'lchamiga avtomatik ravishda moslashadigan to'rga asoslangan maketlar yarating. Masalan, mahsulotlar ro'yxati sahifasi konteyner kengligiga qarab qatordagi elementlar sonini moslashtirishi mumkin, bu planshetlar, ish stollari va hatto nostandart ekran o'lchamlarida ko'rsatishni optimallashtiradi. Xalqaro filiallari bo'lgan kompaniya har bir mintaqaning madaniy va til ehtiyojlariga mos ravishda yangiliklar lentasi yoki maqola bo'limining maketini osongina moslashtirishi mumkin.
- Adaptiv Navigatsiya Menyulari: Mavjud bo'shliqqa qarab o'zgaradigan navigatsiya menyularini loyihalashtiring. Kichikroq ekranlarda menyu gamburger belgisiga yig'ilishi mumkin, kattaroq ekranlarda esa to'liq navigatsiya paneliga kengayadi. Bu ekran o'lchami yoki til sozlamalaridan qat'i nazar, barcha qurilmalarda bir xil foydalanuvchi tajribasini ta'minlaydi.
- Dinamik Formalar: Formalar o'z maydonlarini qayta joylashtirishi yoki kiritish elementlarining o'lchamini konteyner kengligiga qarab moslashtirishi mumkin. Bu ko'plab maydonlarga ega murakkab formalar uchun juda foydali bo'lib, toza va foydalanuvchiga qulayroq tajriba taqdim etadi. Ko'p tilli ro'yxatdan o'tish formasini yaratish haqida o'ylang; foydalanuvchining til tanloviga qarab forma maydonlarini turli belgi uzunliklariga moslashtirish konteyner so'rovlari yordamida osongina amalga oshiriladi.
- Kontent Taqdimoti: Matnli tarkibning taqdimotini moslashtiring. Masalan, shrift o'lchamini oshirish, satr balandligini o'zgartirish yoki maqola maketini mavjud konteyner bo'shlig'iga qarab o'zgartirish. Bu, ayniqsa, turli qurilmalar va tillarda oson o'qilishi kerak bo'lgan, hatto murakkab yozuv belgilarini ham sig'dira oladigan blog postlari va maqolalar uchun foydali bo'lishi mumkin.
- Komponentga Asoslangan Dizayn Tizimlari: Konteyner so'rovlari komponentga asoslangan dizayn tizimlari uchun ajoyib mos keladi. Siz turli kontekstlarga muammosiz moslashadigan haqiqatan ham qayta foydalanish mumkin bo'lgan komponentlarni yaratishingiz mumkin. Bu, ayniqsa, turli veb-saytlar va ilovalarda izchil brend identifikatorini saqlab qolishi kerak bo'lgan global brendlar uchun muhimdir.
Qulaylik Masalalari
Konteyner so'rovlarini amalga oshirishda qulaylik ustuvor bo'lib qolishi kerak. Quyidagilarga ishonch hosil qiling:
- Kontent Qulay bo'lib Qoladi: Konteyner o'lchamidan qat'i nazar, barcha kontent nogironligi bo'lgan foydalanuvchilar uchun o'qilishi va qulay bo'lib qoladi.
- Rang Kontrasti Saqlanadi: Matn va fon elementlari o'rtasida yetarli rang kontrastini ta'minlang. Turli ekran o'lchamlarida sinovdan o'tkazing va uslublarni shunga mos ravishda moslashtiring.
- Klaviatura Navigatsiyasi Funktsional bo'lib Qoladi: Dinamik maket o'zgarishlariga qaramay, barcha interaktiv elementlar klaviatura orqali boshqarilishi mumkin bo'lib qoladi.
- Ekran O'quvchisi Muvofiqligini Hisobga Oling: Ayniqsa maket o'zgarishlaridan so'ng, tarkib to'g'ri e'lon qilinishini ta'minlash uchun ekran o'quvchilari bilan sinchkovlik bilan sinovdan o'tkazing.
- Semantik HTML dan Foydalaning: Tarkibingizga tuzilma va ma'no berish uchun har doim semantik HTML elementlaridan foydalaning, bu yordamchi texnologiyalarga uni to'g'ri talqin qilish imkonini beradi.
Unumdorlikni Optimallashtirish
Konteyner so'rovlari kuchli bo'lishiga qaramay, unumdorlik masalalarini keltirib chiqarishi mumkin. Unumdorlikni optimallashtirish uchun quyidagilarni bajaring:
- Konteyner So'rovlaridan Me'yorida Foydalaning: Konteyner so'rovlarini haddan tashqari ko'p ishlatmang. Ular sizning dizayn muammoingizni hal qilish uchun haqiqatan ham zarurmi yoki yo'qligini baholang. Ba'zida oddiyroq CSS yoki faqat flexbox/grid yetarli bo'ladi.
- CSS'ingizni Optimallashtiring: Samarali CSS yozing. Haddan tashqari murakkab selektorlar va ortiqcha ichki joylashuvlardan saqlaning.
- Qayta Chizish va Qayta Oqimlarni Kamaytiring: Qayta chizish yoki qayta oqimlarni keltirib chiqaradigan CSS xususiyatlariga (masalan, element o'lchamlarini, joylashuvini o'zgartirish) e'tiborli bo'ling. Brauzerga unumdorlikni optimallashtirishga yordam berish uchun `will-change` kabi texnikalardan me'yorida foydalaning.
- Turli Qurilmalarda Sinovdan O'tkazing: Butun platformalarda optimal unumdorlikni ta'minlash uchun har doim dizaynlaringizni bir qator qurilmalar va brauzerlarda sinovdan o'tkazing. Bu, ayniqsa, cheklangan tarmoq kengligiga ega mamlakatlardagi foydalanuvchilar uchun muhimdir.
Foydalari va Afzalliklari
Konteyner so'rovlarini qabul qilish sezilarli foyda keltiradi:
- Kengaytirilgan Qayta Foydalanish Imkoniyati: Komponentlar bir marta ishlab chiqilishi va bir nechta kontekstlarda qayta ishlatilishi mumkin, bu esa ishlab chiqish vaqtini qisqartiradi va izchillikni ta'minlaydi.
- Yaxshilangan Qo'llab-quvvatlash Imkoniyati: Komponent uslubidagi o'zgarishlar lokalizatsiya qilinadi, bu esa texnik xizmat ko'rsatishni osonlashtiradi.
- Yaxshiroq Foydalanuvchi Tajribasi: O'z muhitiga moslashadigan moslashuvchan dizaynlar barcha qurilmalarda yanada intuitiv va foydalanuvchiga qulay tajribalarga olib keladi.
- Soddalashtirilgan Kod: Konteyner so'rovlari toza va boshqarilishi osonroq CSSga olib kelishi mumkin, bu esa kodingiz bazasining murakkabligini kamaytiradi.
- Kelajakka Tayyorlash: Ular moslashuvchan dizaynga istiqbolli yondashuvni ta'minlaydi, rivojlanayotgan qurilmalar va ekran o'lchamlarini yaxshiroq boshqarishga tayyor bo'lib, kompaniyalarga o'zlarining global mijozlar bazasiga yaxshiroq xizmat ko'rsatish imkonini beradi.
Qiyinchiliklar va Mulohazalar
Konteyner so'rovlari kuchli bo'lsa-da, dasturchilar quyidagilardan xabardor bo'lishlari kerak:
- Brauzer Qo'llab-quvvatlashi: Brauzer qo'llab-quvvatlashi tez sur'atlar bilan yaxshilanayotgan bo'lsa-da, sizning maqsadli auditoriyangizning brauzerlari mos kelishiga ishonch hosil qiling. Eski brauzerlar uchun polifillar yoki zaxira variantlardan foydalanishni ko'rib chiqing (quyida qarang).
- Murakkablik: Konteyner so'rovlari CSS'ingizga murakkablik kiritishi mumkin, shuning uchun ularni oqilona ishlating. Puxta rejalashtirish kalit hisoblanadi.
- Sinovdan O'tkazish: Dizaynlaringiz haqiqatan ham moslashuvchan ekanligiga ishonch hosil qilish uchun turli ekran o'lchamlari va qurilmalarida qattiq sinovdan o'tkazish zarur. Keng doiradagi qurilmalarda sinovdan o'tkazish global auditoriya uchun ayniqsa muhimdir.
- Haddan Tashqari Foydalanish: Konteyner so'rovlarini haddan tashqari ishlatmang. Haddan tashqari muhandislik keraksiz murakkablik va unumdorlik muammolariga olib kelishi mumkin. Oddiyroq yondashuvlar ham siz xohlagan effektlarga erisha oladimi, yo'qmi, ko'rib chiqing.
Eng Yaxshi Amaliyotlar va Keyingi Tadqiqotlar
Konteyner so'rovlarining afzalliklarini maksimal darajada oshirish uchun ushbu eng yaxshi amaliyotlarga amal qiling:
- Maketlaringizni Rejalashtiring: Komponentlaringiz turli konteyner o'lchamlarida qanday harakat qilishi kerakligini diqqat bilan rejalashtiring.
- Oddiydan Boshlang: Asosiy misollardan boshlang va tajriba orttirganingiz sari murakkablikni asta-sekin oshiring.
- CSS'ingizni Modullashtiring: Kodingizni tartibli va qo'llab-quvvatlanadigan holda saqlash uchun CSS preprotsessori yoki modulli CSS texnikalaridan foydalaning.
- Kodingizni Hujjatlashtiring: Konteyner so'rovlari implementatsiyalarini tushunish va qo'llab-quvvatlashni osonlashtirish uchun ularni sinchkovlik bilan hujjatlashtiring. Bu xalqaro loyihalarda hamkorlik qilishda juda muhim bo'ladi.
- Yangiliklardan Xabardor bo'lib Turing: Konteyner so'rovlari va veb-dasturlashning eng yaxshi amaliyotlaridagi so'nggi o'zgarishlardan xabardor bo'lib turing. Spetsifikatsiya rivojlanmoqda.
- CSS Maxsus Xususiyatlaridan Foydalaning: Dizaynlaringizni yanada moslashuvchan va sozlashni osonlashtirish uchun CSS maxsus xususiyatlaridan (o'zgaruvchilardan) foydalaning.
- Sinov, Sinov, Sinov: Dizaynlaringizni turli brauzerlar, qurilmalar va ekran o'lchamlarida sinovdan o'tkazing, ayniqsa turli qurilmalar va ulanish tezligiga ega hududlarga e'tibor qarating.
Kengroq Muvofiqlik uchun Polifillar va Zaxira Variantlar
Konteyner so'rovlarini brauzerda qo'llab-quvvatlash kuchli bo'lsa-da, sizga eski brauzerlarni qo'llab-quvvatlash kerak bo'lishi mumkin. Mahalliy qo'llab-quvvatlash mavjud bo'lmagan joylarda konteyner so'rovlari funksionalligini ta'minlash uchun polifillardan foydalanishingiz mumkin.
Ommabop polifil variantlariga quyidagilar kiradi:
- container-query (npm to'plami): JavaScript polifili.
- PostCSS Container Queries: Yaratish vaqtida konteyner so'rovlarini qayta ishlash uchun PostCSS plagini.
Polifillardan foydalanganda quyidagilarni yodda tuting:
- Unumdorlik: Polifillar unumdorlikka ta'sir qilishi mumkin. Ularni oqilona ishlating va implementatsiyangizni optimallashtiring.
- Xususiyatlar Tengligi: Polifil sizga kerak bo'lgan konteyner so'rovlari xususiyatlarini qo'llab-quvvatlashiga ishonch hosil qiling.
- Naif Degradatsiya: Maketlaringizni shunday loyihalashtiringki, ular polifilsiz ham oqilona ishlay olsin, progressiv takomillashtirish texnikalaridan foydalaning.
Xulosa: Moslashuvchan Dizayn Kelajagini Qabul Qilish
CSS konteyner so'rovlari uslubi veb-dizayndagi sezilarli yutuqni anglatadi va dasturchilarga komponent uslubi va moslashuvchanligi ustidan misli ko'rilmagan nazoratni taklif etadi. Uning tamoyillarini o'zlashtirib, ish jarayoningizga kiritish orqali siz haqiqatan ham global auditoriya uchun moslashtirilgan, yanada moslashuvchan, qayta foydalanish mumkin va foydalanuvchiga qulay veb-interfeyslarni yaratishingiz mumkin. Ushbu texnologiyani qabul qiling va butun dunyo bo'ylab foydalanuvchilarning turli ehtiyojlariga muammosiz moslashadigan tajribalarni yaratib, veb-dizayn kelajagini shakllantiring. Xalqaro biznes uchun veb-saytlar yaratishdan tortib, hamma uchun qulay dizaynlarni yaratishgacha, konteyner so'rovlari zamonaviy veb-dasturlash uchun muhim vositaga aylanmoqda. Turli tillarga, madaniy afzalliklarga va qurilma turlariga moslashish qobiliyati inklyuziv va samarali veb-dizaynning asosiy tamoyilidir. Bugundan boshlab konteyner so'rovlari uslubining kuchini o'rganishni boshlang va loyihalaringizda moslashuvchanlikning keyingi darajasini oching!