उपयोगकर्ता एजेंट सूँघना ब्राउज़र का पता लगाने के लिए सबसे लोकप्रिय तरीका है। दुर्भाग्य से, कई कारणों से यह फ्रंट-एंड डेवलपमेंट के लिए बहुत सुलभ नहीं है। ब्राउज़र विक्रेता लगातार प्रयास कर रहे हैं कि सूंघना संभव न हो। इस प्रकार, प्रत्येक ब्राउज़र का अपना उपयोगकर्ता एजेंट स्ट्रिंग प्रारूप होता है, जिसे पार्स करना बहुत जटिल होता है।

ब्राउज़र सीएसएस एपीआई का उपयोग करके इसे प्राप्त करने का एक और अधिक सरल तरीका है, जो मैं आपको दिखाने जा रहा हूं। तो आइए ब्राउज़र क्षमताओं का पता लगाने वाला रिएक्ट हुक बनाएं।

हम CSS.supports() स्थिर विधि का उपयोग करने जा रहे हैं। यह एक बूलियन मान लौटाता है जो दर्शाता है कि ब्राउज़र किसी दिए गए सीएसएस सुविधा का समर्थन करता है या नहीं। यह @supports at-rule का जावास्क्रिप्ट एनालॉग है। यह मीडिया प्रश्नों के समान काम करता है, लेकिन एक विषय के रूप में सीएसएस क्षमताओं के साथ।

समर्थित सुविधाओं का पता लगाने के लिए हुक

घटक रेंडर चक्र के दौरान CSS.supports() को कॉल करने का सबसे सरल तरीका नेक्स्ट.जेएस जैसे सर्वर साइड रेंडरिंग वातावरण में समस्याएं पैदा करेगा। क्योंकि सर्वर साइड रेंडरर के पास ब्राउज़र एपीआई तक कोई पहुंच नहीं है, यह सिर्फ कोड की एक स्ट्रिंग तैयार करता है।

import type {FC} from 'react';

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

हम इसके बजाय इस सरल हुक का उपयोग करेंगे। हुक को एक स्ट्रिंग प्राप्त होती है जिसमें समर्थन शर्त होती है, एक सीएसएस नियम जिसे हम सत्यापित करने जा रहे हैं, उदाहरण के लिए। प्रदर्शन: फ्लेक्स.

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

अब हम रिएक्ट घटक के अंदर से विभिन्न सीएसएस सुविधाओं के समर्थन की जांच कर सकते हैं। यहाँ 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)
    ');
    // ...
}

सीएसएस समर्थन शर्तों का उपयोग करके उपयोगकर्ता ब्राउज़र का पता लगाएं

उपयोगकर्ता ब्राउज़र का पता लगाने के लिए, हमें थोड़ी हैकिंग करनी होगी।

ब्राउज़र हैक का कानून के उल्लंघन से कोई लेना-देना नहीं है। यह सिर्फ एक विशेष सीएसएस घोषणा या चयनकर्ता है जो उपलब्ध ब्राउज़रों में से एक में अलग तरह से काम करता है।

यहां विभिन्न ब्राउज़र हैक वाला संदर्भ पृष्ठ है। अपनी मशीन पर गहन प्रयोग के बाद, मैंने इन्हें चुना है:

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

और यहां हमारा अंतिम हुक जैसा दिखता है:

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

पूर्ण डेमो

यहां हुक का पूर्ण कार्यशील डेमो है।

अंतिम विचार

मैं यह नहीं कह सकता कि यह बुलेट-प्रूफ़, स्थिर दृष्टिकोण है। ब्राउज़र अपडेट हो जाते हैं, विक्रेता की संपत्तियों को अक्सर छोड़ दिया जाता है या मानक द्वारा प्रतिस्थापित कर दिया जाता है। साथ ही, मैं उपयोगकर्ता एजेंट सूँघने के बारे में भी यह कह सकता हूँ। दोनों तरीकों में समान समस्याएं हैं. लेकिन CSS.contains() को बनाए रखना आसान है, और यह अधिक बारीक है। यह डेवलपर्स को सुशोभित गिरावट या प्रगतिशील वृद्धि दृष्टिकोण का उपयोग करने और अपने पैच को बारीक रूप से लागू करने के लिए स्वागत करता है।