: 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고, 의도한 대로 호환성에 맞게 나오게 하는 작업을 말한다.
1. 렌더링 엔진
: 페이지를 렌더할 때에 실질적으로 페이지를 작업해주는 브라우저의 엔진들을 의미한다. 엔진의 종류는 트라이던트, 게코, 웹킷, 프레스토, 블링크, 듀얼 엔진등으로 다양하다.
각 엔진은 사용되는 브라우저의 버전 혹은 지원하는 회사(ex: 구글, MS, 애플..)등에 따라 다르게 사용된다.
2. 대응 순서
타겟이 되는 (가장 점유율이 높은) 브라우저부터 맞춘다.
💡 http://gs.statcounter.com/
위의 사이트는 전 세계 브라우저 점유율 조사 사이트(스탯 카운터)이다. 해당 사이트는 1999년에 시작된 웹 트래픽 분석 웹 사이트이다. 웹 사용 점유율을 계산하는 데 사용되는 것으로 유명하다. 2023년 기준으로 1위 Chrome, 2위 Safari이다.
각 나라별로 사용자들의 순위가 다르며, 모바일과 데스크탑등 다양한 환경에 따라 점유율 또한 달라진다. 그래서 프로젝트 진행시에 타겟과 정책을 잘 잡아야 하며, 크로스 브라우징 작업을 진행할 수 있다.
3. 크로스 브라우징 작업
해당 작업에는 3가지 작업이 존재한다.
1) 각 브라우저에 호환성을 검토
1. Can I Use (https://caniuse.com)
이 사이트는 내가 구현한 사이트에 써주고자 하는 기능을 검색하게 되면, 크로스 브라우징이 가능한지를 체크할 수 있다.
2. 모질라 MDN (https://developer.mozilla.org/ko/)
이는 구글링했을 때 많이 나오는 사이트이다. 위의 사이트처럼 내가 구현하고자 하는 기능을 검색했을 때 사이트의 하단에 해당 기능에 대한 브라우저 호환성을 확인할 수 있다.
2) 기본 스타일 값들을 초기화
웹 브라우저마다 default 값으로 스타일이 적용되어 있다. 그러므로, 브라우저마다의 기본 디폴트 스타일 값이 아니라 동일한 CSS 스타일을 보여주기 위해 default 디폴트 값을 초기화해야 한다.
💡 https://meyerweb.com/eric/tools/css/reset/
해당 사이트는 reset.css를 제공해주는 사이트이다.
- reset.css
* {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; }3) 핵(HACK) 사용하기
스타일을 줄 때 특수문자를 넣어 특정 브라우저들에게는 인식이 안된다. 그러나, IE 특정 버전에는 인식되도록 하는 방법이다. 하지만 핵 사용은 최대한 지양하는게 좋다. 왜냐하면 CSS 유지보수가 어렵다.
크롬 핵
@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. 테스트
- 기본 기능 : 링크, 대화 상자, 메뉴 등
- 모든 대화 상자, 메뉴가 잘 작동하는가?
- 양식 필드의 유효성 검사가 올바르게 작동하는가?
- 그래픽 사용자 인터페이스: 응용 프로그램의 모양과 느낌
- 폰트, 이미지, 레이아웃 등이 디자인대로 잘 나오는가?
- 응답 : 애플리케이션이 사용자 작업에 얼마나 잘 반응하는가
- 반응형 : 다양한 화면 크기와 방향에 맞는지 확인
5. 결론
크로스 브라우징을 안 겪어본 사람은 이 글이 소용이 없을 수 있다. 그러나, 각 페이지별로 기본 제공되는 값들이 다르기 때문에 개발자가 처음에 의도한 대로 사용자에게 보여지지 않는다. 그 결과, 브라우저마다 레이아웃과 폰트 등이 달라져 사용자의 경험에 악영향을 끼친다.
