크로스 브라우징이란?
크로스브라우징이란 서로 다른 웹 브라우저(크롬, 사파리, 파이어폭스, 엣지 등등)에서
사용자에게 웹페이지가 동일하게 보여지는 것 혹은 작동하는 것을 의미
웹 페이지의 호환성을 해결하기 위한 것
그렇다면 크로스브라우징이 필요한 원인은 무엇일까?
브라우저 마다 랜더링 엔진이 다르기 때문
브라우저별 렌더링 엔진 (참고)
웹 브라우저의 랜더링 엔진은 HTML, CSS 및 JavaScript 문서를 받아들여서
웹 페이지를 렌더링하는 소프트웨어
(Chrome의 Blink, Firefox의 Gecko, Safari의 WebKit, Microsoft Edge의 EdgeHTML 등)
크로스 브라우징 작업
1. 웹 서비스에서 가장 높은 점유율을 가진 브라우저를 알아보기
- 구글애널리틱스나 브라우저 점유율 조사 사이트 참고
2. MDN 문서 혹은 Can I use? 사이트를 활용해서 브라우저별 호환성을 검토해보기
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
3. css reset 하기
- 기본 스타일 값들을 초기화 시키기
4. 모바일 환경을 고려해서 미디어 쿼리를 사용 및 뷰포트 설정을 잊지 말고 하기
- 아래의 코드를 사용하면 모바일 기기의 뷰포트 크기에 맞게 웹페이지가 화면에 출력됨
width = device-width는 뷰포트의 너비를 기기의 너비를 설정
initial-scale=1.0 뷰포트의 초기 배율을 1로 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
브라우저별 벤더프리픽스 (참고)
- Chrome, Safari: -webkit
- Opera: -o-
- IE or Edge: -ms
- Firefox: -moz
메타 태그 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge" />인터넷 익스플로러가 브라우저에서 어떻게 랜더링될지를 지정하는 역할을 하는 태그
IE7이상에서 사용할 수 있고, IE 브라우저가 최신 버전으로 랜더링 되도록 함
728x90
