웹을 개발하다보면 브라우저마다 기술이 구현되는 모습이 다르기 때문에 웹사이트가 브라우저마다 다르게 표시되는 문제가 생길 수 있고, 이를 호환성 이슈라고 한다.
오늘은 이러한 호환성 이슈를 해결하기 위한 방법인 크로스 브라우징과 safari에서 적용하는 방법에 대해 알아보기로 하자.
크로스 브라우징(Cross Browsing)이란?
서로 다른 브라우저에서 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법
어떻게 작업하면 돼?
1. MDN 활용 \ Click Here!
하단의 Browser compatibility(브라우저 호환성)를 확인해보자
2. Can I Use 활용 \ Click Here!
3. 브라우저별 벤더 프리픽스 사용 \ Click Here!
- 벤더 프리픽스(Vendor Prefix)란?
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사
4. CSS 기본값 초기화 작업
- 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; }
5. Metatag 활용
아래 코드를 활용하여 IE가 문서를 읽고 랜더링 할 때 원하는 모드로 랜더링
만약 content에 값이 "IE=edge"라면 브라우저가 할 수 있는 가장 최신의 모드로 랜더링<head> // ... <meta http-equiv="X-UA-Compatible" content="IE=edge" /> //... </head>
여기까지 크로스 브라우징에 대해 알아봤으니, safari 브라우저에 적용하는 방법에 대해 알아보자.
Safari에서 크로스 브라우징하는 방법
여길 클릭하면 safari 브라우저에 다양한 호환성 이슈가 있다는 점을 알 수 있다. 이를 모두 기억하기엔 불가능하니, MDN을 최대한 활용하는 것이 좋다고 생각한다.
그렇다면, 많은 이슈 중 몇 개를 선택해 어떻게 해결할 수 있는지 확인해보자.
1. 높이 100% 맞추기
이전에는height = 100vh;를 통해 높이를 맞췄다는데, iOS safari에 하단바가 생기면서 이 부분이 정상적으로 작동하지 않아 아래처럼height = 100%;를 활용한다고 한다.html, body { height = 100%; }
2. 호환성 검토하기
앞서 말한 방법처럼 MDN, Can I Use 등의 사이트를 참고해 호환성을 검토하자.
아래 사진처럼 같은 기능이어도 Safari 웹 브라우저와 모바일 브라우저에서 구현 가능한 범위와 버전이 다르므로 꼼꼼히 확인해야 한다.
이외의 방법은 알게 되는대로 추가할 예정이다.
마지막으로, MAC이 없는데 Safari 환경을 테스트 해 보고 싶다면?
Appetize 라는 사이트에 접속하면 테스트 할 수 있다.
무료 버전의 경우 60초 동안 가능하고, 개발자 도구는 사용할 수 없다고 하니 참고하자...
