Самоучитель 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

Оцените статью
devanswers.ru
Добавить комментарий