User Agent Sniffing ist der beliebteste Ansatz zur Browsererkennung. Leider ist es aus mehreren Gründen für eine Frontend-Entwicklung nicht sehr zugänglich. Browser-Anbieter versuchen ständig, das Schnüffeln zu verhindern. Somit hat jeder Browser sein eigenes User-Agent-String-Format, dessen Analyse sehr komplex ist.

Es gibt eine viel einfachere Möglichkeit, dasselbe mit der Browser-CSS-API zu erreichen, die ich Ihnen zeigen werde. Erstellen wir also einen React-Hook zur Erkennung von Browserfunktionen.

Wir werden die statische Methode CSS.supports() verwenden. Es gibt einen booleschen Wert zurück, der angibt, ob der Browser eine bestimmte CSS-Funktion unterstützt oder nicht. Dies ist ein Javascript-Analogon von @supports at-rule. Es funktioniert ähnlich wie Medienabfragen, jedoch mit CSS-Funktionen als Betreff.

Hook zum Erkennen unterstützter Funktionen

Der naivste Ansatz, CSS.supports() während des Komponenten-Rendering-Zyklus aufzurufen, führt zu Problemen in serverseitigen Rendering-Umgebungen wie Next.js. Da der serverseitige Renderer keinen Zugriff auf Browser-APIs hat, erzeugt er lediglich eine Codezeichenfolge.

import type {FC} from 'react';

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

Wir werden stattdessen diesen einfachen Hook verwenden. Der Hook empfängt eine Zeichenfolge mit Supportbedingung, einer CSS-Regel, die wir validieren werden, z. B. Anzeige: flexibel

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

Jetzt können wir innerhalb der React-Komponente prüfen, ob verschiedene CSS-Funktionen unterstützt werden. Hier ist die MDN @supports-Referenz

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)
    ');
    // ...
}

Erkennen Sie den Benutzerbrowser anhand der CSS-Unterstützungsbedingungen

Um den Benutzerbrowser zu erkennen, müssen wir ein wenig hacken.

Browser-Hack hat nichts mit Gesetzesverstößen zu tun. Es handelt sich lediglich um eine spezielle CSS-Deklaration oder einen speziellen CSS-Selektor, der in einem der verfügbaren Browser anders funktioniert.

Hier ist die Referenzseite mit verschiedenen Browser-Hacks. Nach gründlichen Experimenten auf meiner Maschine habe ich Folgendes ausgewählt:

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

Und hier sieht unser letzter Haken so aus:

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

Vollständige Demo

Hier ist eine voll funktionsfähige Demo des Hooks.

Letzte Gedanken

Ich kann nicht sagen, dass dies ein absolut sicherer und stabiler Ansatz ist. Sehr oft werden Browser aktualisiert, Anbietereigenschaften aufgegeben oder durch Standards ersetzt. Gleichzeitig kann ich Folgendes zum User-Agent-Sniffing sagen. Beide Wege haben ähnliche Probleme. Aber CSS.contains() ist einfacher zu warten und viel detaillierter. Es lädt Entwickler dazu ein, den Ansatz „Graceful Degradation“ oder „Progressive Enhancement“ zu nutzen und ihre Patches granular anzuwenden.