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