Consultas de funciones CSS

Cómo trabajar con consultas de características en CSS

Las consultas de características son una capacidad reciente y relativamente desconocida de CSS, pero unabien apoyadouno.

Podemos usarlo para verificar si una función es compatible con el navegador usando el@supportspalabra clave.

Este es un ejemplo que creo que es especialmente útil, en el momento de escribir este artículo, para verificar si un navegador es compatible con la cuadrícula CSS, lo que se puede hacer usando:

@supports (display: grid) {
  /* apply this CSS */
}

Comprobamos si el navegador es compatible congridvalor para eldisplaypropiedad.

Nosotros podemos usar@supportspara cualquier propiedad CSS, para comprobar cualquier valor.

También podemos usar los operadores lógicosand,orynotpara crear consultas de funciones complejas.

Este ejemplo comprueba si el navegador es compatible con ambosCuadrícula CSSyFlexbox:

@supports (display: grid) and (display: flex) {
  /* apply this CSS */
}

Descarga mi gratisManual de CSS


Más tutoriales de CSS: