본문

JavaScript로 브라우저가 CSS 특성을 지원하는지 확인해보자




JavaScript에 브라우저가 CSS 특성을 지원하는지 확인할 수 있는 재미있는 함수가 있어 사용 방법을 공유해 드립니다.



사용 배경

제 사이트 디자인에 macOS Safari, iOS Safari에서 지원하고 있지만 아직 Google Chrome 등 대부분의 주요 브라우저가 지원하지 않는 기능을 지속적으로 사용해 왔습니다. 이런 기능을 지원하는 지 구분해서 브라우저별로 같은 기능을 구현하는 방법에 차이를 주기 위해 기존에는 CSS에서 브라우저를 감지하도록 했었습니다. 하지만 Google Chrome 실험실 기능의 Experimental Web Platform features를 사용하면 작동하기도 하기 때문에 이 기능을 켜서라도 Backdrop-filter을 사용해 보고 싶었습니다. 확실하게 Backdrop-filter을 지원하는 브라우저인지 확인하기 위해서 브라우저가 CSS 특성을 지원하는지 확인할 수 있는 함수를 찾게 되었습니다.


적용 사례는 아래 링크해 드린 SQUARENET Portal을 참고해 보세요. 꼭 로그인하지 않아도 가입하기, 암호 찾기 페이지에서 적용된 사례를 찾아볼 수 있습니다.


- 적용 사례: SQUARENET Portal



브라우저 호환성

(2018. 12. 06 기준: 변동 사항이 있을 수 있으니 아래 출처에서 다시 한 번 확인해 볼 것을 권장합니다.)


- 출처: MDN web docs




사용 예

1
2
3
4
5
# Google Chrome Experimental Web Platform features를 활성했을 때
CSS.supports('backdrop-filter''saturate(100%) blur(20px)')    # True
 
# Google Chrome Experimental Web Platform features를 비활성했을 때
CSS.supports('backdrop-filter''saturate(100%) blur(20px)')    # False
cs



주의 사항

I. 제가 운영하는 사이트는 항상 최신 브라우저만을 지원하고 Internet Explorer 따위는 완전히 포기한 경우입니다. 이 JavaScript 함수는 모든 IE와 Safari를 지원하지 않으니 주의하세요! IE 뿐만 아니라 이 함수가 나온지 그렇게 오래 된 것이 아니기에 주의가 필요합니다.

II. 함수의 대소문자를 잘 구분해서 사용하세요. CSS.supports 대신 css.supports 를 사용하게 되면 작동하지 않습니다.

III. CSS 속성의 값에는 실제로 작동할 수 있는 값을 넣는 것을 권장합니다. 테스트 삼아 1을 넣어보니 어떠한 경우에도 False를 내놓는데, 작동할 수 있는 값을 넣으니 잘 작동합니다. 그럼에도 작동하지 않는 것으로 보인다면 사용하시는 브라우저가 그 속성을 지원하지 않는 것일 가능성이 높습니다.



여담

Backdrop-filter 속성을 지원하는지 보고 지원하는 브라우저에만 적용하려 했는데, 정말 아이러니하게도 정작 Backdrop-filter 속성을 잘 지원하는 Safari에서는 CSS.supports 함수를 지원하지 않습니다. 결국 Backdrop-filter 속성을 지원하는 브라우저거나 Safari인 경우에 특정 스타일을 적용시키는 방향으로 사용하고 있습니다. 얼른 함수를 모든 브라우저에서 지원했으면 하네요.




감사합니다.


공유

댓글 0