carlos-sanchez
11/15/2013 - 2:36 AM

Feature Queries: @supports is now supported in every major browser

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)
   }
}