사용자 에이전트 스니핑은 브라우저 감지에 가장 널리 사용되는 접근 방식입니다. 불행하게도 여러 가지 이유로 인해 프런트 엔드 개발에 접근하기가 어렵습니다. 브라우저 공급업체는 스니핑을 불가능하게 만들기 위해 끊임없이 노력하고 있습니다. 따라서 각 브라우저에는 고유한 사용자 에이전트 문자열 형식이 있어 구문 분석하기가 매우 복잡합니다.

브라우저 CSS API를 사용하여 동일한 결과를 얻는 훨씬 더 간단한 방법이 있습니다. 이를 보여 드리겠습니다. 이제 브라우저 기능 감지 React 후크를 만들어 보겠습니다.

CSS.supports() 정적 메소드를 사용하겠습니다. 브라우저가 특정 CSS 기능을 지원하는지 여부를 나타내는 부울 값을 반환합니다. 이것은 @supports at-rule의 자바스크립트 아날로그입니다. 미디어 쿼리와 유사하게 작동하지만 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 규칙인 지원 조건을 포함하는 문자열을 수신합니다. 디스플레이: flex.

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

이제 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()는 유지 관리가 더 쉽고 훨씬 더 세부적입니다. 개발자가 우아한 성능 저하 또는 점진적인 향상 접근 방식을 사용하고 패치를 세부적으로 적용하는 것을 환영합니다.