크로스 브라우징이란?
- 웹 페이지가 웹 브라우저의 종류에 구애 받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업
- HTML5, CSS3, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법
발생하는 이유
브라우저마다 렌더링 엔진이 다름
- 작동되지 않은 HTML , Javascript 코드가 존재
- 해석하지 못하는 CSS 코드가 존재
- 브라우저 버그 존재
- 브라우저마다 자체적인 CSS 스타일
렌더링 엔진 (or 레이아웃 엔진) 종류
- 페이지를 렌더링할 때 실질적으로 작업을 하게 되는 엔진
- 같은 엔진을 사용하면 다른 브라우저여도 비슷하게 출력
엔진의 종류
- 트라이던트 (Trident)
- 게코 (Gecko)
- 웹킷 (Webkit)
- 프레스토 (Presto)
- 블링크 (Blink)
- 듀얼 엔진
| 엔진 | 회사 | |
| 트라이던트(Trident) | IE, 아웃룩 이메일 클라이언트나 윈도우 프로그램의 미니 브라우저등에 사용된다. |
마이크로 소프트 |
| 게코(Gecko) | 파이어 폭스, 모질라 재단의 이메일 클라이언트인 선더버드에 사용된다. |
모질라 |
| 웹킷(Webkit) | - 초기 애플사가 사파리 엔진으로 사용하기 위해 차용했으나 현재는 웹킷 프로젝트로 분리되어 개발되고 있다. - 크롬에서도 사용되었던 엔진이며 iOS나 안드로이드의 기본 브라우저들이 이 웹킷 엔진을 사용한다. - 점유율이 높은 엔진이다. |
애플사 |
| 프레스토(Presto) | 오페라 15버전부터 더이상 사용하지 않는다. |
오페라 소프트웨어 |
| 블링크(Blink) | - 웹킷 엔진을 사용하던 구글이 크롬이 개발, 사용하고 있는 엔진이다. - 웹킷에서 줄기를 가져 왔기 때문에 웹킷엔지과 비슷한 모습이 보여진다. - 프레스토 엔진을 버린 오페라가 블링크 엔진을 사용하고 있다. |
구글 |
| 듀얼 엔진 | - 국내 이스트소프트의 스윙(Swing) 브라우저를 예로 들면 크롬과 같은면서도 액티브X를 지원하는데, 독자적인 엔진이 아닌 두가지 엔진을 번갈아 사용하는 방식이기 때문에 가능하다. - 보통 트라이던트와 웹킷or블링크 엔진을 사용한다. |
출처 : https://tlsdnjs12.tistory.com/m/57
크로스 브라우징(cross browsing)이란?
웹 개발자들은 왜 인터넷 익스플로러를 싫어할까란 이유라는 동영상을 보다 크로스 브라우징이라는 단어를 들었다. 어딜가나 코로스 브라우징이란 내용이 나오는데 그것이 정확히 무엇인지 알
tlsdnjs12.tistory.com
브라우저 호환성 대응하는 방법
1. 브라우저에 맞게 사이트를 작업한다.
- 브라우저 별 벤터프리픽스 ( = 브라우저 접두사 )
- 크롬 : -webkit-
- 사파리 : -webkit-
- 파이어폭스 : moz-
- 오페라 : -o- , -webkit-
익스플로러 : -ms-
2. CSS 초기화 작업
웹 브라우저마다 default 값인 스타일 CSS 가 적용되어 있기 때문에 브라우저마다 동일한 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; }
3.meta 태그를 이용
해당 브라우저가 할 수 있는 가장 최신 모드로 렌더링 함
<head>
// ...
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
//...
</head>
브라우저 대응 순서
- 타겟이 되는 (가장 점유율이 높은) 브라우저 부터 맞추는 것이 좋다.
- 보통 기준이 되는 % 이하인 브라우저는 지원에서 제외하기도 함.
- http://gs.statcounter.com/
Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.
gs.statcounter.com
'CS > 개발지식' 카테고리의 다른 글
| Sass (Syntactically Awesome Style Sheets) (0) | 2023.02.01 |
|---|---|
| 개발환경 설정 - Webpack (2) | 2022.12.28 |
| 렌더링 엔진 (0) | 2022.12.26 |
| 웹 브라우저의 동작 순서 (0) | 2022.12.26 |
| 코드 리팩토링와 클린 코드 (0) | 2022.12.26 |
