Правило @supports
Описание
Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе этого создать набор стилевых правил. Допустимо создавать комплексные условия с помощью логических операторов not, and, or.
Синтаксис
@supports условие {
стилевые правила
}Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
@supports (display: flex) {
.no {
display: none;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
</style>
<p class='yes'>Ваш браузер поддерживает display: flex.</p>
<p class='no'>Ваш браузер не поддерживает display: flex.</p>
</body>
</html>Читайте также
Свойство position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице....
Стиль элемента при наведении на него курсора мыши
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата....
Свойство grid-column-start
Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами....
Свойство
Устанавливает радиус скругления левого нижнего угла рамки.
Если рамка не задана, то скругление также происходит и с фоном....