오늘은 크로스 브라우징이라는 프론트엔드 개발자라면 꼭 알아야 할 내용에 대해 학습해봤다.
Cross browsing
크로스 브라우징이란 웹 페이지가 웹 브라우저의 종류에 구애받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업이다. 넓은 의미로 기기나 플랫폼에 종류가 달라지더라도 웹페이지가 일관된 서비스를 제공할 수 있도록 해주는 작업이다.
먼저 웹 브라우저에 대해 알아보자. 웹 브라우저는 사용자들이 웹 컨텐츠를 이용할 수 있도록 편리한 인터페이스를 제공해주는 소프트웨어이다. 우리가 주소창에 url을 입력해 웹페이지를 가져오면 브라우저는 가장 먼저 해당 웹 페이지의 코드를 가져다 읽고, 해석된 결과를 렌더링하여 보여준다. 또한 브라우저 내부에서 렌더링을 담당하는 소프트웨어 장치를 렌더링 엔진이라고 부른다.
웹 브라우저의 종류는 한 가지가 아니다. 크롬, IE, 사파리, 파이어폭스 등 다양하다. 문제는 이 웹 브라우저들에 탑재되어 있는 렌더링 엔진이 각각 다르다는 것이다. 각각의 브라우저가 서로 다른 렌더링 엔진을 사용하기 때문에 같은 HTML/CSS 파일을 가져와 렌더링해도 화면에 보이는 결과물이 조금씩 다르게 만들어지는 현상이 발생한다. 이러한 문제를 최소화 하기 위해서 진행하는 작업이 크로스 브라우징이다.
크로스 브라우징 작업을 하기 위해서는 기본적으로 가장 우선해서 고려해야 할 웹 브라우저를 정해야 한다.
정해진 웹 브라우저를 기본으로 하여 웹을 제작하되, 다른 웹 브라우저를 사용하는 사람들이 소외감을 느끼지 않도록 최대한 크로스 브라우징 기술을 사용하여 제작하는 것이 필요하다. 현재 국내에서 가장 많은 점유율을 가진 웹 브라우저는 구글의 크롬이다.
대응법
- 가장 높은 점유율을 가지고 있는 브라우저를 포커싱(https://gs.statcounter.com)
- 캔 아이 유즈를 통해 각 브라우저에 호환성을 검토(https://caniuse.com)
- CSS 초기화 작업을 통해 브라우저마다 차이가 나는 기본 스타일 값들을 초기화
- 핵(HACK)을 사용하여 작업
(스타일을 줄 때 특수문자를 넣어 특정 브라우저들에게는 인식이 안되지만 IE 특정 버전에는 인식이 되도록 하는 방법, 핵 사용은 최대한 지양하는게 좋다. CSS 유지보수를 어렵게 한다.)
크롬 핵
@media screen and (-webkit-min-device-pixel-ratio:0){
여기에 css 작업
}
파이어폭스 핵
@-moz-document url-prefix() {
여기다 쓸 css 넣기
}
==
선택자핵
/* IE 6 이상 */
* html #uno { }
/* IE 7 이상 */
*:first-child+html #dos { }
/* IE 7 과 현대 브라우저 */
html>body #tres { }
/* 현대 부라우저 (IE 7 빼고) */
html>/**/body #cuatro {}
/* 오페라 9.27 이상 */
html:first-child #cinco {}
/*사파리,크롬,오페라 다수브라우저핵*/
html[xmlns*=""] body:last-child #seis { }
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
html[xmlns*=""] body:last-child #seis { }
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:nth-of-type(1) #siete { }
/* 사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:first-of-type #ocho { }
/* 사파리 3, 크롬 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}- IE용 주석을 이용하는 방법
<!-- [if IE 7]>
<link href="ie7.css" type="text/css" rel="stylesheet"/>
<![endif]-->
<!-- [if IE 8]>
<p> 이 문구는 IE8이 포함되지 않은 하위 브라우저, 즉 IE7,6에서 보여지게 됩니다.</p>
<![endif]-->- 메타 태그를 이용
<head>
// ...
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
//...
</head>head 요소 안에 넣어두면 IE가 그 해당 문서를 읽고 원하는 모드로 렌더링을 하게 해준다.
content="IE=edge"는 해당 브라우저가 할 수 있는 가장 최신의 렌더 버전으로 렌더링이 된다.
크로스 브라우징 작업의 경우 그 의미를 정확히 알고 작업을 해야하며 보통 IE의 버전이 낮을 수록 컴퓨터 성능도 낮을 테니 그렇게 되면 성능 저하는 더 치명적이게 나타난다.
