ブラウザとその機能を検出するための単純な React フックを作成してみましょう

ユーザー エージェント スニッフィングは、ブラウザ検出の最も一般的なアプローチです。残念ながら、さまざまな理由により、フロントエンド開発にはあまりアクセスしにくいです。ブラウザ ベンダーは常にスニッフィングを不可能にしようとしています。したがって、各ブラウザには独自のユーザー エージェント文字列形式があり、解析が非常に複雑です。

ブラウザ CSS API を使用して同じことを実現する、より簡単な方法があります。それを紹介します。それでは、ブラウザ機能の検出 React フックを作成しましょう。

CSS.supports() 静的メソッドを使用します。ブラウザーが特定の CSS 機能をサポートしているかどうかを示すブール値を返します。これは @supports at-rule に似た JavaScript です。メディア クエリと同様に機能しますが、CSS 機能が主題となります。

サポートされている機能を検出するためのフック

コンポーネントのレンダリング サイクル中に CSS.supports() を呼び出すという最も単純なアプローチでは、Next.js などのサーバー サイド レンダリング環境で問題が発生します。サーバー側レンダラはブラウザ API にアクセスできないため、コード文字列を生成するだけです。

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<boolean | undefined>();

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


    return checkResult;
};

これで、React コンポーネント内からさまざまな CSS 機能のサポートを確認できるようになりました。 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() の方が保守が簡単で、より粒度が細かいです。開発者がグレースフル デグラデーションまたはプログレッシブ エンハンスメント アプローチを使用し、パッチをきめ細かく適用することを歓迎します。

以上がブラウザとその機能を検出するための単純な React フックを作成してみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。