@supports
Оновлено: 09.01.2023
@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() */
}