@supports

Эта css директива определяет поддерживает ли браузер те или иные возможности, и, если поддерживает, применяет к элементам заданные стили. Как Modernizr, но заточенный на проверку CSS-свойств.

/* Проверка одного условия */
@supports (display: flex) {
.module { display: flex; }
}

/* Проверка нескольких условий */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}

#css | #полезности