[CS]크로스 브라우징

JH Cho·2022년 12월 20일
0

CS

목록 보기
10/12

크로스 브라우징이란?

  • Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법
  • 요약하면 서로 다른 브라우저를 사용해도 호환이 잘 되게 하고 어느 브라우저든 간에 똑같이 보이도록 하는 것이다.

크로스 브라우징 이슈

  • 자바스크립트는 넷스케이프 브라우저에서 동적 웹을 만들기 위해 개발되었다.
  • 하지만 마이크로소프트에서 JS의 파생 버전인 "JScript"를 개발하여 IE3.0(MS의 브라우저)에 탑재하였음
  • 이로 인해서 자바스크립트와 제이스크립트가 표준화되지 못하고 적당히 호환되었기 때문에 서로의 브라우저에서 올바르게 렌더링되지 않는 크로스 브라우징 이슈가 발생되었다.

참고) 각 기기마다 사용하는 OS가 다르고, 브라우저마다 "렌더링 엔진"이 다르다.

그 결과

  • 그 결과 ECMAScript로 표준화 되었고 JAVAScript === ECMAScript라고 보면 됨.

크로스 브라우징 이슈 예방

  • 왠만하면 브라우저 간에 호환되는 방법으로 개발한다.

  • 기존 코드에서 사용하지 않던 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;
}
  • 정 안된다면 똑같이 동작은 안하더라도, 핵심 기능이 비슷하게 동작하게끔 구현한다.
profile
주먹구구식은 버리고 Why & How를 고민하며 프로그래밍 하는 개발자가 되자!

0개의 댓글