브라우저의 경우 자바 스크립트를 사용 하시겠습니까?

Question

누군가 어떤 브라우저 (및 버전)를 사용하고 있는지 감지하는 스크립트가 있는데 특정 브라우저의 경우 div 클래스가 마우스를 올리면 애니메이션이 표시되도록 설정하고 싶습니다. jQuery를 사용하여이 작업을하고 싶습니다. 그러나 무엇이든 할 수 있습니다.

자바 스크립트에 대한 나의 생각은

이 ...

if (browser == IE || browser < Firefox 4) { 
     // somehow animate a div class on hover (could be id-based too) 
    } else { 
     // do nothing 
    } 

내가 이것을 위해 설정 한 CSS이

.item { 
    height: 100px; 
    width: 100px; 
    /* css3 */ 
    transition: height .5s, width .5s; 
    -moz-transition: height .5s, width .5s; 
    -webkit-transition: height .5s, width .5s; 
} 

.item:hover { 
    height: 200px; 
    width: 200px; 
} 

같은, 그리고, HTML은 (명백하게)입니다

입니다

<div class="item" id="item"> 
    <p>Content here</p> 
</div><!-- end item --> 

이전 브라우저의 경우 CSS3 수정이 목적입니다. 전환은 내 의견으로는 CSS3에 관한 가장 좋은 것 중 하나이며 IE9에 대한 지원이 포함되어 있지 않은 것을 나에게 괴롭 히고 있습니다.

Answer 1

대신 Modernizr 라이브러리와 같은 것을 사용하는 것이 어떻습니까?

http://www.modernizr.com/

모더 나이저 당신이 당신의 스타일 시트에서 특정 브라우저 기능을 타겟팅 할 수있는 요소에 클래스를 추가

. 실제로 사용하기 위해 자바 스크립트를 작성할 필요는 없습니다.

당신은 다음과 같은 것들을 할 수 있습니다 : 당신은 여기에 매우 위험한 길을가는 그런 스니핑 브라우저를 사용하고

.multiplebgs div p { 
    /* properties for browsers that 
    support multiple backgrounds */ 
} 
.no-multiplebgs div p { 
    /* optional fallback properties 
    for browsers that don't */ 
} 

Answer 2

.

대신 기능 감지 사용을 시도해야합니다. 저기 라이브러리가 환상적인 Modernizr처럼 당신을 위해 이것을 할 수 있습니다.

Answer 3

브라우저 스니핑은 JS 코드를 작성하는 가장 좋은 방법은 아닙니다. 브라우저가 지원하고 심지어 버전 검출와 엉망이없는 경우

if ($.browser.webkit) { 
    alert("this is webkit!"); 
    } 

var ua = $.browser; 
    if (ua.mozilla && ua.version.slice(0,3) == "1.9") { 
    alert("Do stuff for firefox 3"); 
    } 

if ($.browser.msie) { 
    $("#div ul li").css("display","inline"); 
} else { 
    $("#div ul li").css("display","inline-table"); 
} 

Answer 4

사용 $.support 확인하기 : 당신이 jQuery를 선호하는 경우

, 여기 jQuery.browser object

몇 가지 예입니다. 이는 미래의 코드 증명에 도움이되며 실제로하고 싶은 것을 더 정확하게 모델링 할 수 있습니다. 사실

이미 a jQuery plugin to do this specifically.있다 : D

Answer 5

당신은 이런 식으로 뭔가를 할 수 :

<![if (IE 6)|(IE 7)|(IE 8)]--> 
<link type="text/css" rel="stylesheet" href="nocss3.css" /> 
<script type="text/javascript" src="nocss3.js"></script> 
<![endif]--> 

Answer 6

당신은 다양한 HTML 5와 CSS3의 지원을 감지하고 수정 라이브러리 Modernizer (http://www.modernizr.com)를 사용할 수 있습니다 다른 브라우저의 기능.

여기가 CSS3 전환에 대해 자신의 문서에있는 내용은 다음과 같습니다
http://www.modernizr.com/docs/#csstransitions

CSS의 전환은 CSS3의 믿을 수 없을만큼 유용한 새로운 부분이다. 브라우저를 사용하면 브라우저를 활성화하거나이 아닌 하나의 상태에서 다른 상태로 전환 할 수 있습니다. 시작과 끝만 지정하면 브라우저는 나머지를 처리합니다.

Modernizr에서 우리는 속성을 모든 공급 업체 접두사로 사용하여 전환을 테스트합니다. 모양 및/또는 다른 그들이 사용할 수있는 행동을

전환은 일반적으로 모더 나이저의 특정 CSS 클래스 나 자바 스크립트 속성을 사용하지 않고 을 사용할 수 있지만, 이러한 경우를 위해 당신은 당신의 사이트의 일부를 원한다. 좋은 예를 들면 을 사용하면 애니메이션 엔진에 Modernizr을 구축하는 것입니다.이 엔진은 브라우저에 기본 CSS 전환을 사용하며, 브라우저에없는 자바 스크립트에서는 의 JavaScript를 사용합니다.

샘플 사용법 :

a { 
    color: #090; 
    -webkit-transition: color .2s ease-out; 
} 
a:focus, 
a:hover { 
    color: #9f9; 
} 

Answer 7

당신은 IE8과 IE7은 또한 그들을 지원하고 있지 않습니다 튜토리얼 https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support