크로스 브라우징이란?

 

마크업 작업을 하다보면 크롬과 같은 주로 사용하는 브라우저에서 확인을 하다가

IE (Internet Explorer) 나 Firefox 와 같은 다른 브라우저에서 확인할 때

레이아웃이 틀어지거나 원하지 않는 화면이 표시되는 것을 볼 수 있다.

이는, 각 브라우저가 가지고 있는 렌더링 엔진이 다르기 때문이다.

 

이렇듯 한 브라우저에서 적용된 소스의 내용이 모든 브라우저에

동일하게 적용될 수 없는데 이렇게 각 브라우저들을 맞추기 위한 작업을

크로스 브라우징이라 한다.

 

이러한 크로스 브라우징을 하기 위해선 몇 가지 방법이 필요하다.

1.  Reset CSS

각 브라우저별로 태그마다 주는 속성이나 속성 값들이 다 다른데

이러한 것들을 맞추기 위해 우리는 css를 초기화 해줄 필요가 있다.

즉, 모든 태그들을 동일한 조건에서 시작할 수 있게 해준다.

(ex. 각 태그별 margin, padding 0으로 초기화, ol, ul태그 list-style 초기화...)

 

자세한 내용은 이전에 포스팅한 Reset.css 를 참고 하면 된다.

2020/02/19 - [Frontend/CSS] - CSS Reset (초기화)

 

2. 브라우저별  적용되지 않는 css 속성 찾기

우리가 크로스 브라우징을 할 때, 

가장 문제가 되는 브라우저는 뭐니뭐니해도 IE(Internet Explorer)일 것이다.

IE의 경우는 최신 버전이 아닌 IE8, IE9 버전 등 하위 브라우저의 경우

지원하지 않는 속성이 많이 있기 때문이다.

 

그렇기 때문에 

can I use 와 같이 브라우저별로 지원하는 css를 찾아보고 작업하는 것이 중요하다.

caniuse.com

 

예를 들어 프로젝트에서 IE8 이상부터 지원하게 작업해야 한다면

transition (IE10+), transform(IE9+) 와 같은 IE8보다 상위 브라우저 부터 지원하는

css는 사용할 수 없을 것이다. 

 

그렇기 때문에 스크립트나 이미지 파일을 사용해서 해당 기능들을 구현하는 것이

크로스 브라우징을 위해 좋은 방법으로 이용될 것이다.