A detecção de agente do usuário é a abordagem mais popular para detecção de navegador. Infelizmente, não é muito acessível para um desenvolvimento front-end por vários motivos. Os fornecedores de navegadores tentam constantemente impedir a detecção. Assim, cada navegador tem seu próprio formato de string de agente de usuário, que é muito complexo de analisar.

Existe uma maneira muito mais simples de conseguir o mesmo usando a API CSS do navegador, que vou mostrar a vocês. Então, vamos criar recursos de detecção do navegador React hook.

Vamos usar o método estático CSS.supports(). Ele retorna um valor booleano que indica se o navegador suporta um determinado recurso CSS ou não. Este é o análogo javascript de @supports at-rule. Funciona de forma semelhante às consultas de mídia, mas com recursos CSS como assunto.

Gancho para detectar recursos suportados

A abordagem mais ingênua de chamar CSS.supports() durante o ciclo de renderização do componente criará problemas em ambientes de renderização do lado do servidor, como Next.js. Como o renderizador do lado do servidor não tem acesso às APIs do navegador, ele apenas produz uma sequência de código.

import type {FC} from 'react';

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

Em vez disso, usaremos este gancho simples. O gancho recebe uma string contendo condição de suporte, uma regra CSS que iremos validar, por exemplo. exibição: flexível.

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;
};

Agora podemos verificar o suporte a diferentes recursos CSS dentro do componente React. Aqui está a referência do 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 o navegador do usuário usando condições de suporte CSS

Para detectar o navegador do usuário, temos que fazer alguns hackers.

O hack do navegador não tem nada a ver com violações da lei. É apenas uma declaração ou seletor CSS especial que funciona de maneira diferente em um dos navegadores disponíveis.

Aqui está a página de referência com vários hacks de navegador. Após experimentação completa em minha máquina, escolhi estes:

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:"*"'
}

E aqui está nosso gancho final parecido com:

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;
};

Demonstração completa

Aqui está uma demonstração completa do gancho.

Considerações finais

Não posso dizer que esta seja uma abordagem estável e à prova de balas. Os navegadores são atualizados, as propriedades dos fornecedores são abandonadas ou substituídas pelo padrão com muita frequência. Ao mesmo tempo, posso dizer isso sobre a detecção de agente de usuário. Ambas as formas têm problemas semelhantes. Mas CSS.contains() é mais fácil de manter e muito mais granular. Ele incentiva os desenvolvedores a usarem uma abordagem de degradação graciosa ou aprimoramento progressivo e aplicarem seus patches granularmente.