크로스브라우징 익스플로러 잡기

크로스브라우징이란!

크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다흔 기종의 운용체계나 HTML 렌더링 기술로 웹페이지를 제작하는 방법론이다.  

인터넷 익스플로러, 오페라, 파이어폭스, 크롬, 사파리 등등 많은 브라우저들이 있고, 사용자들이 어떤 브라우저를 통해서 웹사이트를 들어오던지 문제 없이 웹사이트가 보여지도록 만들어야 한다. 또한 나이가 어린사람, 시각 장애인, 노약자도 웹을 쉽게 사용 할 수 있도록 맞춰야 한다.

사실 브라우저마다 생각보다 많이 다르고, 한 브라우저에서 완벽했는데, 다른 브라우저로 들어가면 난리가 나는 상황을 자주 만나곤 합니다...지금 작업하는 웹사이트를 크로스브라우징하면서 있었던 이슈에 대해 정리해 놓을 겸 블로그를 적어보려 합니다. 

 

우선, 크롬을 기준을 웹사이트를 제작 후, 사파리, 엣지, 인터넷익스플로러를 크로스 브라우징했는데, 익스플로러에서 많은 문제들이 발생했고 해결하였어요. 

 

크로스 브라우징 확인 사이트 Can I use..?

우선 내가 쓰는 코드가 크로스브라우징이 되는지 확인할 수 있는 웹사이트 입니다.

caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 이사이트에서 문제가 있어보이는 코드를 검색해보면 어디서 크로스 브라우징이 안되는지 확인가능해요!

 

인터넷 익스플로러에 사용 불가능했던 코드 

 

01. CSS initial 초기값

position: initial가 작동하지 않았어요. position: absolute를 주고, 미디어 쿼리를 이용해 창이 작아졌을때는 position:absolute의 기능을 없애고 싶어서 초기값을 주었지만 초기값은 익스플로러에서 먹지 않더라고요.ㅎㅎ

익스플로러 전체에서 CSS initial는 사용불가능! 

그래서 대체 값으로 부여주었어요.

 

변경방법

position: initial -> position: static

top : 20px -> top: auto

 

02. javascript forEach

인터넷익스플로러 10부터 맞추고 있는데, 6-10까지 이 함수는 작동하지 않습니다. 그러나  array:forEach는 사용가능하다는점!!

변경방법

기존

var ele = document.queySelectorAll('.ele');
 
ele.forEach(function (item, idx) {});

변경

var ele = document.queySelectorAll('.ele');
 
Array.prototype.forEach.call(ele, function(item, idx){
});

이렇게 변경해주면 작동합니다.

 

03. javascript Template literals

정말 편리한 함수인데, 이걸 못쓴다니 흑흑. 익스플로러 6부터 11까지 모두 작동하지 않아요..

대체 방법은 기능 다 분리해서 쓰는 수밖에..

 

변경방법

기존

var contents = `<div>${test}</div>
<div>크로스브라우징</div>`

var contents = '<div>' + test + '</div><div>크로스 브라우징</div>';

짧으면 괜찮지만 길어지면 굉장히 귀찮은 작업이 되더라고요.

 

04. 자잘한 실수들

크롬같은 경우는 알아서 처리해주는 것들이 은근 있지만 익스플로러 같은 경우는 예민한지 조그만 실수도 용납하지 않아요. 예를 들어 빈변수라던지.. 크로스 브라우징 테스트 할때, 미리 필요없는 코드, 주석처리했던 것들을 한번씩 지워주고 정리해줄 필요가 있습니다. 

 

이외에도 많이 있을 것 같은데 또 발견되면 숫자를 늘려가며 적어보려고 합니다.