قانون @supports

استفاده از @supports برای تشخیص پشتیبانی مرورگر از ویژگی‌های CSS

@supports چیست؟

@supports اجازه می‌دهد بررسی کنید که آیا مرورگر از یک ویژگی CSS پشتیبانی می‌کند یا خیر.

ساختار پایه

@supports (display: grid) {
        .layout {
            display: grid;
        }
    }
    
    /* نقیض */
    @supports not (display: grid) {
        .layout {
            display: flex;
        }
    }

ترکیب شرایط

/* و */
    @supports (display: grid) and (gap: 10px) { }
    
    /* یا */
    @supports (display: flex) or (display: grid) { }

کاربرد عملی

/* اگر فلکس‌باکس پشتیبانی شد */
    @supports (display: flex) {
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    
    /* در غیر اینصورت */
    @supports not (display: flex) {
        .container {
            display: block;
            text-align: center;
        }
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط