Так как браузеры сами решают, какие свойства поддерживать, веб-разработчикам часто нужно узнать, поддерживает ли браузер конкретные свойства, после чего заполнить пробел с помощью Polyfills (пломб, по смыслу), если нужно. Широко применяется способ решения такой задачи с помощью библиотеки JavaScript Modernizr, но это можно сделать и используя только CSS.

В черновике W3C есть новое правило, которое называется @supports. В этом уроке мы покажем, как работает это правило для определения поддержки браузером конкретных свойств с помощью CSS.

Рекомендуемое чтение: Знакомство с библиотекой JavaScript Modernizr

Использование правила @supports 

В отличие от библиотеки JavaScript Modernizr, правилу @supports для работы нужно свойство и заданное значение. Например, нам нужно применить сетку CSS3 только в браузерах, которые ее поддерживают. Это можно написать так:

@support (display: grid;) {
    .selector {
        display: grid;
        grid-column: 3;
        grid-row: 1;
        grid-row-span: 2;
    }
}

Правила CSS внутри правила @support применятся, только если условие будет выполнено. В примере выше правила выполнятся, если браузер поддерживает отображение сеткой. В ином случае браузер применит другие подходящие свойства, находящиеся вне правила @support.

Смешанные условия 

Более того, можно совмещать несколько условий с помощью логических элементов «и», «или», «не». Например, нужно применить правила, только если браузер отвечает следующим условиям:

• Поддерживает или сетки CSS3, или Flexbox CSS3.
• Поддерживает столбцы CSS3.

В этом случае можно написать, например, такие условия:

@support 
    ((display: grid;) or (display:flexbox;))
    and (column-count:3;)   {
    /* Нужные правила CSS */
}

Обратите внимание, что если в условии есть несколько логических элементов, то каждый из них должен быть помещен в круглые скобки, как показано выше.

Способ написания условий, показанный ниже, неверен, и браузер не поймет эти условия:

@support 
    (display: grid;) or (display:flexbox;) and (column-count:3;)    {
    /* Нужные правила CSS */
}

Заключение 

Это отличное правило, и его применение было бы полезно в некоторых случаях.

Сейчас поддержка правила @supports у последних версий браузеров стала весьма широкой. Современные версии браузеров Firefox, Chrome, Opera и их мобильные версии поддерживают это правило, недавно его стал поддерживать и браузер Safari, в том числе и его мобильная версия. Все версии Internet Explorer, включая 11, не поддерживают правило @supports. Но, возможно, этим как раз можно воспользоваться, ведь нередко для Internet Explorer нужны другие значения свойств или даже другие свойства, чем для остальных браузеров.

За дополнительной информацией можно обратиться к следующим источникам:

• Условные правила CSS3 – W3C