Las consultas de características, conocidas como Feature Queries en CSS, se han convertido en un elemento esencial para gestionar la compatibilidad del diseño web con diversos navegadores. Este concepto permite a los desarrolladores evaluar si el navegador que utilizan es compatible con ciertas características de CSS y, en caso afirmativo, aplicar reglas de estilo específicas. Si el navegador no soporta las características solicitadas, simplemente ignora las reglas establecidas. ¡Una verdadera ventaja para asegurar un diseño web robusto y adaptable!
¿Cómo funcionan las consultas de características?
El funcionamiento de las consultas de características en CSS es simple pero poderoso. Se utilizan mediante la directiva @supports en CSS, similar a @media o @keyframes. A continuación, te mostramos cómo se podría implementar un código básico.
@supports(display: grid){/* Código específico para navegadores compatibles con CSS Grid */.contenedor{display: grid;grid-template-columns:repeat(3,1fr);grid-gap:20px;}}
En el ejemplo anterior, verifica si el navegador soporta la propiedad display: grid. Si es compatible, el código dentro de las llaves se ejecutará, aplicando CSS Grid al contenedor.
¿Por qué es importante utilizar consultas de características?
Utilizar consultas de características se vuelve crucial por varias razones:
Compatibilidad Mejorada: Ayuda a garantizar que las características modernas de CSS no rompan el diseño en navegadores más antiguos.
Desarrollo Progresivo: Permiten un enfoque de mejora progresiva, asegurando que todos los usuarios, independientemente del navegador, tengan una experiencia coherente.
Optimización del Rendimiento: Los códigos que no son compatibles no se ejecutan en navegadores que no soportan las características, evitando así posibles errores o comportamientos inesperados.
¿Qué tan compatibles son las consultas de características?
Las consultas de características, si bien no son nuevas, ofrecen una excelente compatibilidad con los navegadores modernos. Según la herramienta "Can I Use", una notable cantidad de navegadores ya las soportan, lo que las hace extremadamente útiles cuando se trabaja con nuevas características de CSS como CSS Grid. Sin embargo, siempre es recomendable verificar esta compatibilidad antes de implementarlas en un proyecto de producción.
Consejos prácticos para el uso de consultas de características
Revisar compatibilidad: Usa herramientas como "Can I Use" para asegurarte que las consultas que deseas usar son ampliamente soportadas.
Documentación adicional: Explora recursos como el escrito por Jen Simos, "Using Feature Queries in CSS", para obtener una comprensión más profunda y ejemplos de uso.
Prueba y mejora: No temas a experimentar con estas consultas en entornos de prueba antes de aplicarlas a producción.
Siempre recuerda que una buena práctica en el desarrollo web es mantenerse informado y seguir aprendiendo, ya que las tecnologías evolucionan constantemente. ¡Así que sigue explorando las maravillas del CSS y asegura un desarrollo web más estable y avanzado!
@supports se me hace muy interesante para las reglas de las nuevas actualizaciones de css3...
Por ejemplo:
@supports(grid-template-columns)and(not(subgrid)){// Creas las columnas del padre dentro del hijo}//Si soportas grid-template-columns y no soportas subgrid, interpreta el contenido de las llaves@supports(subgrid){ grid-template-columns: subgrid;}//Si soportas subgrid interpreta el contenido de las llaves
Esto fue un ejemplo que se me ocurrió, también se podría utilizar después con el grid-template-rows:massonry o con otras cosas nuevas de css 😃
Excelente aporte, solo una pequeña corrección, sino incluyes dentro de los paréntesis la propiedad y el valor probablemente no funcione.
sali muy triste de este curso :(
Yo también :(
Me encantan los cursos con la Teacher, pero después de toda la teoría del curso de Grid, creía que este si seria full proyectos 😪Aun así dejare mis 5 estrellitas por que tiene mucho material muy bueno y mucha documentación.
yes! harta teoria! toca aplicar la practica uno mismo! espero te vaya genial Joel! saludos desde chile
el @supports lo veo mas como una condición, pero desde mi punto de vista no le encuentro mucha utilidad, talvez por que no eh encontrado donde aplicarlo, pero con solo pensarlo sigo llegando a la misma conclusión, y es que, si el sabemos que tenemos algo que el navegador no lo va a tomar, por que aplicarlo?, seria mas a conveniente ver que cosas si con compatibles con el navegador y trabajar con ello, nos ahorraríamos mas código de paso xD
CSS es una hoja de estilo en cascada, así que cuando tienes dudas que algo no funciona lo sueles poner al final, si no funciona normal será ignorado. Ahora el @supports lo veo más útil al momento de trabajar con múltiples personas, donde una nueva empezara a leer tu código; es ahí que aportaría valor al resaltar que parte del código funcionara siempre y cuando sea compatible dicha característica.
Ohhh que genial, aunque no le veo mucho uso, es decir, si el navegador no soporta una característica, por más que la pongas no la va a tomar en cuenta no? ¿Entonces para qué serviría el @support? ¿Cuál sería la diferencia entre usarlo y no usarlo? 🤔
Mi opinion es que pensando en el caso del uso massonry de la clase pasada, podriamos usar la propiedad supports para verificar si el navegador lo soporta y asi poder aplicarla. En caso contrario podriamos usar otro valor para la propiedad grid-template-rows
Aun así no le veo tanto sentido, porque si el naevegador no soporta massonry, simplemente no va a tomar la propiedad por lo que tomaría los estilos para el caso en que no lo soporte 🤔
Vengo de estudiar ingles en la escuela de ingles de platzi! :D solo me gustaría aclarar que Features se pronuncia con la T, si se pronuncia con la SS como lo hace Estefany, tendríamos Fissures lo cual significa Fisuras o Grietas.
Excellent!!!
Es una paradoja usar esta herramienta porque no todos los navegadores son compatibles! con @supports
Bueno, sería probable de no ser de que el 94.7% de navegadores lo son para este momento. El único que no lo admite, como siempre, es IE o Internet Edge.
cuando el código no es compatible con el navegador, qué muestra en pantalla? error o se rompe el código?????
En el inspector de elementos debería mostrar un error en la propiedad.
No se visualizará de manera correcta.
Pues al igual que muchos, tampoco lo veo mucho sentido utilizar @supports en CSS a menos que se estén haciendo diferentes pruebas en diferentes navegadores pero por ejemplo, si existe una propiedad que solo funciona en Firefox y no en los demás, esa propiedad es mejor no utilizarla hasta que sea un poco más global, no le veo sentido poner estilos sabiendo que solo se verán ejecutados en un navegador.
¿Sera posible utilizar esta característica para establecer distintos formatos en las imágenes de fondo para que en dado caso que alguno no sea soportado por el navegador se aplique algún otro? Por ejemplo como se hace actualmente con Modernizr.
No lo creo, ya que esta característica únicamente verifica el soporte de propiedades CSS, desconozco si exista alguna forma de hacer lo que dices, he visto que algunos lo hacen con JavaScript 🤔
Gracias por su respuesta @RetaxMaster.
De lo que va del curso me he encontrado con muchas muletillas como por ejemplo: "básicamente" y "justamente" una y otra y otra vez. He tenido que omitir estas palabras en mis apuntes, lo siento Teff lo tenia que decir...
Mi aporte:
/* Estilo general para navegadores que no soportan CSS Grid */.container{display: block;}/* Estilos específicos si CSS Grid es soportado */@supports(display: grid){.container{display: grid; grid-template-columns:repeat(3, 1fr);gap: 10px;}}````/* Estilo general para navegadores que no soportan CSS Grid */``.container{``display: block;``}``/* Estilos específicos si CSS Grid es soportado */``@supports(display: grid){``.container{``display: grid;`` grid-template-columns:repeat(3, 1fr);``gap: 10px;``}``}`
📌Resultado de mi proyecto:
Repositorio:
Demo:
Tutorial (youtube):
Supongo que la idea es trabajar con cosas compatibles con todos los navegadores e ir implementando cosas especiales con support :D
Es cierto las clases son un poco aburridoras por la tematica tipo exposicion y no practicas en codigo, por el momento me toca ponerla en velocidad 2x, y esperar que el Espiritu me ilumine para hacer varios proyectos despues del curso y seguir aprendiendo. Soy más practico.
Hay dos tipos de personas en estos cursos.
Las que no se dejan influenciar y se dan cuenta de lo nada practico que es este curso y que no les servirá nada para ser desarrolladores web. Y los ignorantes que dicen que les va bien y no se preocupan, pero que ya veran cuando estén frente al código.
Me parece muy útil para tener en cuenta las distintas compatibilidades.
