Consultas de funciones 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 */
}

Más tutoriales de CSS:

• La guía de Flexbox
• Tutorial de cuadrícula CSS
• Variables CSS (propiedades personalizadas)
• Introducción a PostCSS
• La propiedad de margen CSS
• Cómo centrar un elemento con CSS
• Fuentes del sistema CSS
• Cómo imprimir tu HTML con estilo
• Una guía introductoria a las transiciones CSS
• Un tutorial de animaciones CSS
• Introducción a CSS
• La guía CSS
• Cómo configurar Tailwind con PurgeCSS y PostCSS
• La hoja de trucos de Tailwind
• Cómo rotar continuamente una imagen usando CSS
• Hacer que una tabla responda usando CSS
• Cómo depurar CSS biseccionando
• Selectores CSS
• Cascada CSS
• Especificidad CSS
• Selectores de atributos CSS
• Colores CSS
• Unidades CSS
• URL de CSS ()
• Tipografía CSS
• El modelo de caja CSS
• La propiedad de posición CSS
• Consultas de medios CSS y diseño receptivo
• Consultas de funciones CSS
• Transformaciones CSS
• Cómo diseñar listas usando CSS
• Prefijos de proveedores de CSS
• Herencia CSS
• Pseudoclases CSS
• Pseudoelementos CSS
• Diseñar tablas HTML con CSS
• La propiedad de visualización de CSS
• La función CSS calc ()
• Bordes CSS
• Importando un archivo CSS usando @import
• Manejo de errores CSS
• Filtros CSS
• Tamaño de caja CSS
• Fondos CSS
• Comentarios CSS
• Fuentes CSS
• Relleno CSS
• La propiedad flotante de CSS y su compensación
• Normalización de CSS
• La propiedad de índice z de CSS
• Cómo deshabilitar la selección de texto usando CSS
• Cómo poner un elemento en la parte inferior de su contenedor usando CSS
• Cómo invertir colores usando CSS
• Etiquetas previas receptivas en CSS
• Incrustaciones de video de YouTube receptivas
• ¿Cuáles son los buenos valores de CSS Breakpoint para Responsive Design?
• Cómo alinear el centro en flexbox