CSS @supports

Я постоянно использую @supports, проверяя, могут ли браузеры работать с современными возможностями CSS. Считайте, это страховкой для стилей — если браузер не поддерживает какую-либо современную функцию, можно обеспечить надёжный резервный вариант.

Вот как это выглядит на практике:

/* Резервный стиль для всех браузеров */
.card {
  display: block;
  margin: 1rem;
}

/* Применяется в случае, если grid поддерживается */
@supports (display: grid) {
  .card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
}

Как работает @supports

Правило @supports проверяет, понимает ли браузер CSS пару свойство-значение. Можно проверять как одну, так и несколько CSS функций:

/* Проверка одной функции */
@supports (display: flex) {
  /* Стиль flex здесь */
}

/* Несколько функций с использованием and */
@supports (display: flex) and (gap: 1rem) {
  /* Стили, требующие flex и gap */
}

/* Альтернативные функции с использованием or */
@supports (display: flex) or (display: grid) {
  /* Стили для flex или grid */
}

/* Проверка отсутствия поддержки с использованием not */
@supports not (display: grid) {
  /* Резервные стили для браузеров без grid */
}

Пример использования @supports для прогрессивного улучшения макета:

.layout {
  /* Базовые стили, использующие flexbox */
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}

.layout > * {
  flex: 1 1 300px;
  margin: 0.5rem;
}

/* Добавление grid и gap, если они поддерживаются */
@supports (display: grid) and (gap: 1rem) {
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin: 0;
  }

  .layout > * {
    margin: 0;
  }
}

Тестирование нескольких свойств

Иногда необходимо проверить несколько CSS свойств. Посмотрите, как справиться с обнаружением сложных свойств:

@supports (
  (backdrop-filter: blur(10px)) or
  (-webkit-backdrop-filter: blur(10px))
) {
  .glass-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.5);
  }
}

Лучшие практики

1. Начните с надёжных резервных стилей, работающих везде.
2. Используйте @supports для расширения возможностей с помощью современных возможностей
3. По возможности тестируйте возможности по отдельности
4. Рассмотрите возможность использования нескольких правил @supports для различных комбинаций возможностей
5. Сохраняйте резервный код поддерживаемым — не создавайте слишком сложных переопределений стилей

Комментарии