Reset CSS 와 크로스브라우징(cross browsing)

 

크로스 브라우징?

 

W3C의 웹표준에 맞는 코딩을 해서 브라우저나 기기마다 동일하게 보여지고 작동하도록 하는것!

 

위는 우리나라의 브라우져 점유율 조사하는 사이트의 결과이다

 

gs.statcounter.com/browser-market-share/all/

Browser Market Share Worldwide | StatCounter Global Stats

2021년 2월 기준.

 

우리나라는 1위가 크롬  2위 사파리  3위 삼성인터넷 4위 웨일 5위 엣지 순이며,

 

전세계적으로 보자면 1위 크롬 2위 사파리 3위 파이어폭스 4위 엣지 5위 UC Browser 이다.

 

 

위와 같이 각각 다 다른 브라우저간의 동일성을 확립하는것이 중요할것이다

 

각 브라우저마다 기본 설정 되어있는 스타일이 모두 다르다

 

이로인해 브라우저간의 차이점이 존재하기도 하며 생각처럼 되지 않을때가 있을텐데

 

이때 각 브라우저의 스타일을 초기화 하기 위해 Reset CSS를 사용한다!

 

 

Reset CSS 사이트이다 : meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

 

 

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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

 

보통 reset.css 로 저장하여 

 

다른 css 파일에서 @import "reset.css" 로 많이 사용한다고 한다.