@supports
Misol
Agar brauzer display: grid’ni qo‘llab-quvvatlasa, @supports qoidasi ichidagi CSS qo‘llaniladi. Aks holda, @supports qoidasidan tashqaridagi .container klassi qo‘llaniladi:
/* 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 »
Ta’rif va qo‘llanilishi
CSS @supports qoidasi brauzer biror CSS imkoniyatini qo‘llab-quvvatlashini tekshirish va agar u qo‘llab-quvvatlanmasa, zaxira uslublarni belgilash imkonini beradi.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar at-qoidani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| At-qoida | |||||
|---|---|---|---|---|---|
| @supports | 28 | 12 | 22 | 9 | 12.1 |
| font-format() | 108 | 108 | 106 | 17 | 94 |
| font-tech() | 108 | 108 | 106 | 17 | 94 |
| selector() | 83 | 83 | 69 | 14.1 | 69 |
CSS sintaksisi
@supports (supports-condition) {
if condition is true use this CSS
}
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| supports-condition | Shartni nom-qiymat jufti (property: value) yoki function() sintaksisi ko‘rinishida belgilaydi. Shartlarni and, or yoki not yordamida birlashtirish mumkin. |
| selector() | function() sintaksisi. Brauzer ko‘rsatilgan selektor sintaksisini qo‘llab-quvvatlashini tekshiradi. Masalan, agar brauzer bola kombinatorini qo‘llab-quvvatlasa, @supports selector(h2 > p) true qaytaradi va CSS uslubini qo‘llaydi |
| font-tech() | function() sintaksisi. Brauzer ko‘rsatilgan shrift texnologiyasini qo‘llab-quvvatlashini tekshiradi. Masalan, agar brauzer SVG ko‘p rangli jadvallarini qo‘llab-quvvatlasa, @supports font-tech(color-svg) true qaytaradi va CSS uslubini qo‘llaydi |
| font-format() | function() sintaksisi. Brauzer ko‘rsatilgan shrift formatini qo‘llab-quvvatlashini tekshiradi. Masalan, agar brauzer WOFF 1.0 ni qo‘llab-quvvatlasa, @supports font-format (woff) true qaytaradi va CSS uslubini qo‘llaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!