Safari 브라우저에서 크로스 브라우징 하기

 

우선 크로스 브라우징이란?

서로 다른 브라우저에서 웹 페이지가 동일한 방식으로 렌더링하는 작업과정을 의미한다.

 

크로스 브라우징을 고려하지 않으면 웹 브라우저마다 CSS 구현이 다르기 때문에 웹사이트가

브라우저마다 다르게 표시되는 문제가 생길 수 있습니다.

 

크로스 브라우징 시 예상되는 문제들

1. Box-model : Box-model은 웹 페이지 요소 크기와 간격을 지정하는 방법을
지정하는데, 브라우저 마다 box-model을 다리게 해석하여 레이아웃이 일치하지 않을 수 있다

2. Font : 브라우저마다 기본 글꼴 및 글꼴 크기가 다르므로 웹 사이트 전체 모양에 영향을 줄 수 있다

 

문제에 대한 해결책?(Safari 브라우저에서 크로스 브라우징하기)

1.can i use

HTML/CSS/JS 사용 여부를 각 브라우저 별로 지원하는 버전을 알려주는 사이트이다

해당 사이트에 적용하고자하는 속성을 검색하여 브라우저 호환성을 알아볼 수 있었다.

링크를 첨부해 두었으니 참고하기 바래요!

 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

2. Reset.css 적용하기

HTML 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서, 브라우저 간의 차이를 최대한 없애,

브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해서 하는 것입니다

 

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

 

3. height: 100vh

vh(view height)는 사용자의 화면에 맞게 채울 때 사용한다!

 

body {
 height : 100vh;
}

 

 

4. 브라우저 별로 벤터프리픽스 사용하기

벤터 프리픽스란?

주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때, 이전 버번의 웹 브라우저에게

그 사실을 알려주기 위해 사용하는 접두가(prifix)를 의미

 

 

 

 

 

<style>
    .button {
    <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
    background: red;
    
    <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
    background: -webkit-linear-gradient(red, yellow);
    
    <!-- 파이어폭스 3.6 이상을 위한 코드 -->
    background: -moz-linear-gradient(red, yellow); 
    
    <!-- 익스플로러 10.0 이상을 위한 코드 -->
    background: -ms-linear-gradient(red, yellow);  
    
    <!-- 오페라 10.0 이상을 위한 코드 -->
    background: -o-linear-gradient(red, yellow); 
    
    <!-- CSS 표준 문법 코드 -->
    background: linear-gradient(red, yellow);    
    }
</style>

 

 

5. 라이브러리 사용하기

 JQuery 같은 라이브러리를 사용하면 내부적으로 크로스 브라우징에 대한 대응이 되있기때문에 수월하다