@container
Misol
Konteyner o‘lchami yoki uslublariga qarab boshqa elementlar uchun uslublar belgilang:
.parent {
container-name: myContainer;
container-type: inline-size;
}
/* Add styles if myContainer is less than 500px wide */
@container myContainer (width < 500px) {
.child {
width: 50%;
border: 2px solid maroon;
background-color: salmon;
}
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
CSS @container qoidasi konteyner o‘lchami yoki uslublariga qarab boshqa elementlar uchun uslublar belgilashda ishlatiladi.
Uslub deklaratsiyalari shart bo‘yicha filtrlanadi va shart rost bo‘lsa, konteynerga qo‘llaniladi. Shart konteyner o‘lchami yoki uslub qiymati o‘zgarganda tekshiriladi.
Maslahat: CSS’da konteyner — boshqa elementlarni uslub berish maqsadida bir guruhga birlashtirish uchun ularni o‘rab oluvchi element.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar at-qoidani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| At-qoida | |||||
|---|---|---|---|---|---|
| @container | 105 | 105 | 110 | 16 | 91 |
CSS sintaksisi
@container containername (containerquery) {
css declarations
}
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| containername | Ixtiyoriy. Konteyner nomi |
| containerquery | Majburiy. Tekshiriladigan shart. Shart rost bo‘lsa, uslublar qo‘llaniladi. containerquery ichida quyidagi deskriptorlardan foydalanish mumkin:
|
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!