크로스 브라우징

크로스 브라우징 작업

1. 도움이 되는 사이트를 이용한다.

   https://caniuse.com

2. 초기화 작업(CSS 초기화 작업)

   브라우저마다 차이가 날 수 있는 부분들에 미리 스타일을 주어 초기화 시킨다.

3. 핵(Hack)

   스타일을 줄 때 특수문자를 넣어서 다른브라우저들에서는 인식이 안되지만 IE 특정 버전에서는 인식되도록 하는 방법이다.

   div{ color:red; *color:blue /* IE7이하 용 */ _color:green /* IE6 용 */ }

   편법적인 방법으로 추천하지 않는다.
   IE8 이상의 브라우저에서 구분해내기가 어려우며 CSS 유지 보수를 어렵게 한다.

4. IE용 주석을 이용한 방법 (Conditional comments)

   HTML 문서 내에서 주석을 이용하여 구별한다.

   lt (less than)	미만
   lte(less than or equal to)	이하
   gt(greater than)	초과
   gte(greater than or equal to)	이상

   <!-- [if IE 7]> <link href="ie7.css" type="text/css" rel="stylesheet"/> <![endif]--> <!-- [if IE 8]> <p> 이 문구는 IE8이 포함되지 않은 하위 브라우저, 즉 IE7,6에서 보여지게 됩니다.</p> <![endif]-->

5. 메타 태그를 이용한 IE모드

   <meta http-equiv="X-UA-Compatible" content="IE=7" />

   head 요소 안에 넣어두며 IE가 문서를 읽고 랜더링 할 때 원하는 모드로 랜더링을 하게 해준다.
   만약 content="IE=edge"로 작성하면 해당브라우저가 할 수 있는 가장 최신의 모드로 랜더링한다.
   edge가 IE의 edge를 표현한다고 생각했는데, 그것은 나의 오해였다!

크로스 브라우징 작업, 어느정도 맞춰야하나?

*IE 하위에서 레이아웃 이상으로 맞추려고 라이브러리를 (PEI.htc...) 들을 사용하는 것은 성능을 저하시킨다.
또한 IE의 버전이 낮을 수록 컴퓨터 성능도 최신이 아닐 가능성이 크다. 그러므로 성능 저하는 더 치명적일 가능성이 크다.
크로스 브라우징의 의미를 정확히 알고 작업해야 한다. (동일성이 아닌 동등성)

 

참고 : 

https://okayoon.tistory.com/entry/크로스-브라우징cross-browsing