Chaining feature detections
suggest changeTo detect multiple features at once, use the and
operator.
@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
/* Probably do some fancy 3d stuff here */
}
There is also an or
operator and a not
operator:
@supports (display: flex) or (display: table-cell) {
/* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
/* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}
For the ultimate @supports
experience, try grouping logical expressions with parenthesis:
@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
/* ... */
}
This will work if the browser
- Supports
display: block
ANDzoom: 1
, or - Supports
display: flex
AND NOTdisplay: table-cell
, or - Supports
transform: translateX(1px)
.
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents