var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
var supportsFlex = CSS.supports("display", "flex");
// The second usage method includes simply providing the entire string to be parsed:
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
@supports(prop:value) {
/* more styles */
}
@supports (display: flex) {
div { display: flex; }
}
/*Возможно использование с ключевым словом not*/
@supports not (display: flex) {
div { float: left; } /* alternative styles */
}
/* А можно делать и множественные проверки */
/* or */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
/* use styles here */
}
/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
}
/* and and or */
@supports ((display: -webkit-flex) or
(display: -moz-flex) or
(display: flex)) and (-webkit-appearance: caret) {
/* use styles here */
}
/* В целом все также как @media дерективой*/