크로스 브라우징

크로스 브라우징이란?

세상에는 크롬, 사파리, 인터넷 익스플로어, 오페라, 파이어폭스, 웨일 등등 많은 브라우저들이 존재한다. 이렇게 많은 브라우저들의 동작 방식은 W3C라는 국제 웹 표준화 기구에서 제공하는 스펫(가이드라인)을 따라서 동작하게 된다. 그러나 W3C에서 제공하는 하지 않는 스펙에 대한 아주 디테일한 내용들은 각 브라우저들의 맞게 구현하게 되어있다. 그래서 자신이 짠 코드가 모든 브라우저에서 동일하게, 그리고 올바르게 동작할 것이라 생각하면 안된다. 예를 들어 과걱에 netscape라는 브러우저에서는 이벤트 등록을 아래의 메서드로 했다고 한다.

addEventListner

그러나 IE는 아래와 같다

attachEvent

해결방법?

1. 브라우전 간에 호환되는 방법으로 개발한다.

기존 코드에서 사용하지 않던 dom api나 event, css요소 html markup등을 도입할 때에는 지원하려는 브라우저 스펙에서 호환되는지 확인한다.

can i use
사이트 참고
초록색 = 지원함
빨간색 = 지원하지 않음
노란색 = 부분적으로 지원함
회색 = 지원여부를 아직 모름

2.라이브러리를 활용한다

polyfill, underscore.js 등의 라이브러리에서는 이미 내부적으로 크로스브라우징 이슈에 대한 처리를 해놨다.

3. '기능탐지' 분기를 설정하자

브라우저 종류를 체크하여 상수화하고 이를 통해 분기화 한다.

if(isIE) {
	attachEvenet();
}	 else if(isisWebkit) {
	addEventListener();
}

브라우저 종류 알아오는 방법

var isIe=navigator.userAgent.match(/msie/i);
var isFirefox=navigator.userAgent.match(/firefox/i);
var isOpera=navigator.userAgent.match(/opera/i);
var isWebkit=navigator.userAgent.match(/applewebkit/i);

인터넷 익스플로러(이하 ie) : isIe
파이어폭스 : isFirefox
오페라 : isOpera
사파리, 크롬 : isWebkit

4. reset.css 사용

브라우저의 기본 스타일이 제각각인 경우가 있기 때문에 동일한 스타일을 적용하기 위해서 초기세팅 할때 defalut 값을 초기화 시킨다.

5. Prefix를 적어두자.

아직 웹 표준이 안된 기능등은 브라우저들이 가져다 지원하기 때문에 기능 앞에 브라우저의 엔진을 prefix로 적어두자

아래는 각 브라우저등의 엔진
-webkit- : 사파리나 크롬에서 사용하는 Webkit 엔진 기반의 웹 브라우저에서 사용
-moz- : 파이어폭스 웹 브라우저에서 사용
-o- : 오페라 웹 브라우저에서 사용
-ms- : 인터넷 익스플로러에서 사용

-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;

잘못된 정보가 있다면 언제든 아래 댓글로 부탁드립니다!