Feature Queries: @supports is now supported in every major browser
/*the following transition is applied to .box only if the browser supports CSS transitions.*/
@supports (transition: .5s) {
.box { transition: .5s; }
}
@supports not (display: flex) {
.box { display: inline-block; width: 25%; }
}
@supports (display: flex) and (transition: .5s) {
.box { display: flex; transition: .5s; }
}
@supports (-webkit-transform: rotate(-25deg)) or
( -moz-transform: rotate(-25deg)) or
( -ms-transform: rotate(-25deg)) or
( transform: rotate(-25deg)) {
.box {
-webkit-transform: rotate(-25deg)
-moz-transform: rotate(-25deg)
-ms-transform: rotate(-25deg)
transform: rotate(-25deg)
}
}