@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() */
}
Приклад
<!DOCTYPE html>
<html>
<head>
<title>@supports</title>
<meta charset="utf-8">
<style>
@supports (display: flex) {
.no { display: none; }
}
@supports not (display: flex) {
.yes { display: none; }
}
</style>
</head>
<body>
<p class="yes">Ваш браузер поддерживает display: flex.</p>
<p class="no">Ваш браузер не поддерживает display: flex.</p>
</body>
</html>