@supports

by estelle

HTML

<h1>This browser supports @media or @supports?</h1>
<ul class="query">
    <li class="transitions">@media screen and (transition)</li>
    <li class="animations">@media screen and (animation)</li>
    <li class="transforms">@media screen and (3dtransforms)</li>
    <li class="supports">@supports (property: value)</li>
</ul>

CSS

.query li {
    display: none;
}

@media screen and (-webkit-transition) {
.query .transitions { display: block; }
}

@media screen and (-moz-transition) {
.query .transitions { display: block; }
}

@media screen and (-ms-transition) {
.query .transitions { display: block; }
}

@media screen and (-o-transition) {
.query .transitions { display: block; }
}

@media screen and (transition) {
.query .transitions { display: block; }
}

@media screen and (-webkit-transform-3d) {
.query .transforms { display: block; }
}

@media screen and (-moz-transform-3d) {
.query .transforms { display: block; }
}

@media screen and (-ms-transform-3d) {
.query .transforms { display: block; }
}

@media screen and (-o-transform-3d) {
.query .transforms { display: block; }
}

@media screen and (transform-3d) {
.query .transforms { display: block; }
}

@media screen and (-webkit-animation) {
.query .animations { display: block; }
}

@media screen and (-moz-animation) {
.query .animations { display: block; }
}
@media screen and (-ms-animation) {
.query .animations { display: block; }
}

@media screen and (-o-animation) {
.query .animations { display: block; }
}

@media screen and (animation) {
.query .animations { display: block; }
}

@supports (display: table-cell) and (display: list-item) {
.query .supports { display: block; }
}