2023. 3. 30. 11:09ㆍzerobase/CS
크로스 브라우징이란?
웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 작업을 말한다.
html5, css3, javascript 작성시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저로 접속하던 어느 기기로 접속하던 사이트가 의도한 대로 보여지고 작동되는 기법이다.
크로스 브라우징을 고려하지 않는다면 html, css, js등 코드가 원하는대로 적용이 안될 수 있으며 그러한 이유로 브라우저마다 렌더링 엔진이 다르기에 전부 적용이 되게끔 설정해둬야 한다.
렌더링 엔진이란?
페이지를 렌더할 때 실질적으로 페이지를 작업해주는 브라우저의 엔진들을 의미한다. 엔진의 종류로는 트라이던트, 게코, 웹킷, 프레스토, 블링크, 듀얼 엔진 등 다양하다. 각 엔진은 사용되는 브라우저의 버전 혹은 지원하는 회사등에 따라 다르게 사용된다.
| 엔진 | 회사 | |
| 트라이던트(Trident) | IE, 아웃룩 이메일 클라이언트나 윈도우 프로그램의 미니 브라우저등에 사용된다. | 마이크로 소프트 |
| 게코(Gecko) | 파이어 폭스, 모질라 재단의 이메일 클라이언트인 선더버드에 사용된다. | 모질라 |
| 웹킷(Webkit) | - 초기 애플사가 사파리 엔진으로 사용하기 위해 차용했으나 현재는 웹킷 프로젝트로 분리되어 개발되고 있다. - 크롬에서도 사용되었던 엔진이며 iOS나 안드로이드의 기본 브라우저들이 이 웹킷 엔진을 사용한다. - 점유율이 높은 엔진이다. |
애플 |
| 프레스토(Presto) | 오페라 15버전부터 더이상 사용하지 않는다. | 오페라 소프트웨어 |
| 블링크(Blink) | - 웹킷 엔진을 사용하던 구글이 크롬이 개발, 사용하고 있는 엔진이다. - 웹킷에서 줄기를 가져 왔기 때문에 웹킷엔지과 비슷한 모습이 보여진다. - 프레스토 엔진을 버린 오페라가 블링크 엔진을 사용하고 있다. |
구글 |
| 듀얼 엔진 | - 국내 이스트소프트의 스윙(Swing) 브라우저를 예로 들면 크롬과 같은면서도 액티브X를 지원하는데, 독자적인 엔진이 아닌 두가지 엔진을 번갈아 사용하는 방식이기 때문에 가능하다. - 보통 트라이던트와 웹킷or블링크 엔진을 사용한다. |
그렇다면 대응방법은?
가장 높은 점유율을 가지고 있는 브라우저를 포커싱을 하는게 중요하다. 각 나라별로 사용자들의 순위가 다르며 그것을 고려하여 프로젝트에 참여해야 한다.(Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share 전 세계 브라우저 점유율 조사 사이트)
- 캔 아이 유즈 (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용 주석을 이용하는 방법 (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의 버전이 낮을 수록 컴퓨터 성능도 낮을 테니 그렇게 되면 성능 저하는 더 치명적이게 나타난다.
이 주제로 글을 써야하기에 공부를 하면서 알게된 재밌는 유튜브가 있어서 공유하고자 한다.
다들 재밌게 보고 크로스브라우징에 좀 더 관심을 가져줬으면 좋겠다.
'zerobase > CS' 카테고리의 다른 글
| RESTful API (0) | 2023.05.01 |
|---|---|
| HTTP와 HTTPS의 차이 (0) | 2023.04.29 |
| 운영체제(3) (0) | 2023.03.15 |
| 운영체제(2) (1) | 2023.03.15 |
| 운영체제(1) (0) | 2023.03.15 |