@supports

@supports

Правило @supports дає змогу перевірити, чи підтримує браузер ту чи іншу можливість, і на основі цього створити набір стильових правил. Припустимо створювати комплексні умови за допомогою логічних операторів not, and, or.

Синтаксис

@supports <умова> {
 <стильові правила>
}

Значення

Як умову в круглих дужках пишуть стильову властивість і її значення. Далі у фігурних дужках ідуть стильові правила. Якщо браузер підтримує зазначену властивість, то застосовуються задані стильові правила, в іншому разі вони ігноруються.

@supports (transform: perspective(300px)) {
 /* Браузер підтримує властивість transform з функцією perspective() */
}

Для перевірки того, що властивість не підтримується, застосовується логічний оператор not, його ставлять перед умовою.

@supports not (transform: perspective(300px)) {
 /* Браузер НЕ підтримує властивість transform з функцією perspective() */
}

Об'єднати кілька умов можна через логічний оператор and. Якщо хоча б одна з умов не підтримується, то стильові правила не застосовуються.

@supports (transform-origin: 50% 100%) and (transform: perspective(300px)) {
 /* Браузер одночасно підтримує властивості transform-origin І 
 transform з функцією perspective() */
}

Для вибору однієї з умов використовується логічний оператор or. Якщо підтримується хоча б одна з умов, то застосовуються стильові правила.

@supports (perspective: 300px) or (transform: perspective(300px)) {
 /* Браузер підтримує властивість perspective АБО 
 властивість transform з функцією perspective() */
}

Приклад

Браузери