Правило CSS @supports
Используйте правило @supports, чтобы спросить браузер, поддерживает ли он конкретное свойство или значение CSS. С его помощью можно также определить резервные стили для неподдерживаемой функции.
В результате стили применяются только тогда, когда браузер может их обработать.
Базовый синтаксис
@supports (property: value) {
/* CSS rules to apply if condition is true */
}
Пример: использование @supports с grid и flex
Резервное оформление получается при сочетании @supports с обычным CSS.
Резервный вариант Flex
Браузер, поддерживающий display: flex, применяет CSS внутри правила @supports. Любой другой браузер вместо этого использует класс .container, записанный вне правила.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @supports - Flex Fallback</title>
<style>
/* Fallback if the browser does not support display: flex */
.container {
float: left;
width: 100%;
}
/* Use this CSS if the browser supports display: flex */
@supports (display: flex) {
.container {
display: flex;
}
}
.container > div {
background-color: #2196F3;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<h1>@supports with Flex Fallback</h1>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
Резервный вариант Grid
Здесь проверяется display: grid. Если проверка пройдена, применяется CSS внутри правила @supports, а если нет, резервным вариантом служит класс .container вне этого правила.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @supports - Grid Fallback</title>
<style>
/* Fallback 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;
}
}
.container > div {
background-color: #ffffff;
color: #333;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>@supports with Grid Fallback</h1>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
Отрицание с помощью not
Чтобы применять стили только тогда, когда функция не поддерживается, напишите not в условии.
Пример
@supports not (display: grid) {
.warning {
background-color: pink;
padding: 10px;
border: 1px solid red;
}
}
Комбинирование условий
Одно правило @supports может содержать несколько условий, объединённых с помощью and, or и not.
Примечание: Старым браузерам нужны резервные стили, поэтому всегда предоставляйте их вне @supports.
Пример
@supports (display: grid) and (gap: 10px) {
.container {
display: grid;
gap: 10px;
}
}
Справочник CSS
Поддерживает ли браузер функцию CSS, проверяется с помощью правила @supports.