Safari에만 적용되는 코드를 짜고 싶다면?

Safari에만 적용되는 코드를 짜고 싶다면?

브라우저를 감지해서, 현재 브라우저가 Safari인지 아닌지를 판별해야 한다.

 

브라우저를 감지하고 그에 따른 처리를 하는 방법은 상황에 따라 크게 두 가지로 갈린다.

(어느 경우든 주요한 목적은 호환성 때문일 것이다.)

 

1. Safari에서만 CSS 스타일링을 다르게 적용해야 하는 경우

• CSS @규칙을 활용한다.

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
	/* 이 안에 Safari(10.1 이상)에서만 적용할 스타일 작성 */
}}

 

• 위 코드 외에도, 이 페이지의 첫 번째 답변에 다양한 버전의 Safari에 따른 CSS hack들이 친절하게 안내되어 있다.

 

2. Safari에서만 전체적으로 다른 로직이 필요한 경우

• navigator.userAgent와 정규식을 활용한다.
  • Navigator 인터페이스는 사용자 에이전트(user agent)의 상태와 신원 정보를 나타내며, window.navigator 읽기 전용 속성으로 접근할 수 있다. (참고: MDN)
  • 사용자 에이전트(user agent)란 사용자를 대표하는 컴퓨터 프로그램을 의미하는데, 웹 맥락에선 '브라우저'를 의미한다. (참고: MDN)
• 직접 코드를 짜보고 싶다면 아래 페이지에서 다양한 예시를 참고할 수 있다.
  https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser%EF%BB%BF

How to detect Safari, Chrome, IE, Firefox and Opera browser?

• 직접 코드를 작성하기에 시간이 촉박하다면 아래와 같이 브라우저를 감지해주는 라이브러리의 도움을 받을 수 있다. 내부 코드(under the hood)를 확인해보면 이 라이브러리도 결국 userAgent를 사용하고 있음을 알 수 있다. 브라우저를 감지하는 함수들 외에도 이것저것 체크할 수 있는 여러가지 함수들이 많은 라이브러리다. Dependency도 빵개고 가벼운 라이브러리지만 5년 전에 배포된 라이브러리인 게 조금 마음에 걸린다. 하지만 다른 건 몰라도 브라우저가 Safari인지 여부는 아무 문제 없이 잘 감지해준다.
  https://www.npmjs.com/package/is_js

is_js

// 내부 코드
// is current browser safari?
    // parameter is optional
    is.safari = function(range) {
        var match = userAgent.match(/version\/(\d+).+?safari/);
        return match !== null && compareVersion(match[1], range);
    };
    // safari method does not support 'all' and 'any' interfaces
    is.safari.api = ['not'];

// 사용 방법
is.safari();
=> true if current browser is safari