Самоучитель CSS Feature Queries

Запросы характеристик используются в 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