CSS @supports qoidasi

@supports qoidasi brauzer muayyan CSS xossasini yoki qiymatini qo‘llab-quvvatlashini tekshirish imkonini beradi va xususiyat qo‘llab-quvvatlanmasa zaxira uslublarni belgilash imkonini beradi.

Bu uslublarni faqat brauzer ularni boshqara olganda qo‘llash uchun foydali.

Asosiy sintaksis

@supports (property: value) {
  /* CSS rules to apply if condition is true */
}

Misol: @supports ni grid va flex bilan ishlatish

@supports ni oddiy CSS bilan birlashtirib, zaxira uslublash ta’minlashi mumkin.

Bu yerda agar brauzer display: flex ni qo‘llab-quvvatlasa, @supports qoidasi ichidagi CSS qo‘llanadi. Qo‘llab-quvvatlamasa, @supports qoidasidan tashqaridagi .container klassi qo‘llanadi:

Misol

/* use this CSS if the browser does not support display: flex */
.container {
float: left;
width: 100%;
}

/* use this CSS if the browser supports display: flex */
@supports (display: flex) {
.container {
display: flex;
}
}

O‘zingiz sinab ko‘ring »

Bu yerda agar brauzer display: grid ni qo‘llab-quvvatlasa, @supports qoidasi ichidagi CSS qo‘llanadi. Qo‘llab-quvvatlamasa, @supports qoidasidan tashqaridagi .container klassi qo‘llanadi:

Misol

/* use this CSS if the browser does not support display: grid */
.container {
display: table;
width: 90%;
background-color: #2196F3;
padding: 10px;
}

/* use this CSS if the browser supports display: grid */
@supports (display: grid) {
.container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}
}

O‘zingiz sinab ko‘ring »

`not` bilan inkor qilish

Xususiyat qo‘llab-quvvatlanmaganda FAQAT uslublar qo‘llash uchun not dan foydalanishingiz mumkin:

Misol

@supports not (display: grid) {
.warning {
    background-color: pink;
    padding: 10px;
    border: 1px solid red;
}
}

Shartlarni birlashtirish

Bir nechta shartlar uchun and, or va not dan foydalanishingiz mumkin:

Misol

@supports (display: grid) and (gap: 10px) {
.container {
display: grid;
gap: 10px;
}
}

Eslatma: Eskirgan brauzerlar uchun har doim @supports dan tashqarida zaxira uslublarni ta’minlang.

CSS ma’lumotnomasi

At-rule	Tavsif
@supports	Brauzer CSS imkoniyatini qo‘llab-quvvatlashini tekshirish uchun ishlatiladi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish

CSS @supports qoidasi