"Cross Browsing?"

1. Cross Browsing 이란?

 : 크롬, 사파리, IE, 오페라, 파이어폭스 등등 브라우저의 종류는 매우 다양합니다. 이 많은 브라우저들의 동작 방식은 W3C라는 국제 웹 표준화 기구에서 제공하는 스펙(가이드 라인)을 따라서 동작합니다. 하지만 W3C에서 제공하지 않은 아주 세밀한 스펙 내용들은 각 브라우저에서 상황에 맞게 구현되어 있습니다. 이 부분이 Chrome을 기반으로 개발한 웹 어플리케이션이 다른 브라우저에서 Chrome과 같이 완전히 정상적으로 동작할 것이라 생각해선 안되는 이유입니다.
 즉, 크로스 브라우징이란 표준 웹 기술을 따르면서 다른 기종 혹은 플랫폼에서 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하기도 합니다.

2. 해결 방법?

 : 해결 방법을 알기 전에 왜 해결해야 하는지 생각해본다면 해결 방법에 좀 더 쉽게 접근할 수 있을 것 같습니다. 만약 S사에서 웹 어플리케이션을 개발한다고 할 때, 모든 개발자가 Chrome을 기반으로 개발을 시작합니다. 그런데 현업과 협의 중에 이 웹 어플리케이션을 Chrome으로 이용하는 클라이언트가 80%정도로 대다수이지만 IE 로 사용하는 클라이언트가 20% 정도 있다고 하여 IE 환경에서의 어플리케이션 동작이 잘 되는지 확인이 필요한 상황이 생겼습니다.
 그렇다면? IE에서 어플리케이션 동작이 문제 없이 되는지 확인하고, 크로스 브라우징 이슈를 없게 개발하면 됩니다.

 다행스럽게도 각 브라우저에서 돌아가는 js로 사용자가 현재 사용하고 있는 브라우저가 어떤 것인지 알 수 있습니다.
 예를 들어 navigator 객체가 대표적으로, 아래는 Chrome 브라우저에서 navigator 객체를 출력한 이미지입니다.
 ( 최 하단 참고 URL에서 쾌락코딩 깃허브 내용 참고하였음 )

Chrome의 navigator 객체

 크롬에서는 appName이 chrome 대신 Netscape 라고 뜹니다. 지금은 Netscape라는 브라우저가 없지만, 파이어폭스도 넷스케이프를 계승했기 때문에 appName이 Netscape 라고 뜬다고 합니다. 
 이러한 객체 내 구분할 수 있는 코드(?)와 같은 것을 활용하여 크로스 브라우징 이슈를 해결하는 다소 노가다성 해결 방법이 있습니다.

 또 다른 해결 방법은 라이브러리를 활용하는 방법이 있습니다.
 jQuery나 underscore.js, Modernizr 등의 라이브러리들이 제공하는 함수를 활용한다면 내부적으로 크로스브라우징 이슈를 해결해줍니다.

 추가적으로 css의 경우도 크로스브라우징 이슈가 발생할 수 있기 때문에 아래 Tool 을 이용하는 습관을 들이자!

• can i use
• http://validator.w3.org/

 

* 내용 참고 : https://wooooooak.github.io/frontend/2018/08/17/%ED%81%AC%EB%A1%9C%EC%8A%A4%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95/