CSS
Consultas de características

Sintaxis

• @supports [condición] {/ * reglas CSS para aplicar * /}

Parámetros

Observaciones

Uso básico de los soportes

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

En términos de sintaxis, @supports es muy similar a @media , pero en lugar de detectar el tamaño y la orientación de la pantalla, @supports detectará si el navegador puede manejar una regla CSS determinada.

En lugar de hacer algo como @supports (flex) , observe que la regla es @supports (display: flex) .

Encadenamiento de detecciones de características.

Para detectar múltiples funciones a la vez, use el operador and .

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

También hay un operador or not y un operador:

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

Para la mejor experiencia de @supports , intente agrupar expresiones lógicas con paréntesis:

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

Esto funcionará si el navegador

1. display: block soportes display: block Y zoom: 1 , o
2. display: flex Y NO display: table-cell , o
3. Soporta la transform: translateX(1px) .