크로스 브라우징(Cross Browsing)
크로스 브라우징(Cross Browsing)
크로스 브라우징은 `브라우저 간 상호 호환성` 을 의미하는 것이다. 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것을 의미한다.
하지만 여기서 중요한 것은 크로스 브라우징이 모든 브라우저에서 100% 똑같이 보이도록 만드는 `동일성`이 아닌 `동등성` 및 `등가성`을 의미하는 것이다.
크로스 브라우징 작업이 필요한 이유
브라우저 마다 랜더링 엔진이 다르기 때문으로
- 작동되지 않는 HTML5, Javascript 코드가 존재
- 해석하지 못하는 CSS 코드 존재
- 브라우저 버그들이 존재
- 브라우저마다 자체적인 CSS 스타일
고려해야 할 부분
호환성 테스트에는 웹 페이지를 구성하는 모든 것이 포함될 수 있지만, 모든 부분을 테스트할 수 없을 것이다. 그렇기 때문에 많은 필수 사항 중 아래와 같이 기능을 분류하여 테스트를 나눠 진행할 수 있다.
- 기본 기능 (링크, 대화 상자, 메뉴 등)
- 모든 대화 상자 및 메뉴가 잘 작동하는가
- 양식 필드의 유효성 검사가 올바르게 작동하는가
- GUI (응용 프로그램의 모양과 느낌)
- 폰트, 이미지, 레이아웃 등이 디자인대로 잘 나오는가
- 응답 (어플리케이션이 사용자 작업에 얼마나 잘 반응하는가)
- 사용자와 웹 페이지의 상호작용에 의해 웹 페이지가 잘 응답하는가
- 반응형 (다양한 화면 크기와 방향에 맞는지 확인)
- 각 기기별 해상도에 따른 지원을 잘 하고 있는가
브라우저 대응 순서, 어떤 브라우저에 초점을 둬야하는가?
가장 점유율이 높은 브라우저부터 맞추는 것이 좋다. 점유율 조사 사이트 : http://gs.statcounter.com/
어떻게 사용해야 할까
🔴 적용할 기능의 지원 브라우저를 파악하여 사용한다.
🔴 모든 환경에서의 지원을 해야한다면 라이브러리를 활용한다.
🔴 직접 구현시에는 '기능 탐지'를 이용한다.
🔴 Tool을 사용한다.
🔻CSS 초기화 작업 reset.css(또는 normalize.css)
🔻웹 브라우저마다 default 값으로 스타일이 적용되어 있기 때문에, 우리는 브라우저마다 기본 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; }🔻만약 해당 브라우저가 작성해놓은 CSS 기능을 지원하지 않는다면, 벤더 프리픽스를 사용한다.
벤더 프리픽스는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다.
즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용한다.
모든 브라우저에서 지원하는 호환 프로퍼티를 먼저 정의하고 CSS3에서 지원하는 프로퍼티를 나중에 정의하는 방법을 사용해야 한다. 이와 같은 이유로 접두어가 없는 속성은 가장 나중에 추가해줘야 한다.
CSS에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로 임시적으로 접두어를 사용하는 것이다. 벤더 프리픽스를 통해 표준으로 만들어지기 전에 일어날 문제들을 사전에 막을 수 있다.
➕ Prefix ➕
IE or Edge → -ms-
Chrome → -moz-
Firefox → -webkit-
Opera → -o-
iOS Safari → -webkit-
Android Browser → -webkit-
Chrome for Android → -webkit-
header {
height: 90px;
width: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;> 브라우저 접두어를 앞쪽에 쓰고, 맨 마지막에 표준 속성을 쓴다. 접두어 버전을 사용하는 브라우저는 그것을 이용 할 것이고, 이해하지 못하는 브라우저는 그 속성을 무시한다. 표준을 지원하는 브라우저는 맨 마지막 있는 속성을 실행한다.
🔗참고🔗