크로스 브라우징 (Cross browsing)

dorazi·2021년 4월 4일
0
post-thumbnail

크로스 브라우징 (Cross browsing)

웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.
[HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법.]

쉽게 말해 어느 한 브라우저에 집중되어있지 않는 작업을 뜻한다.

왜 한곳에만 집중해서 제작하면 안될까?

이유는 브라우저 마다 랜더링 엔진이 다르기 때문이다.
예를 들어 크롬은 V8 엔진을 사용하고있고 파이어폭스는 SpiderMonkey 엔진을 사용 중이다.

사실 왠만한 기능들은 모든 브라우저에서 작동한다. (IE 빼고)
IE가 예전에는 독점 수준의 점유율을 가지고 있었지만 플러그인이 빠진 가벼운 브라우저들이 나오면서 점유율도 뺏기고 업데이트도 중단하면서 대부분의 유저들은 크롬,사파리,파이어폭스 같은 브라우저로 넘어왔다.

왜 IE 때문인가

IE도 Edge나 최근 버전은 괜찮지만 구버전의 경우 지원을 안하는 문법이 많다. CSS의 코드중 예를 들면

div{ 
color:red; 

IE7이하 대응
*color:blue 

IE6 대응 
_color:green }

위와 같이 CSS를 적용하는법이 버전마다 상의하다.

IE를 무시하면 되지 않나?

아직까지 IE를 사용하는 사람이 적지 않다 전세계 웹을 기준으로 5%대를 유지하고 있다. 아직까지 IE를 사용하는 사람이 적지 않기 때문에 Cross browsing 이란 것이 나온 것이다.

해결 방안

  • 기능을 사용하기전에 호환성 확인하기 (캔아이유즈 https://caniuse.com)
  • 초기화 작업 (CSS 초기화 작업) - 브라우저마다 차이가 나는 기본 스타일 값들을 초기화 시킨다.
  • IE용 주석을 이용한 방법 (Conditional comments)
profile
프론트엔드 개발자

0개의 댓글