크로스 브라우징(cross browsing)이란?

한국소프트웨어진흥원에서는 크로스 브라우징에 대해서 아래와 같이 정의하고 있다.

Cross Browsing 이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다.

한 개발자가 "a"라는 이미지를 띄우고 싶어 코드를 작성했는데 A브라우저에서는 "a" 이미지로 보이고 B브라우저에서 "b" 이미지로 보여진다면 사용자들은 얼마나 당황스러울까? 이런 이슈를 방지하기 위해 어떤 브라우저를 사용해도 같은 기능이 구현될 수 있도록, 즉 같은 경험성을 제공받을 수 있도록 개발자가 지켜야 하는 웹 표준이 바로 크로스 브라우징이다.

웹표준이란?
웹 표준이란 W3C에서 정의하는 규정으로, 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.

왜 일어나는가?

개발자가 HTML이나 CSS를 작성하면 이 코드를 화면에 띄우는 녀석이 있는데 바로 "브라우저"이다.

문제는 이 녀석이 하나만 있지 않다. 현재 가장 많이 사용하는 "크롬"부터 지금은 출시하지 않는 "Internet Explorer"가 모두 브라우저이다. 이렇게 많은 브라우저들이 각자의 고유한 렌더링 방식을 가지고 있기에 오차가 발생하는 것이다.

정확한 사례가 궁금하다면 저자가 경험한 이슈는 아직 없기에 아래 블로그 링크를 참고하기 바란다.

렌더링이란?
렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 브라우저마다 각자 렌더링을 수행하는 렌더링 엔진을 가지고 있다.

⭐️크로스 브라우징 이슈를 해결하는 다양한 방법들

1.CSS reset

-브라우저마다 각기 다른 defualt 스타일이 지정되어 있는데 해당 값을 초기화 시키화시켜줌으로써 다양한 웹브라우저에서도 동일한 스타일이 적용될 수 있도록 하는 기법이다.
-W3C에서 공식적으로 권장하는 기법이라기보다는 실무에서 편의로 사용하는 기법이라고 한다.

(a.k.a 야매)

2.Normailize CSS(CSS reset 보다 권장)

- 브라우저를 광범위하게 지원하며(모바일 브라우저를 포함), HTML5요소, 타이포그래피, 목록, embeded 콘텐츠, 폼과 테이블을 일관성 있게 통일시키는 CSS 파일이다.

- 태그 안에 링크로 설정할 수 있다.

- CSS reset보다 사용하기 좋은 기본값들이 설정되어 있는 CSS 파일이다.

- 예시코드

3.브라우저 테스트

사용할 기능이 해당 브라우저에서 지원하는지, 또 어떻게 비쳐지는지 사전에 테스트하는 것이다. 예시 사이트는 다음과 같다.

- 캔아이유즈 : https://caniuse.com

- 브라우저스택 : Browserstack

- 크로스브라우저테스팅 : CrossBrowserTesting

4.Vendor Prefix(벤더 프리픽스)

벤더 프리픽스란 브라우저별로 따로 놀던 CSS3의 속성을 잡아주기 위해서 사용되기 시작된 프리픽스는 마크업시 Css의 Class앞에 -moz-, -webkit-, -o-, -ms-라는 각 브라우저에서 판독이 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것이다.🥱 언제 일일이 붙이고 있어? 'prefix-free'라는 자바스크립트 파일을 이용하면 매번 브라우저 접두사를 붙이지 않고도 편리하게 css3 속성을 사용할 수 있다.

▶브라우저별 벤더프리픽스

IE or Edge → -ms-

Chrome → -moz-

Firefox → -webkit-

Opera → -o-

iOS Safari → -webkit-

Android Browser → -webkit-

Chrome for Android → -webkit-


5.Meta 태그 활용하기

메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그이다. 웹 문서의 정보를 포함하고 있기에 검색엔진최적화 (Search Engine Optimization, SEO)측면에서 매우 중요한 태그이다.

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