크로스 브라우징

크로스 브라우징 정의

모든 브라우저와 디바이스에서 가능한 동등한 수준의 정보, 기능을 제공하는 것.

ex) 스크린 리더에서도 사이트를 읽을 수 있도록 함

• 똑같이 보일 필요는 없음( 최신 버전에서는 3D 이미지를 구버전 브라우저에서는 평면 도형을 보여주는 방식 )
• 플랫폼 사용자가 수용 가능한 수준으로 핵심 기능과 정보를 제공하도록 하는 것

크로스 브라우징 원칙

• 특정 브라우저에 종속성을 가진 기능은 가급적 사용을 배제한다.
• 웹 사이트는 그래픽을 연결하지 않은 상태로도 사용 가능해야 한다.
  • 핵심 정보는 반드시 텍스트/HTML 포맷으로 제공되어야 한다. ex) flash 같은 것으로 전체 화면을 구성해서는 안된다.
  • 핵심 정보를 표현하는데 이미지를 사용하는 것은 최소화해야 한다. 사용한다면 텍스트 형식의 alt 값을 제공해야 한다.
• HTML 태그로 스타일을 지정하지 않는다. CSS를 사용한다.

크로스 브라우징 이슈 해결법

• caniuse.com 에서 브라우저 호환성을 확인한다.
• 폴리필을 사용한다. 단, 사이트 로딩속도를 고려한다. 정보 전달이나 사용자 경험에 치명적이지 않은 경우에는 graceful degradation할 수 있다.
• HTML 폴백을 사용한다.

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
  <!-- Offer download -->
	<!-- non-supporting browsers will effectively ignore the outer element -->
  <p>Your browser does not support HTML5 video; here is a link to
  <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p>
</video>

• css 폴백을 사용한다.

<!--[if lte IE 8]>
  <script src="ie-fix.js"></script>
  <link href="ie-fix.css" rel="stylesheet" type="text/css">
<![endif]-->

---

참조

handling common HTML and CSS probolems (MDN)

Cross Browsing 가이드

크로스 브라우징이란?