크로스 브라우징 이슈에 대한 추억

크로스 브라우징 이슈란?

브라우저는 기본적으로 W3C라는 국제 웹 표준화 기구에서 정의한 스펙을 따라서 동작한다.
그렇기때문에 이 스펙에 맞춰서 javascript, css, html을 작성한다면 어떤 브라우저를 쓰더라도 동일하게 동작해야 할 것이다.
하지만 일부 브라우저에서 동작을 안하거나 다르게 동작을 할 수가 있다.(특히 IE)

해결방법

1. 왠만하면 브라우저 간에 호환되는 방법으로 개발한다.
   • 기존 코드에서 사용하지 않던 dom api나 event, css요소, html markup 등을 도입할 때에는 지원하려는 브라우저 스펙에서 호환되는지 확인한다.
     • https://developer.mozilla.org/
     • https://caniuse.com/
     • https://www.w3schools.com/
   • 라이브러리를 활용한다
     • polyfill, underscore.js 등의 라이브러리에서는 이미 내부적으로 크로스브라우징 이슈에 대한 처리를 해놨다.
2. 분기를 태운다.
   • 1번과 같은 방식으로 해결하는것이 코드도 깔끔하고 좋지만 해결이 안되는 경우가 있다.
   • 화면이 로드될 때, 브라우저 종류를 체크하여 상수화하고 이를 통해 분기를 태운다.(isIE 등)
3. CSS의 경우 prefix를 적어준다.
   • 지원하고자 하는 브라우저에 맞게 css 속성 앞에 prefix를 적어준다.
   • 이 때, 표준 속성은 맨 아래에 적어준다.
     ex)#title {
     -webkit-border-radius: 5px; // safari, chrome, ios, android
     -moz-border-radius: 5px; // firefox
     border-radius: 5px;
     }
4. 정 안된다면 똑같이 동작은 안하더라도, 핵심 기능이 비슷하게 동작하게끔 구현한다.

결론: IE는 쓰지말자