Detección de características frente a detección del navegador
Use detección de características en lugar de analizar el user agent
Detección de características frente a detección del navegador es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Dos enfoques para la compatibilidad
Para saber si el navegador actual admite una funcionalidad, puede detectar la funcionalidad directamente ("IntersectionObserver" in window) o inspeccionar la cadena del agente de usuario (navigator.userAgent.includes("Chrome")). Un enfoque es fiable; el otro es una fuente de errores desde hace mucho tiempo.
Por qué falla la inspección del agente de usuario
Las cadenas del agente de usuario mienten. Edge afirma ser Chrome (y también Safari y Firefox). Chrome en Android envía un UA diferente al de Chrome en iOS. Los navegadores respetan la «congelación» de la cadena UA por motivos de privacidad. Cualquier lógica basada en cadenas UA se rompe cada pocos meses.
Patrón de detección de funcionalidades
Compruebe la API concreta que necesita el código: if ("IntersectionObserver" in window) { ... }. Si la propiedad existe, el navegador la admite; si no, siga la ruta alternativa. La comprobación es directa, rápida y resistente al futuro.
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handler);
} else {
loadPolyfill().then(() => { /* use IntersectionObserver */ });
}Detecte y después use
Combine la detección con una alternativa real. Detectar que falta una funcionalidad solo resulta útil si tiene algo que hacer cuando falta: cargar un polyfill, mostrar una alternativa estática u ocultar la funcionalidad por completo.
Consultas de funcionalidades CSS
CSS tiene su propio mecanismo de detección de funcionalidades: @supports (display: grid) { ... }. El bloque solo se aplica cuando el navegador entiende el par propiedad/valor. Úselo para proporcionar diseños con grid junto con alternativas basadas en float para navegadores antiguos.
@supports (display: grid) {
.grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
.grid > * { float: left; width: 33%; }
}Client Hints del agente de usuario
Los navegadores modernos exponen información estructurada mediante navigator.userAgentData (solo Chromium). Devuelve pares de marca y versión en lugar de una cadena de formato libre. Aun así, prefiera la detección de funcionalidades: las sugerencias del agente de usuario solo son útiles cuando la capacidad no se puede inferir mediante una comprobación de propiedades.
Cuándo es aceptable inspeccionar el agente de usuario
El único caso de uso válido y específico para detectar el UA es excluir navegadores con errores conocidos: por ejemplo, un error conocido de iOS Safari en la versión X. Incluso entonces, prefiera exclusiones basadas en funcionalidades (CSS.supports("aspect-ratio: 1")). La detección del UA debe ser el último recurso.
Bibliotecas al estilo de Modernizr
Modernizr agrupa muchas detecciones de funcionalidades y las expone como clases en el elemento <html> (html.flexbox, html.no-flexbox). Los proyectos modernos rara vez lo necesitan: la mayoría de las detecciones ocupan una sola línea, pero sigue siendo útil para migraciones heredadas.
Prueba de la alternativa
Una vez implementada la detección, pruebe ambas rutas. Abra las DevTools, establezca la funcionalidad como undefined y verifique que la alternativa funciona. Las alternativas que no se prueban se deterioran: cuando un usuario las necesita, a menudo fallan de formas que el desarrollador nunca imaginó.
Detección en frameworks
React, Vue y otros no tienen una API especial de detección: use JavaScript estándar dentro de un efecto o durante la inicialización del componente. Las aplicaciones renderizadas en el servidor deben detectar la funcionalidad en el cliente, porque "IntersectionObserver" in window es undefined durante SSR.
Evite detectar capacidades mediante UA
Algunos equipos comprueban el UA para deducir capacidades («¿Es un iPhone? Entonces probablemente tiene Touch»). Esto confunde dos aspectos que no están relacionados. Detecte el uso táctil directamente mediante "ontouchstart" in window o, mejor aún, prefiera los eventos de puntero, que abstraen el tipo de dispositivo de entrada.
Comprobación de conocimientos
¿Por qué se prefiere la detección de funcionalidades a la inspección del agente de usuario para gestionar las capacidades del navegador?
Resumen
Prefiera la detección de funcionalidades ("API" in window) a la inspección del agente de usuario. CSS dispone de @supports para el mismo propósito. Combine siempre la detección con una alternativa real y pruebe ambas rutas. La inspección del UA debe reservarse para excluir versiones de navegadores con errores conocidos, nunca para deducir capacidades.
Preguntas frecuentes
¿La lección «Detección de características frente a detección del navegador» es gratis?
Sí — el texto completo de «Detección de características frente a detección del navegador» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Detección de características frente a detección del navegador»?
Use detección de características en lugar de analizar el user agent Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Detección de características frente a detección del navegador»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- La filosofía PE: empezar por HTML
- Detección de características frente a detección del navegador
- Degradación gradual frente a mejora progresiva
- Crear un acordeón con PE