2006 10월 12

CSS 혹은 JavaScript를 이용한 웹 브라우저 구별 방법

물론 여기에 소개된 꼼수들은 완전한 세상에 살고 있다면 불필요한 과정이겠지만, 냉험한 현실 속의 웹 브라우저들은 개발자들에게 차별 대우를 요구한다.

IE 7에서는 이제 CSS의 maxHeight 속성을 이해한다는 것을 이용해서, 다음과 같은 JavsScirpt 코드로 구별할 수 있다:

if (typeof document.body.style.maxHeight != "undefined") {
  // IE 7, Mozilla, Safari, Opera 9 
} else {
  // IE 6, older browsers 
}

IE 7의 변화에 따른 다음과 같은 더 간단한 방법도 있다:

if (window.XMLHttpRequest) {
  // IE 7, Mozilla, Safari, Opera 9  
} else {
  // IE 6, older browsers 
}

물론, 전통적으로 사용되어 왔던 MSDN에 자세하게 소개되어 있는 조건부 주석을 이용한 구별 방법도 유효하다:

<!--[if IE 7]>
<script type="text/javascript">isIE7 = true;</script>
< ![endif]-->
 ... 기타 브라우져들을 위한 코드

덤으로, CSS 속성 이름 앞에 * 혹은 .(점) 그리고 _(밑줄)이 붙어있는 경우에는 브라우져들 마다 제각기 다르게 인식한다는 것을 이용해서 다음과 같은 방법을 사용할 수도 있다. (IE8의 경우 스타일 선언문 마지막에 꼭 “\9″을 붙여주어야 한다.):

/***** Attribute Hacks ******/
#header {
  margin: 10px;   /* any browsers */
  margin: 12px\9; /* IE 8 and below */
  *margin: 15px;  /* IE 7 and below */
  _margin: 20px;  /* IE 6 and below */
}
 
/***** Selector Hacks ******/
/* IE6 and below */
* html #someDiv { color: red }
/* IE7 */
*+html #someDiv { color: red }

– 참고 글

꼬리표: