Mari buat cangkuk React yang mudah untuk mengesan penyemak imbas dan keupayaannya

Menghidu ejen pengguna ialah pendekatan paling popular untuk pengesanan penyemak imbas. Malangnya, ia tidak begitu mudah diakses untuk pembangunan bahagian hadapan kerana pelbagai sebab. Vendor penyemak imbas sentiasa cuba membuat menghidu tidak dapat dilakukan. Oleh itu, setiap penyemak imbas mempunyai format rentetan ejen pengguna mereka sendiri, yang sangat kompleks untuk dihuraikan.

Terdapat cara yang lebih mudah untuk mencapai perkara yang sama menggunakan API CSS pelayar, yang saya akan tunjukkan kepada anda. Jadi mari kita cipta pengesanan keupayaan penyemak imbas React hook.

Kami akan menggunakan kaedah statik CSS.supports(). Ia mengembalikan nilai boolean yang menunjukkan sama ada penyemak imbas menyokong ciri CSS yang diberikan atau tidak. Ini adalah analog javascript bagi @supports at-rule. Ia berfungsi serupa dengan pertanyaan media, tetapi dengan keupayaan CSS sebagai subjek.

Cangkuk untuk mengesan ciri yang disokong

Pendekatan paling naif untuk memanggil CSS.supports() semasa kitaran pemaparan komponen akan menimbulkan masalah dalam persekitaran Perenderan Sisi Pelayan, seperti Next.js. Oleh kerana pemapar sebelah pelayan tidak mempunyai akses kepada API penyemak imbas, ia hanya menghasilkan rentetan kod.

import type {FC} from 'react';

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

Kami akan menggunakan cangkuk mudah ini sebaliknya. Cangkuk menerima rentetan yang mengandungi syarat sokongan, peraturan CSS yang akan kami sahkan, mis. paparan: lentur.

import {useState, useEffect} from 'react';

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

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


    return checkResult;
};

Kini kami boleh menyemak sokongan ciri CSS yang berbeza dari dalam komponen React. Berikut ialah rujukan 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)
    ');
    // ...
}

Kesan pelayar pengguna menggunakan syarat sokongan CSS

Untuk mengesan pelayar pengguna, kami perlu melakukan sedikit penggodaman.

Godam penyemak imbas tidak ada kaitan dengan pelanggaran undang-undang. Ia hanyalah pengisytiharan atau pemilih CSS khas yang berfungsi secara berbeza dalam salah satu penyemak imbas yang tersedia.

Berikut ialah halaman rujukan dengan pelbagai penggodam penyemak imbas. Selepas percubaan menyeluruh pada mesin saya, saya telah memilih ini:

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

Dan inilah rupa cangkuk terakhir kami seperti:

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

Demo penuh

Berikut ialah demo kerja penuh cangkuk.

Fikiran akhir

Saya tidak boleh mengatakan bahawa ini adalah pendekatan kalis peluru dan stabil. Penyemak imbas dikemas kini, sifat vendor ditinggalkan atau digantikan oleh standard dengan kerap. Pada masa yang sama, saya boleh mengatakan ini mengenai ejen pengguna menghidu. Kedua-dua cara mempunyai masalah yang sama. Tetapi CSS.contains() lebih mudah diselenggara dan ia lebih terperinci. Ia mengalu-alukan pembangun untuk menggunakan degradasi yang anggun atau pendekatan peningkatan progresif dan menggunakan tampalan mereka secara berbutir.

Atas ialah kandungan terperinci Mari buat cangkuk React yang mudah untuk mengesan penyemak imbas dan keupayaannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!