css Вцеломвсетакжекак@mediaдерективой，такжеестьhostобъектпокоторомуможнопроверятьизjs。 ПоддержкаEdge

Posted 2021-05-13

section {
	float: left;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}

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 дерективой*/