Cross browsing #

정의 #

사이트 사용자가 사이트에 접근하여 정보 및 서비스를 평등하게 이용할 수 있어야 한다는 것이 크로스브라우징의 목적이다. 흔히들 착각하는 것이 웹사이트 제작시 모든 웹브라우저에서 100% 동일하게 보이도록 만드는 것이다. 그러나 OS, Font, Rendering Engine(Layout Engine) 등이 다르기 때문에 이런 차이들을 최소한으로 줄여나가기 위해 웹표준 기술을 채용하여 사용자들이 정보에서 소외되는 것을 막는 것을 크로스브라우징이라한다.

방법 #

1. 조건주석문 #

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->

<!--[if IE 7]><![endif]-->
<!--[if lt IE 9]><![endif]--> ie9버전 이하

2. Browser CSS Hack #

IE 9+10 hack (속성 핵) #

셀렉트 앞에 @media screen and (min-width:0\0){} 를 감싸면 적용이 된다.

@media screen and (min-width:0\0){#header{width:100px}}

FireFox hack #

셀렉트 앞에 @-moz-document url-prefix() {}를 감싸면 적용이 된다.

@-moz-document url-prefix() {#header {width:100px}}

Chorme hack #

셀렉트 앞에 @media screen and (-webkit-min-device-pixel-ratio:0){}를 감싸면 적용이 된다.

@media screen and (-webkit-min-device-pixel-ratio:0){#header {width:100px}}

Safari hack #

프로퍼티의 속성값 앞에 html[xmlns*=""] body:last-child {}를 감싸면 적용이 된다.

html[xmlns*=""] body:last-child #header{width:100px}

Opera hack #

프로퍼티의 속성값 앞에 body:first-of-type #header {}를 감싸면 적용이 된다.

body:first-of-type #header{width:100px}

3. JS navigator userAgent #

<script>
    function myFunction() {
        var x = "User-agent header sent: " + navigator.userAgent;
        document.getElementById("demo").innerHTML = x;
    }
</script>

출처 링크 #

1. IE, 넷스케이프, 오페라, 사파리와 함께하는 Cross Browsing 가이드
2. CSS 핵(hack) 정리
3. Navigator userAgent Property