크로스 브라우징(Cross Browsing)

브라우저 간 호환성 (Cross-browser compatibility)

웹 사이트 또는 웹 애플리케이션이 다양한 브라우저에서 정상적으로 작동하는 능력

동일하게 보이는 것이 아닌, 동등한 수준의 정보와 기능을 제공하는 것!

 

브라우저 간 차이가 발생하는 이유?

웹 브라우저마다 코드를 해석하고 렌더링하는 엔진이 다르다. 

• Chrome과 Opera: Blink
• Firefox: Gecko
• Safari: Webkit

또 브라우저마다 지원되는 기능이 다를 수 있다. 예를 들면, 최신 CSS 또는 HTML5 기능이 구버전의 브라우저에서는 동작하지 않을 수 있다. 

 

크로스 브라우징 (Cross Browsing)

브라우저 간 호환성을 보장하기 위한 방법론

Cross Browsing 이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 데스크톱 웹 브라우저뿐만 아니라 모바일, 임베디드 기기, 홈 네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애인, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.

 

 

그럼 어떻게 보장할 수 있을까? 다음 방법들을 사용해 개발해보자.

 

1. CSS 초기화

브라우저마다 기본적으로 제공하는 스타일이 다를 수 있다. 이전에 의도대로 스타일이 적용되지 않아 개발자 도구를 확인해보니, user agent stylesheet가 적용되어 있었던 적이 있었다.

user agent는 사용자를 대표하는 컴퓨터 프로그램, 즉 웹 브라우저를 말한다. 즉 브라우저가 제공하는 기본 스타일이다. 

 

아래 사이트에서는 스타일을 초기화하는 css 코드를 제공한다.

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

2. CSS 속성 지원 여부 확인

사용할 css 속성이 어떤 브라우저에서 지원되는지 지원되지 않는지 확인할 수 있는 사이트이다. 

• MDN
• CanIUse

 

 

3. CSS 속성 앞 접두사 붙이기 (Vender Prefix)

• Chrome, Safari, Android Browser: -webkit-
• Firefox: moz-
• Opera: -o-, -webkit-
• Egde: -webkit-, -ms-
• Internet Explorer: -ms-

 

4. 라이브러리 사용하기

Modernizer라는 라이브러리를 사용하면, 사용자가 이용 중인 브라우저를 고려하여 개발할 수 있다.

예를 들면, 아래 코드의 awesomeNewFeature 자리에 css, html 기능을 넣어주면 해당 기능의 지원 여부에 따라 다른 동작을 실행할 수 있다. 

  if (Modernizr.awesomeNewFeature) {
    showOffAwesomeNewFeature();
  } else {
    getTheOldLameExperience();
  }

 

 

5. 반응형 디자인

CSS 미디어 쿼리를 활용하여 다양한 스크린 크기 및 해상도에 대응하는 레이아웃을 제공할 수 있다.

 

6. 크로스 플랫폼 도구 사용

Flutter, React Native, Xamarin, MAUI와 같은 크로스 플랫폼 프레임워크를 사용하면, 하나의 코드로 여러 환경에서 일관되게 동작하는 서비스를 만들 수 있다.  예를 들어 React Native는 안드로이드, iOS, 웹, UWP(윈도우) 환경에서의 개발을 지원한다. 

 

 

 

 

참고

https://klmhyeonwooo.tistory.com/84

왜 크로스 브라우징(Cross Browsing)을 고려해야해요?

 

https://velog.io/@hyebinee/크로스브라우징cross-browsing의-중요성과-해결방법

크로스브라우징(cross browsing)의 중요성과 해결방법