Page 150 - CSS

To 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

1. Supports display: block AND zoom: 1, or
2. Supports display: flex AND NOT display: table-cell, or
3. Supports transform: translateX(1px).

Read Feature Queries online: https://riptutorial.com/css/topic/5024/feature-queries

https://riptutorial.com/ 128