Hispanopedia WikiLa detección de características (también conocida como prueba de características ) es una técnica utilizada en el desarrollo web para gestionar las diferencias entre entornos de ejecución (normalmente navegadores web o agentes de usuario ), mediante la comprobación programática de indicios que sugieren que el entorno puede o no ofrecer cierta funcionalidad. Esta información se utiliza posteriormente para adaptar la aplicación al entorno: para utilizar determinadas API o para ofrecer una mejor experiencia de usuario. [ 1 ]
Sus defensores afirman que es más fiable y a prueba de futuro que otras técnicas como el análisis del agente de usuario y los trucos CSS específicos del navegador. [ 1 ]
Técnicas
Una prueba de características puede adoptar muchas formas. Esencialmente, se trata de cualquier fragmento de código que proporcione cierto grado de confianza en que una característica requerida es compatible. Sin embargo, a diferencia de otras técnicas, la detección de características suele centrarse en realizar acciones directamente relacionadas con la característica que se desea detectar, en lugar de heurísticas . [ 2 ]
JavaScript
La detección de características de JavaScript puede inspeccionar el DOM y el entorno local de JavaScript para comprobar si se admiten las características o API del navegador. [ 3 ]
La técnica más sencilla consiste en comprobar la existencia de un objeto o propiedad relevante. Por ejemplo, la API de geolocalización (utilizada para acceder al conocimiento que tiene el dispositivo de su ubicación geográfica, posiblemente obtenido de un dispositivo de navegación GPS ) expone una geolocationpropiedad en el navigatorobjeto del DOM; la presencia de dicha propiedad implica que la API de geolocalización es compatible.
si ('geoubicación' en el navegador) { // Se admite la API de geolocalización }Para mayor confianza, algunas pruebas de funcionalidades intentarán activar la funcionalidad y luego buscar indicios de que se comportó correctamente. Por ejemplo, una prueba de compatibilidad con cookies podría intentar establecer un valor como cookie y luego verificar que se pueda leer.
CSS
En CSS , la regla @ introducida en 2015 permite comprobar si una determinada característica es compatible. [ 4 ] Por ejemplo, el siguiente código activa las declaraciones solo si el agente de usuario las admite :@supportsdisplay:flex
@supports ( display : flex ) { .container { display : flex ; } }Indetectables
Algunas funciones del navegador se consideran indetectables , ya que no existen indicios suficientes para garantizar su compatibilidad. Esto se debe a menudo a la información limitada disponible para el entorno JavaScript del navegador; por lo general, las funciones deben exponerse a través del DOM de alguna manera para poder detectarse mediante JavaScript.
Cuando se detectan elementos indetectables, es común recurrir al análisis del agente de usuario como mecanismo alternativo, o emplear código defensivo para minimizar el impacto si resulta que la función no es compatible.
El proyecto Modernizr mantiene un registro de los elementos indetectables conocidos en su wiki .
Véase también
Referencias
- 1 2 Meiert, Jens (14 de julio de 2021). El glosario de desarrollo web . Frontend Dogma.
- ↑ "Implementación de la detección de características" . Documentación web de MDN . Consultado el 23 de agosto de 2022 .
- ↑ "Implementación de la detección de características" . MDN Web Docs . Mozilla . Consultado el 27 de abril de 2026 .
- ↑ "@supports" . Documentación web de MDN . Consultado el 8 de abril de 2026 .
- Accesibilidad web
- Desarrollo web