Detección de funciones HTML5 / CSS3

Funciones

• Más de sesenta comprobaciones en cuatro grupos: elementos y atributos HTML, CSS, API del navegador y formatos multimedia
• CSS se mide con `CSS.supports()`, más fiable que escribir un elemento y leer su estilo, que da falsos positivos cuando los valores por defecto coinciden
• Los formatos multimedia se miden con `canPlayType()`, mostrando lo que devuelve (probably / maybe)
• WebGL 2 informa además de la versión del renderizador
• Filtra para ver solo las no compatibles: al diagnosticar un entorno, esas son todo el asunto
• Copia un informe en texto plano con un clic, con el UA al final (lo primero que pregunta cualquiera)
• Las filas no compatibles se despliegan con una frase sobre qué mide la comprobación
• Todo es local: ninguna petición, ninguna cookie

Cómo se usa

1. Abre la página; las comprobaciones se ejecutan al momento
2. Lee el número de arriba: la proporción compatible en esta máquina
3. Cambia a «solo no compatibles»; esas son las que hay que atender
4. Pulsa «Copiar informe» y pégalo en un ticket o un chat

Preguntas frecuentes

¿Por qué no mirar directamente una tabla de compatibilidad?

Porque una tabla responde a otra pregunta. Dice «compatible desde la versión X», mientras que el soporte real depende también del sistema operativo (la misma versión del navegador difiere entre plataformas), del dispositivo (las máquinas modestas desactivan API), de los ajustes del usuario (ahorro de batería, privacidad, políticas de empresa) y del contexto en que estás (`crypto.subtle` solo existe sobre HTTPS, y el Service Worker también). Las tablas sirven para planificar; «¿funciona en esta máquina ahora mismo?» solo se puede medir. No se contradicen, pero no uses una como si fuera la otra.

¿Puedo usar los resultados como prueba de compatibilidad?

Sí, y es más preciso que una tabla, pero solo vale para este navegador en esta máquina. La forma de usar esta herramienta no es «decidir si adopto una función», sino escribir detección de funciones en tu código (`if (CSS.supports(...))`, `if ("showPopover" in HTMLElement.prototype)`) y dejar que cada navegador elija su camino. El valor de la herramienta es saber de antemano qué caminos necesitan preparación y diagnosticar «por qué aquí no hace nada».

¿Por qué no muestra mi navegador y su versión?

Porque juzgar la capacidad por un nombre y una versión es un error. La cadena de agente de usuario se puede falsear, la misma versión se comporta distinto según el sistema operativo, y no hay una correspondencia fiable entre un número de versión y un conjunto de funciones. Lo correcto es detectar la capacidad en sí (lo que hace esta herramienta), no la identidad: es la razón técnica que hay detrás de la vieja regla de que la detección de funciones gana al análisis del UA. El UA aparece en el informe solo para que se sepa de dónde salen los resultados.

Algo sale como no compatible, pero creo que debería funcionar.

Lee primero la nota bajo esa fila. Las causas habituales: hace falta HTTPS (`crypto.subtle`, Service Worker, cámara y micrófono, escritura en el portapapeles), hace falta permiso (geolocalización, notificaciones), es exclusivo de una plataforma (la File System Access API solo existe en la familia Chromium) o está desactivado por ajustes o políticas (el almacenamiento en incógnito, WebGL bajo política de empresa). Nada de eso significa «el navegador no puede», solo «aquí y ahora no»: distinto juicio, distinta solución.