[CS] 크로스 브라우징 이슈

크로스 브라우징 이슈란?

브라우저는 기본적으로 W3C라는 국제 웹 표준화 기구에서 정의한 가이드 라인에 따라 동작을 한다.
그렇기때문에 이 스펙에 맞춰서 javascript, css, html을 작성한다면 어떤 브라우저를 쓰더라도 동일하게 동작해야 할 것이다.
하지만 W3C의 가이드라인을 제외한 것들은 각 브라우저마다 조금씩 다르며 상황에 맞춰 각자 구현되었기에

같은 CSS, 같은 Javascript를 작성해도 브라우저마다 다르게 연산이 되는 경우가 있다,,,

 

 

---

해결방법

브라우저간의 차이점을 최소화하여 개발한다.

• 기존 코드에서 사용하지 않던 dom api나 event, css요소, html markup 등을 도입할 때에는 지원하려는 브라우저 스펙에서 호환되는지 확인한다.
  • https://developer.mozilla.org/
  • https://caniuse.com/
  • https://www.w3schools.com/
• 라이브러리를 활용한다
  • polyfill, babel, 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;
  }

참고
https://velog.io/@juhan/%ED%81%AC%EB%A1%9C%EC%8A%A4-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95-%EC%9D%B4%EC%8A%88%EC%97%90-%EB%8C%80%ED%95%9C-%EC%B6%94%EC%96%B5