Запросы характеристик используются в CSS для точного определения характеристик. И теперь они поддерживаются всеми современными браузерами!
Мы используем ключевое слово @supports
. Например:
@supports (height: 100vh) {
.container {
height: 100vh;
}
}
Здесь мы проверяем, поддерживается ли блок vh
. Если да, то значение height
устанавливается соответствующим образом.
Как видите, по структуре они очень похожи на медиазапрос.
Давайте расширим наш пример:
.container {
height: 100%;
}
@supports (height: 100vh) {
.container {
height: 100vh;
}
}
Здесь мы предусмотрели запасной вариант, по умолчанию задав контейнеру height
значение 100%. Если браузер поддерживает значение vh
, вместо него будет использоваться значение 100vh.
Более старые браузеры будут просто игнорировать блок @supports
.
Мы можем использовать @supports
для любого свойства CSS, чтобы проверить любое значение.
Мы также можем использовать логические операторы and
, or
и not
для построения более сложных запросов свойств.
Давайте используем and
, чтобы проверить, поддерживает ли браузер CSS Grid и Flexbox:
@supports (display: grid) and (display: flex) {
/* ... */
}
Другой пример, спрашивающий, поддерживается ли CSS Grid:
.element {
float: left;
...
}
@supports (display: grid) {
.element {
float: none;
display: grid;
/* ... */
}
}
Просто и эффективно!
Заключение
Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой! Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь
🌎 Давайте общаться
-
Портфолио
-
Twitter
-
LinkedIn
-
Hashnode
-
Devto
-
Medium
-
Github
-
Codepen