먼저 크로스 브라우징(Cross Browsing)이란?
서로 다른 브라우저에서 웹 페이지가 동일한 방식으로 렌더링하는 작업과정을 의미
크로스 브라우저 호환성
웹 개발자들이 CSS를 사용하여 웹 사이트를 스타일링 할때 자주 직면하는 문제인데,
웹 브라우저마다 CSS 구현이 다르므로 웹사이트가 브라우저마다 다르게 표시되는 문제가 생길 수 있다
크로스 브라우징 시 예상되는 문제점들..
1. Box-model : Box-model은 웹 페이지 요소 크기와 간격을 지정하는 방법을 지정하는데, 브라우저 마다 box-model을 다르게 해석하여 레이아웃이 일치하지 않을 수 있다
2 font : 브라우저 마다 기본 글꼴 및 글꼴 크기가 다르므로 웹 사이트 전체 모양에 영향을 줄 수있다
그래서 해결책은?(Safari 브라우저에서 크로스 브라우징하기)
1. Reset.css 적용하기
HTML 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서, 브라우저 간의 차이를 최대한 없애, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것
/* reset.css */
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. height: 100vh
vh(view height)는 사용자의 화면에 맞게 채울 때 사용한다!
body {
height : 100vh;
}**3. 브라우저별로 벤터프리픽스 사용하기
벤터 프리픽스란 ? : 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미
<style>
.button {
background: red; <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow); <!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow); <!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow); <!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow); <!-- CSS 표준 문법 코드 -->
}
</style>4. 라이브러리 사용하기
JQuery같은 라이브러리를 사용하면 내부적으로 크로스 브라우징에 대한 대응이 되있기때문에 수월하다
5. can i use 활용하기
Can I USe란? HTML/CSS/JavaScript 사용 여부를 각 브라우저 별로 지원하는 버젼을 알려주는 사이트
https://caniuse.com/
