[ JavaScript ] 크로스 브라우징

크로스 브라우징

크로스 브라우징이란, 다양한 브라우저에서 동일한 사용자 경험을 제공하는 것을 의미합니다.
글로벌 시장 조사 기관인 StatCounter 에 따르면, 2022년 12월 기준으로 전 세계에서 사용되는 브라우저는 다음과 같습니다.

• Chrome : 64.68%
• Safari : 18.29%
• Edge : 4.23%
• Samsung Internet : 3.05%
• Firefox : 3.01%
• Opera : 2.25%

대부분의 브라우저들이 Chrome 기반인 크로미움 엔진을 사용하고 있습니다. (크로미움 엔진을 사용하는 브라우저들은 크롬, 엣지, 오페라, 삼성 인터넷 등이 있습니다.)
크로미움 엔진을 사용하는 브라우저들은 크로스 브라우징을 고려하지 않아도, 대부분의 브라우저에서 동일한 사용자 경험을 제공할 수 있습니다.
하지만 모든 브라우저가 크로미움 엔진을 사용하는 것은 아니기 때문에, 크로스 브라우징을 고려해야 합니다.

크로스 브라우징이 필요한 이유

브라우저마다 다른 렌더링 엔진을 사용하기 때문에, 브라우저마다 다른 렌더링 결과를 보여줍니다.
크로스 브라우징을 고려하지 않으면, 다른 브라우저에서는 정상적으로 동작하지 않을 수 있습니다.
렌더링 엔진에는 다양한 종류가 있지만, 대표적으로 다음과 같은 렌더링 엔진이 있습니다.

• Trident : 인터넷 익스플로러
• Gecko : 파이어폭스
• Blink : 크롬, 엣지, 오페라, 삼성 인터넷
• Webkit : 사파리

크로스 브라우징을 하기 위한 방법

1. CanIUse 사이트를 이용하여, 브라우저별로 지원하는 기능을 확인
2. CSS 초기화. (reset.css)
3. Hack 코드를 이용하기

크롬 핵
@media screen and (-webkit-min-device-pixel-ratio:0){
    여기에 css 작업
}

파이어폭스 핵
@-moz-document url-prefix() {
    여기다 쓸 css 넣기
}
==

선택자핵

/* IE 6 이상 */
* html #uno { }

/* IE 7 이상 */
*:first-child+html #dos { }

/* IE 7 과 현대 브라우저 */
html>body #tres { }

/* 현대 부라우저 (IE 7 빼고) */
html>/**/body #cuatro {}

/* 오페라 9.27 이상 */
html:first-child #cinco {}

/*사파리,크롬,오페라 다수브라우저핵*/

html[xmlns*=""] body:last-child #seis { }

/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
html[xmlns*=""] body:last-child #seis { }

/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:nth-of-type(1) #siete { }

/* 사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:first-of-type #ocho { }

/* 사파리 3, 크롬 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}

4. 메타 태그 사용하기

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

• IE=edge : IE를 최신 버전으로 렌더링합니다.

Reference

• 크로스 브라우징(cross browsing)
• Cross Browsing