Директива @supports в CSS. Полное руководство с примерами

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

Основы директивы @supports

Директива @supports используется для проверки поддержки браузером определённых CSS-свойств и значений. Если условие выполняется, применяются заданные стили.

Синтаксис директивы @supports

@supports (property: value) {
    /* CSS-правила */
}

Также можно использовать логические операторы для создания более сложных условий.

Примеры использования @supports

Пример 1: Проверка поддержки свойства

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@supports not (display: grid) {
    .container {
        display: flex;
        flex-direction: column;
    }
}

В этом примере стили для grid применяются только в том случае, если браузер поддерживает CSS Grid Layout. Если браузер не поддерживает display: grid, применяется fallback-стиль с использованием Flexbox.

Пример 2: Проверка поддержки нескольких свойств

@supports ((display: grid) and (gap: 20px)) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@supports not ((display: grid) and (gap: 20px)) {
    .container {
        display: flex;
        flex-direction: column;
    }
}

В этом примере проверяется поддержка как свойства grid, так и свойства gap. Стили применяются только в случае поддержки обоих свойств.

Пример 3: Проверка поддержки пользовательских свойств (переменных)

@supports (--custom-property: value) {
    .element {
        color: var(--custom-color, black);
    }
}

@supports not (--custom-property: value) {
    .element {
        color: black;
    }
}

В этом примере проверяется поддержка пользовательских свойств (CSS-переменных). Если браузер поддерживает переменные, используется значение переменной --custom-color.

Логические операторы в директиве @supports

Директива @supports поддерживает логические операторы and, or и not для создания сложных условий.

Пример использования оператора and

@supports (display: grid) and (gap: 20px) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

Пример использования оператора or

@supports (display: grid) or (display: flex) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@supports not (display: grid) and (display: flex) {
    .container {
        display: block;
    }
}

Пример использования оператора not

@supports not (display: grid) {
    .container {
        display: flex;
        flex-direction: column;
    }
}

Использование директивы @supports для селекторов

Директива @supports также может проверять поддержку специфических селекторов и правил.

Пример проверки поддержки селекторов

@supports (selector(:focus-visible)) {
    button:focus-visible {
        outline: 2px solid blue;
    }
}

@supports not (selector(:focus-visible)) {
    button:focus {
        outline: 2px solid blue;
    }
}

В этом примере проверяется поддержка псевдокласса :focus-visible. Если он поддерживается, применяются соответствующие стили.

Заключение

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