El rastreo de agentes de usuario es el método más popular para la detección del navegador. Desafortunadamente, no es muy accesible para un desarrollo front-end por múltiples razones. Los proveedores de navegadores intentan constantemente que el rastreo no sea posible. Por lo tanto, cada navegador tiene su propio formato de cadena de agente de usuario, que es muy complejo de analizar.

Existe una forma mucho más sencilla de lograr lo mismo utilizando la API CSS del navegador, que les mostraré. Entonces, creemos el gancho React de detección de capacidades del navegador.

Vamos a utilizar el método estático CSS.supports(). Devuelve un valor booleano que indica si el navegador admite una característica CSS determinada o no. Este es un análogo javascript de @supports at-rule. Funciona de manera similar a las consultas de medios, pero con capacidades CSS como tema.

Gancho para detectar funciones compatibles

El enfoque más ingenuo de llamar a CSS.supports() durante el ciclo de renderizado del componente creará problemas en entornos de renderizado del lado del servidor, como Next.js. Debido a que el renderizador del lado del servidor no tiene acceso a las API del navegador, solo produce una cadena de código.

import type {FC} from 'react';

const Component: FC = () => {
    // ? Don't do this!
    const hasFeature = CSS.supports('your-css-declaration');
    // ...
}

En su lugar, usaremos este gancho simple. El gancho recibe una cadena que contiene condición de soporte, una regla CSS que vamos a validar, p.e. pantalla: flexible.

import {useState, useEffect} from 'react';

export const useSupports = (supportCondition: string) => {
    // Create a state to store declaration check result
    const [checkResult, setCheckResult] = useState();

    useEffect(() => {
        // Run check as a side effect, on user side only
        setCheckResult(CSS.supports(supportCondition));
    }, [supportCondition]);


    return checkResult;
};

Ahora podemos comprobar la compatibilidad con diferentes funciones de CSS desde el interior del componente React. Aquí está la referencia de MDN @supports

import type {FC} from 'react';

const Component: FC = () => {

    // Check for native `transform-style: preserve` support
    const hasNativeTransformSupport = useSupports('
        (transform-style: preserve)
    ');

    // Check for vendor prefixed `transform-style: preserve` support
    const hasNativeTransformSupport = useSupports('
        (-moz-transform-style: preserve) or (-webkit-transform-style: preserve)
    ');
    // ...
}

Detectar el navegador del usuario utilizando las condiciones de soporte CSS

Para detectar el navegador del usuario, tenemos que hackear un poco.

El hackeo del navegador no tiene nada que ver con violaciones de la ley. Es solo una declaración o selector CSS especial que funciona de manera diferente en uno de los navegadores disponibles.

Aquí está la página de referencia con varios trucos para el navegador. Después de una experimentación exhaustiva en mi máquina, elegí estos:

const hacksMapping = {
    // anything -moz will work, I assume
    firefox: '-moz-appearance:none',
    safari: '-webkit-hyphens:none',
    // tough one because Webkit and Blink are relatives
    chrome: '
        not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*"'
}

Y aquí está nuestro gancho final:

export const useDetectBrowser = () => {
    const isFirefox = useSupports(hacksMapping.firefox);
    const isChrome = useSupports(hacksMapping.chrome);
    const isSafari = useSupports(hacksMapping.safari);

    return [
        {browser: 'firefox', condition: isFirefox},
        {browser: 'chromium based', condition: isChrome},
        {browser: 'safari', condition: isSafari},
    ].find(({condition}) => condition)?.browser as 
        'firefox' | 'chromium based' | 'safari' | undefined;
};

Demostración completa

Aquí hay una demostración completa del gancho.

Pensamientos finales

No puedo decir que este sea un enfoque estable y a prueba de balas. Los navegadores se actualizan y las propiedades de los proveedores se abandonan o reemplazan con mucha frecuencia. Al mismo tiempo, puedo decir lo mismo sobre el rastreo de agentes de usuario. Ambas formas tienen problemas similares. Pero CSS.contains() es más fácil de mantener y es mucho más granular. Invita a los desarrolladores a utilizar un enfoque de degradación elegante o mejora progresiva y aplicar sus parches de forma granular.