🌐 크로스 브라우징(Cross Browsing/Cross Browser Testing)

크로스 브라우징이란?

• 가능한 모든 브라우저에서 작동하도록 작업하는 것으로 웹 호환성을 높이는 것을 의미
• 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한 쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법

웹 페이지의 상호 호환성(Cross Browsing) 구축에 대한 오해

• 크로스 브라우징이란 모든 웹브라우저에서 100% 똑같이 보이도록 만드는 것이라는 생각
  ⇒ 크로스 브라우징은 동일성이 아닌 동등성(등가성) 을 의미
• OS가 다르고, HTML을 렌더링하는 엔진이 다르기 때문에 모든 웹브라우저에서 100% 똑같이 보이게 하는 것은 가능하지 않다.
• 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미
• 웹 서비스의 모든 잠재 사용자들이 사이트에 접근할 수 있어야 한다는 것은 매우 중요한 요소

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

• 브라우저마다 *렌더링 엔진이 다르기 때문이다.
  • 작동되지 않는 HTML,JavaScript 코드가 존재
  • 해석하지 못하는 CSS 코드 존재
  • 브라우저 버그들이 존재
  • 브라우저 자체의 기본 CSS 스타일

*렌더링 엔진(레이아웃 엔진) : 요청받은 내용을 브라우저 화면에 표시하는 역할을 담당하는 소프트웨어

크로스 브라우징 방법

1. 브라우저 점유율 파악

• 높은 점유율을 가지고 있는 브라우저를 파악하고, 해당 브라우저를 타겟으로 잡아 대응
• Statcounter(Global): https://gs.statcounter.com/
  

2. 브라우저 호환성 검토 : CSS 속성과 JavaScript 명령어의 각 브라우저 별 지원 여부를 확인

• Can I Use : https://caniuse.com/
• MDN에서도 확인할 수 있다.

3. CSS 초기화 : 브라우저 자체의 기본 CSS 스타일을 초기화

• Reset.css : https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/
• Normalize.css : https://necolas.github.io/normalize.css/

4. Vender Prefix

• CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용
• 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용

* {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
}

5. CSS hack

• 특정 브라우저를 제외하거나, 특정 브라우저에서만 CSS를 적용하는 기법
• CSS 핵은 문법적으로 맞지 않거나, 특정 브랑루저에만 적용되는 비표준인 경우가 많으므로 어쩔 수 없는 경우가 아니라면 사용하는 것을 지양

6. Babel/Polyfill

• Babel : 구 브라우저에서도 최신 JavaScript 코드가 잘 작동하도록 변환해주는 트랜스파일러(Transpiler)
• Polyfill : 최신 JavaScript 버전(ES6)에 새롭게 추가된 Map, Set, Promise와 같은 객체를 구 브라우저에서 사용가능한 객체로 변환해주도와주는 도구

참고

• 웹 표준과 크로스 브라우징(Cross Browser Testing)
• Cross Browsing 가이드
• 크로스 브라우징이란?
• 크로스 브라우징(cross browsing)
• 브라우저는 어떻게 동작하는가?
• CSS3 Vendor Prefix
• CSS 핵