[프론트엔드] 크로스 브라우징(Cross Browsing)이란?

 

지금 하고 있는 프로젝트에서 배포 이후 다양한 환경에서 테스트를 하다 보니 내가 설정하지 않은 css가 적용되어 있었다.

 

❓ 왜 내가 설정하지 않은 css가 적용된 것일까?

웹 페이지 제작 시에 모든 브라우저에서 의도한 대로 나오도록 하는 '크로스 브라우징'을 신경 쓰지 않았기 때문이라는 것을 알게 되었다!

 

그렇다면 크로스 브라우징이란 무엇일까?

 

 

크로스 브라우징이란?

 

- 다양한 웹 브라우저와 버전, 다양한 운영체제에서 웹 사이트가 일관되게 동작하도록 하는 기술 또는 접근 방식

- 모든 화면이 '동일'하게 표시되게 하는 것이 아닌, '동등'한 수준의 정보, 기능 제공을 목표로 한다.

 

 

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

 

크로스 브라우징을 해야 하는 이유, 즉 일관되지 않은 페이지가 나타나는 원인은 다음과 같다.

 

1.  다양한 웹 브라우저

IE, 크롬, 파이어폭스, 사파리 등 다양한 웹 브라우저가 있고, 각각의 브라우저는 HTML, CSS, Javascript를 해석하는 방법이 조금씩 다를 수 있다. 따라서 모든 브라우저에서 일관된 모습으로 표시되지 않을 수 있다.

 

2. 서로 다른 브라우저의 버전

각 브라우저에서도 여러 버전이 존재한다. 이 버전에 따라 지원하는 웹 표준의 범위가 다를 수 있다. 따라서 오래된 버전의 브라우저에서는 최신 웹 기술이나 레이아웃이 올바르게 표시되지 않을 수 있다. 

 

3.  여러 운영체제

윈도우, 맥, 리눅스 등 각 운영체제는 시스템 폰트, 렌더링 엔진 등의 차이로 인해 웹 페이지가 다르게 표시될 수 있다.

 

 

위와 같은 원인들로 인해 동일한 웹 페이지가 동일한 모습으로 표시되지 않을 수 있다.

따라서 웹 개발자들은 웹 사이트의 호환성과 일관된 사용자 경험을 보장하기 위해 '크로스 브라우징'이라는 작업을 해야 한다!

 

---

 

크로스 브라우징을 하는 방법

1. 사전 대응

높은 점유율을 가진 브라우저를 알고 타깃으로 잡는다. 점유율은 다음과 같은 사이트에서 확인해 볼 수 있다.

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

2. 개발

(1) css초기화 작업을 한다.

각 웹 브라우저는 default로 각자 다른 스타일이 적용되어 있기 때문에, 동일한 css스타일을 보여주기 위해서는 default 값을 초기화하는 작업이 필요하다.

* {margin: 0; padding: 0; box-sizing: border-box;}

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; 
} 

html {font-size:10px}

body { line-height: 1; font-family: 'Noto Sans KR', sans-serif; font-size : 1.4rem } 
body, input, button,select, textarea, th, td {color: #222;}

a {text-decoration: none;  color: inherit;}
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 속성 앞에 브라우저 별 접두사(벤더 프리픽스/Vendor Prefix) 붙이기

벤더 프리픽스란 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다. 즉, 해당 기능이 포함되어 있지 않은 구형 브라우저에서도 기능을 사용할 수 있도록 하는 것이다. 접두어 버전을 사용하는 브라우저는 해당 명령을 수행할 것이고, 그렇지 않은 브라우저는 해당 명령을 무시할 것이다. 

 

🥨 웹 브라우저의 벤더 프리픽스

IE or Edge: -ms
Chrome: -webkit-
Firefox: -moz-
Safari: -webkit-
Opera: -o-
iOS Safari: -webkit-
Android Browser: -webkit-
Chrome for Android: -webkit-

 

3. 테스트 및 수정

위와 같은 과정을 통해 개발 후, 테스트를 통해 각 브라우저에서 잘 동작하는지 확인하면 된다.

LamdaTest와 같은 브라우저 테스트를 통해 발생하는 버그를 발견하고 수정함으로써 크로스 브라우징을 할 수 있다.

Next-Generation Mobile Apps and Cross Browser Testing Cloud | LambdaTest