CSS
Query di caratteristiche

Sintassi

• @supports [condizione] {/ * Regole CSS da applicare * /}

Parametri

Osservazioni

L'utilizzo di base @supports

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

In termini di sintassi, @supports è molto simile a @media , ma invece di rilevare la dimensione e l'orientamento dello schermo, @supports rileva se il browser può gestire una determinata regola CSS.

Invece di fare qualcosa come @supports (flex) , nota che la regola è @supports (display: flex) .

Rilevazione delle feature di concatenazione

Per rilevare più funzioni contemporaneamente, utilizzare l'operatore and .

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

C'è anche un operatore or un operatore 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(...) */
}

Per la migliore esperienza di @supports , prova a raggruppare le espressioni logiche con le parentesi:

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

Funzionerà se il browser

1. Supporti display: block AND zoom: 1 , o
2. display: flex supportati display: flex AND NOT display: table-cell , o
3. Supporta la transform: translateX(1px) .