크로스 브라우징

크로스브라우징이란,

웹 페이지의 상호 호환성(Cross Browsing) 구축에 대해 이야기하면 기본적인 오해가 있다. 그것은 바로 이것이 모든 웹 브라우저에서 100% 똑같이 보이도록 만드는 것이라는 생각이다.작게는 1990년대 후반 Netscape사와 Microsoft사의 Browser War 기간 동안 일어난 브라우저의 비호환성을 억지로 끼워 맞추려는 기법 정도로 치부되는 것이다.

 

 

-브라우저별 벤터프리픽스

1) 크롬 : -webkit-

2) 사파리 : -webkit-

3) 파이어폭스 : moz- (mozila 라는 단체가 파이어폭스를 만들었기 때문에)

4) 오페라 : -o-, -webkit-

5) 익스플로러 : -ms- 

 

ex)

#loading-image {
    -webkit-animation: spin 1000ms infinite linear;
    -moz-animation: spin 1000ms infinite linear;
    -ms-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}

 

그 밖의 특이사항으로는
margin, padding은 코드가 다릅니다.
-webkit-margin-before  = maring-top
-webkit-margin-after  = maring-bottom
-webkit-margin-start  = maring-left
-webkit-margin-end  = maring-right
-webkit-padding-before  = padding-top
-webkit-padding-after  = padding-bottom
-webkit-padding-start  = padding-left
-webkit-padding-end  = padding-right

 

 

 

 

 

크로스브라우징을 위한 리셋

 

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

 

 

<웹표준관 웹접근성, 크로스 브라우징 정리 사이트>

www.gracieuxyh.dev/web/web-std-wa-cross-browsing/

웹 표준과 웹 접근성, 크로스 브라우징

 

 

<크로스브라우징 선택자>

webty.tistory.com/97

CSS 크로스브라우징 설정