크로스 브라우징 방법

크로스 브라우징

: 개발자가 작성한 코드가 웹 페이지의 모든 브라우저에서 동일하게 렌더링되게 하는 것이다. 크로스 브라우징을 하지 않으면 사용자마다 웹 페이지가 다르게 나타날 수 있는 문제가 있다.

 

 

---

 

기본적인 크로스 브라우징 방법

 

1. CSS 초기화하기

브라우저마다 기본으로 지정된 CSS가 다를 수 있기 때문에 처음에 모든 설정 값을 없애고 시작하는 것이다. 이 파일은 구글에 reset.css 를 검색하면 쉽게 찾을 수 있다.

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

 

 

2. Can I Use 사이트로 사용하려는 기능의 브라우저 별 호환성을 확인한다.

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

 

3. 벤더 프리픽스(Vender Prefix)를 사용한다.

주요 웹 브라우저(크롬, 사파리, 파이어폭스 등)의 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하면, 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다.

 

주요 웹 브라우저 별 벤더 프리픽스

인터넷 익스플로러(IE) : 현재는 종료되었음	크롬(Chrome)	파이어폭스(Firefox)	사파리(Safari)	오페라(Opera)
-ms-	-webkit-	-moz-	-webkit-	-o-

 

- 사파리에서 벤더 프리픽스를 사용할 때의 예시

.btn {
	background: -webkit-linear-gradient(red, yellow);
 }

 

---

 

모바일 환경에서 발생할 수 있는 호환성 이슈

 

1. 사용 디바이스마다 다른 화면 크기

모바일 디바이스에 따라 화면 크기가 다르기 때문에 각 디바이스에 최적화된 UI를 제공하지 않을 때 문제가 발생할 수 있다.

 

2. 운영체제와 브라우저 호환성이 다른 문제

안드로이드와 iOS 등의 다양한 운영체제마다 다른 브라우저를 사용하기 때문에 지원하는 웹 기술이 달라 호환성 문제가 발생할 수 있다.

 

3. 모바일 디바이스의 하드웨어와 기능이 다른 문제

모바일 디바이스마다 각기 다른 하드웨어와 기능을 갖고 있어서 특정 기능을 지원하지 않는 디바이스에서 서비스를 사용할 때, 해당 기능을 사용할 수 없다.

 

 

이에 대한 해결 방법

 

1.  반응형 웹 디자인을 적용

반응형 웹 디자인을 적용하여 디바이스 마다 최적화된 화면 크기를 제공하는 방식이다. 

@media screen and (max-width: 520px) {
 /* 적용할 스타일 */
}

 

 

2. 자바스크립트 라이브러리 활용

자바스크립트를 더 쉽고 효율적으로 작성하도록 도와주는 라이브러리(jQuery, React, Vue.js 등)을 사용하면 모바일 디바이스에서의 호환성 이슈를 최소화할 수 있다.

 

 

3. 메타 태그(Meta tag) 활용

Meta 태그는 HTML 문서의 head 부분에 위치하며, 검색 엔진 웹 페이지의 제목, 작성자, 키워드, 설명 등과 같은 문서의 정보를 가지고 있는 태그이다.

 

(1) 메타 태그에서 렌더링 엔진 선택하기

<meta http-equiv="X-UA-Compatible" content="IE=edge">

이 meta 태그는 IE에서도 웹 페이지가 일관된 모습으로 나타날 수 있도록 IE 브라우저에서 최신 렌더링 엔진을 선택하게 한다.

 

(2) 모바일 대응하기(viewport)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

viewport 는 사용자가 보고 있는 화면의 영역을 뜻한다.  브라우저의 크기가 줄거나 늘어도 웹페이지 내용이 사용자들에게 잘보이도록 브라우저의 크기마다 뷰포트의 크기를 지정해서 바꿀 수 있다.

 

 

4. 크로스 브라우징 테스트

크로스 브라우징 테스트를 진행하여 사전에 호환성 이슈를 막을 수 있다.