[js] 크로스 브라우징

• 크로스 브라우징이란?
• 크로스 브라우징 이슈 해결하기
  • 1. 사전에 방지
  • 2. 라이브러리 사용
  • 3. 버그 리포트 참고하기
• Vender Prefix
• prefix free
• sass Vender Prefix trick

크로스 브라우징이란?

크롬, 사파리 인터넷 익스플로러, 오페라, 파이어폭스, 웨일과 같은 많은 브라우저들은 W3C라는 국제 웹 표준화 기구에서 정한 기준에 맞게 개발하고 동작합니다. 그래서 개발을 할 때 html, css, javaScript를 작성할 때 웹 표준을 따라서 개발을 해야 어떤 브라우져에서든 정상적으로 동작을 할 수 있습니다.

어느 브라우저에서든 동일한 화면을 제공하는 것이 크로스 브라우징이 아니라 어느 한 브라우저에 최적화되지 않도록 모든 브라우저에서 호환되는 공통요소를 사용하여 웹페이지를 제작하여 모든 웹 브라우저를 사용하는 방문자가 정보의 소외감을 느끼지 않도록 하는 방법론이라고 생각. 사용자가 핵심 기능에 접근 가능하다면 다른 애니메이션 혹은 효과들에 대해서 나타내지 못해도 괜찮습니다.

크로스 브라우져를 개발할 떄 디자이너의 의도를 살리기 위해 억지로 작성해서 기능이 망가지는 일은 없어야 되는 것 입니다. crossBrower compatibility라는 말처럼 동일이라는 단어가 아닌 호환이라는 단어에 집중 해야한다고 생각합니다.

크로스 브라우징 이슈 해결하기

그렇다면 크로스 브라우징 이슈를 “웹 표준화 기구에서 정한 기준대로 따라서 개발만 하면 해결되는 것 아니야?”라고 생각하실 수도 있습니다. 하지만 실제로는 전혀 그렇지 않습니다. 서로 다른 브라우져에서 동작하지 않는 코드와 문법들이 존재하기 때문에 모든 것을 다 알고 코딩한다는 것은 비효율적일 수도 있습니다.

1. 사전에 방지

Can I Use라는 사이트에서 CSS 속성을 입력하면 어느 브라우져에서 동작하는지 알려줍니다. 아래 사진은 float속성이 어떤 브라우저에서 정상적으로 동작하는지 검색한 것입니다.

아래 사진을 보시면 생각보다 flex속성에 대해서 지원을 많이 하는 것 같습니다. 다른 글들을 보면 IE 에서 flex속성에 대한 이슈를 대응할 때 정말 골치가 아프다고 하던데 얼른 빨리 모든 브라우저에서 지원을 해주면 좋겠습니다 ~(flex성애자)~

2. 라이브러리 사용

​ JQuery 같은 라이브러리를 사용하면 내부적으로 크로스 브라우징에 대한 대응이 되어있기 때문에 수월할 수 있습니다.

3. 버그 리포트 참고하기

Github에는 버그에 대한 정보가 많이 올라와 있습니다. 아래 사이트는 flex의 버그에 대해서 정리한 글입니다.

flex 버그리포트

위와 같은 방법으로 현재 내가 사용할 속성이 어느 브라우저에서 동작하는지 내가 개발할 서비스는 어떤 브라우저까지 지원을 해야하는지를 파악하고 개발하는 것이 크로스 브라우징 이슈로 겪는 문제들을 좀 줄여주지 않을까 생각됩니다.

저는 모든 크로스 브라우징 이슈 대응 방법을 외우기 보다 제가 개발하며 필요한 부분에 대해서 정리를 해보려고 합니다.

Vender Prefix

Vender Prefix는 크로스 브라우져를 개발하기 위해 CSS속성 앞에 브라우져별 접두사를 붙혀주는 것을 말합니다.

CSS스타일 시트 요소를 각 브라우져 벌로 인식하기 위해 사용해야 하며, 표준으로 사용할 웹을 가장 밑에 써주어야합니다.

prefix free

위에서 설명한 Vender Prefix를 사용하는r데 번거로움을 느낀다면 자동으로 접두어를 붙혀주는 prefix free를 사용하자.

sass Vender Prefix trick

sass에서는 mixin을 활용해서 vender prefix를 아래와 같이 사용할 수 있습니다.

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
 
  // Output standard non-prefixed declaration
  #{$property}: $value;
}

.selector {
  @include prefix(transform, rotate(45deg), webkit ms);
} 

.selector {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}