크로스 브라우징(Cross Browsing)

크로스 브라우징이란?

• 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. - 윤석찬님 말씀
• 많은 사람들이 말하는 크로스 브라우징은 어떤 웹 브라우저를 사용해도 화면이 동일하게 나오는 방법이다.

 

 

 

발생 이유 / 해결방안

여러가지의 이유가 있겠지만 예시를 통해 말씀해드리겠습니다.

예시를 들기전에 괜히 이유가 발생하지 않게 하기 위해 필요없는 속성(코드)는 항상 지워주세요.

 

CSS - height

CSS로 높이를 꽉 채우고 싶을때 height: 100vh; 로 사용하는 경우가 있습니다.

body {
	height: 100vh;
}

이런 경우 사파리에는 하단바가 존재하는데, 하단바의 높이까지도 계산이 됩니다.

화면에 꽉 맞게 채우려고 100vh를 쓰면 바단바의 길이까지 계산되어서 스크롤이 생겨버립니다.

이럴 때 height: 100%로 바꾸면 해결이 됩니다.

html, body {
	height: 100%;
}

 

폰트

크롬과 사파리의 폰트 표현 방식이 다릅니다.

폰트마다 범위가 다르지만 많이 차이나는 폰트들도 있습니다.

 

다른 해결방법은 모르겠지만,

가장 쉬운 방법은 폰트 자체를 덜 차이가 나거나 차이가 없는 폰트를 사용하는 것을 권장합니다.

 

Date 객체

Date 객체도 크롬과 사파리가 다릅니다.

크롬은 아래 코드가 잘 작동이 됩니다. 

new Date('2022-11-1')

반면에 사파리는 작동하지 않습니다. 따라서 아래 코드로 작성해 주셔야합니다.

new Date('2022-11-01')

(위 코드처럼 작성하시면 크롬, 사파리 구분없이 잘 적용됩니다.)

이렇게 날짜는 항상 한자릿수가 아닌 두자릿수로 자리 맞춤 해주는 것이 좋습니다. (1 (x) -> 01 (o))

 

라이브러리 활용

또 다른 해결방안은 라이브러리를 활용하는 것입니다.

jQuery 등 라이브러리들이 제공해주는 함수를 활용하면 내부적으로 크로스 브라우징을 해결해줍니다.