2010 2월 12

JavaScript에서 IE만 골라내기

2010년이 돼서도 차별대우는 어쩔 수 없다.

var isMSIE = /*@cc_on!@*/false;
 
// or shorter one next 
 
var isMSIE//@cc_on=1

Dean Edwards씨가 몇 년전 쌀짝 공개했던 코드로 알려지게 되었는데, Internet Explorer에서만 채용된 JavaScript의 짝퉁, JScript의 Conditional Compilation Statements때문이란다.

혹은 더 짧게,

if(!+"\v1") // true only in IE

꼬리표:

2009 1월 31

한 줄의 JavaScript 코드를 이용한 브라우저 판별법

JavaScript, Notes, Quotes 댓글이 없음 »

아래 한 줄의 코드 실행으로 Firefox 3(FF3), Firefox 2(FF2), Firefox(FF), Internet Explorer(IE), Safari(Saf) 그리고 Chrome(Chr)의 결과 값을 얻을 수 있다:

B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown';

퍼 나른 곳 = The Spanner – Detecting browsers javascript hacks

물론, 각 브라우저의 차기 버전이 배포되면 결과 값은 틀려질 수가 있으므로 사용에 주의를 요하지만, 종종 단순한 작업을 위한 긴급 처방으로 요긴할 때가 있다.

꼬리표:

2006 10월 12

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

CSS, JavaScript, Notes, Quotes 댓글이 없음 »

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

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 }

– 참고 글

꼬리표: