크로스 브라우징이란?

🌐 크로스 브라우징이란?

크로스 브라우징이란?

어떤 환경에서 접근하여도 동등하게 작동되는 것을 말합니다.

 

📢 크로스 브라우징을 해야 하는 이유

크로스 브라우징을 해야 하는 이유가 요즘 대부분의 사람들이 크롬이나 웨일을 쓴다고 생각합니다.

사진출처 - https://gs.statcounter.com/

브라우저 점유율 확인 사이트에서 한국 브라우저 점유율 확인해 본 결과 압도적으로 크롬 브라우저 사용자가 많다는 것을 알 수 있습니다. 하지만 압도적으로 많다고 하여 16%의 IE유저와 그 이하 브라우저 사용자가 해당 브라우저로 접속했을 때 소외감을 느껴서는 안 됩니다.

 

🔨 크로스 브라우징을 하는 방법

크로스 브라우징을 하는 방법으로 가장 좋은 방법으로는 각 브라우저를 직접 들어가는 방법입니다.

체크 리스트

• 크롬
• 웨일
• IE
• Firefox
• Edge
• Opera
• Safari

특이사항

• 윈도우에서 작업할 경우, Safari 브라우저는 만든 페이지를 잘 확인이 어려울 수 있습니다. 왜냐하면 윈도우에서 Safari 브라우저를 설치할 경우, 5.1.7이 최신 버전입니다. 그렇기에 최근 CSS문법이 적용되어 않기에 Safari 브라우저를 제대로 테스트할 수 없습니다.
  제대로 체크를 원한다면 Mac 환경에서 페이지를 열어보는 방법이 최선이라고 알고 있습니다.(다른 방법을 아시는 분은 댓글로 알려주세요...)
• IE환경은 정말 테스트하고 싶지 않을 정도로 안 되는 CSS가 많습니다..
  우선 IE 브라우저는 항상 최신 버전만 테스트해서는 안됩니다. 특이하게 예전 버전(7, 8, 9, 10)을 "누가 사용하겠어??"라고 생각하지만 사용하는 사람이 있다고 합니다.
• 보통은 IE9 이상부터 맞추고*, IE7, IE8 버전은 주로 금융관련 사이트에서 맞춘다고 합니다.
  만약 IE9 이상부터 크로스 브라우징을 할 경우,-ms-flex를 사용하면 되지 않나?라고 생각하실 수 있지만 안 되는 CSS가 더 많기 때문에 사용하지 않습니다.

IE 크로스 브라우징 방법

IE는 버전별로 체크를 해야 합니다.

1. IE 브라우저에서 F12를 눌러 개발자 도구 창을 켭니다. 그리고 에뮬레이션 항목으로 이동합니다.

IE 개발자 도구 창

2. 문서 - 문서 모드 - 버전 선택

3. 사용자 에이전트 문자열 - 문서 버전과 동일한 버전 선택

버전선택

이러한 방법을 이용하여 IE9, IE10등 을 테스트하시면 됩니다.

CSS 접두어

각 브라우저 별로 알맞은 접두어가 있습니다.

• -webkit-: 크롬, 웨일, 사파리
• -moz-: 파이어폭스
• -ms-: IE(익스플로러)
• -o-: 오페라 브라우저

📰 참고

CanIUse라는 페이지에서는 CSS문법이 어느 브라우저에서 사용 가능한 지 확인할 수 있습니다.