連結功能檢測

要一次檢測多個功能，請使用 and 運算子。

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

還有一個 or 運算子和一個 not 運算子：

@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(...) */
}

要獲得最終的 @supports 體驗，請嘗試使用括號對邏輯表示式進行分組：

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

這將適用於瀏覽器

1. 支援 display: block 和 zoom: 1，或
2. 支援 display: flex 而不是 display: table-cell，或
3. 支援 transform: translateX(1px)。