mishelen
7/27/2015 - 10:51 PM

В целом все также как @media дерективой, также есть host объект по которому можно проверять из js. Поддержка Edge, Safari 9, Лисе 23, Хроме

В целом все также как @media дерективой, также есть host объект по которому можно проверять из js. Поддержка Edge, Safari 9, Лисе 23, Хроме 28, Мобильной опере 12.1, нет в Опере Мини, браузере Андроида и Мобильном ИЕ

useSupport.css
content_copyfile_download
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;
    }
}
support.js
content_copyfile_download
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)");
support.css
content_copyfile_download
@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 дерективой*/