يعد استنشاق وكيل المستخدم هو الأسلوب الأكثر شيوعًا لاكتشاف المتصفح. لسوء الحظ، لا يمكن الوصول إليها بشكل كبير لتطوير الواجهة الأمامية لأسباب متعددة. يحاول بائعو المتصفحات باستمرار جعل عملية الاستنشاق غير ممكنة. وبالتالي، فإن كل متصفح لديه تنسيق سلسلة وكيل المستخدم الخاص به، وهو أمر معقد جدًا للتحليل.

هناك طريقة أكثر بساطة لتحقيق نفس الشيء باستخدام واجهة برمجة تطبيقات CSS للمتصفح، والتي سأعرضها لك. لذلك دعونا ننشئ خطافًا تفاعليًا للكشف عن قدرات المتصفح.

سنستخدم الطريقة الثابتة CSS.supports(). تقوم بإرجاع قيمة منطقية تشير إلى ما إذا كان المتصفح يدعم ميزة CSS معينة أم لا. هذا هو تمثيل جافا سكريبت لـ @supports at-rule. وهو يعمل بشكل مشابه لاستعلامات الوسائط، ولكن مع إمكانات CSS كموضوع.

ربط لاكتشاف الميزات المدعومة

سيؤدي النهج الأكثر سذاجة لاستدعاء CSS.supports() أثناء دورة عرض المكون إلى حدوث مشكلات في بيئات العرض من جانب الخادم، مثل Next.js. نظرًا لأن العارض من جانب الخادم لا يمكنه الوصول إلى واجهات برمجة تطبيقات المتصفح، فإنه ينتج فقط سلسلة من التعليمات البرمجية.

import type {FC} from 'react';

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

سوف نستخدم هذا الخطاف البسيط بدلاً من ذلك. يتلقى الخطاف سلسلة تحتوي على حالة الدعم، وهي قاعدة CSS سنقوم بالتحقق من صحتها، على سبيل المثال. العرض: فليكس.

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

يمكننا الآن التحقق من دعم ميزات CSS المختلفة من داخل مكون React. إليك مرجع 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)
    ');
    // ...
}

اكتشاف متصفح المستخدم باستخدام شروط دعم CSS

من أجل اكتشاف متصفح المستخدم، يتعين علينا القيام ببعض القرصنة.

اختراق المتصفح ليس له علاقة بانتهاكات القانون. إنه مجرد إعلان أو محدد CSS خاص يعمل بشكل مختلف في أحد المتصفحات المتاحة.

هذه هي الصفحة المرجعية التي تحتوي على اختراقات المتصفح المختلفة. بعد تجربة شاملة على جهازي، اخترت ما يلي:

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()‎ أسهل في الصيانة، كما أنها أكثر تفصيلاً. وهو يرحب بالمطورين لاستخدام نهج التدهور الرشيق أو التحسين التدريجي وتطبيق التصحيحات الخاصة بهم بشكل دقيق.