Modernizr을 사용하여 키 프레임이 지원되는지 여부를 테스트하는 방법은 무엇입니까?

브라우저에서 키 프레임을 지원하는지 테스트하고 싶습니다. 그래서 나는 this을 발견했다.Modernizr을 사용하여 키 프레임이 지원되는지 여부를 테스트하는 방법은 무엇입니까?

하지만 사용법이 정말 혼란 스럽습니까?

Modernizr.addTest("keyframes", function(){ 
    //your test code without adding a support class || this will be done by Modernizr 
    return [boolean]; // return true if it is supported or false if it is not supported 
}); 
if(Modernizr.addTest()){ 
    alert('supports'); 
}

나는 이런 식으로 사용하지만, 모든 브라우저에서 클래스를 추가 :

Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName')); 
    if($("html").hasClass('no-keyframe')){ 
     alert('test'); 
    }

출처

2014-03-25 Navin Rauniyar

Modernizr이 특징 검출에 사용되는 자바 스크립트 라이브러리입니다. 여기에서 찾을 수 있습니다 :

시작하는 데 도움이되는 몇 가지 안내서가 있습니다. 하지만 기본적으로 일단 파일을 다운로드하면 해당 테스트를 if의 맨 아래에 추가 할 수 있습니다. 그런 다음 스크립트가로드되면 문서의 <html>에 CSS 클래스가 추가됩니다. <html class="keyframes"> 또는 <html class="no-keyframes">.

그래서 다음 단계는이 방법을 사용하는 방법입니다. 글쎄, 당신이 당신의 선택기 체인, 예를 들어, 당신이 jQuery를 선택 사용할 수 있습니다

$("html.keyframes className").on(....)

즉,이 이벤트 className 만 불이 html.keyframes의 후손 인 것이다.

$("html.no-keyframes className").on(....)

하거나 같은 것을 사용할 수 있습니다 : 당신은 키 프레임은 사용할 수 없습니다 만 뭔가 전화를 원하는 경우 유사한 방식으로

, 당신은이 작업을 수행 할 것

if($('html').hasClass('keyframes')) 
{ 
//do something only if keyframes is supported 
} 
else 
{ 
//do something different if its not 
}

을

도움이 되었기를 바랍니다. 다음은 UPDATE

방법을 사용하는 방법을 보여주는 작업 바이올린입니다 : http://jsfiddle.net/wf_4/hYNy8/

내가 "외부 자원"의 CDN에 대한 URL을 포함했고, 나는를 추가 한 키 프레임을 테스트합니다. 그런 다음 jquery를 사용하여 태그의 값을 읽고 페이지에 삽입하여 볼 수있게했습니다. 내가 추가하고자하는 것은 FULL 라이브러리를 사용하면 각 페이지가로드되는 모든 테스트를 수행한다는 것입니다. 내가하는 일은 내가 필요로하는 테스트만을위한 커스텀 빌드 라이브러리를 만드는 것이다.

출처

2014-03-25 10:27:23 wf4

'html.keyframes .className'은 태그 이름과 클래스 이름에 대해 모든 조상을 검사해야하므로 잠재적으로 값 비싼 선택기입니다. 특히 많이 사용한다면'document.documentElement.classList.contains ('keyframes')'(또는 이전 브라우저의 호환성 심)를 사용하는 것이 더 효율적일 수 있습니다. 특히 부드러운 애니메이션을 보장하기 위해 코드를 가능한 한 실시간으로 유지하려는 애니메이션의 경우에 특히 그렇습니다. –

"compatibility shim"은'document.documentElement.className과 같은 의미입니다.(@ \ bkeyframes \ b /)' –

감사합니다. @NiettheDarkAbsol, 최근 작업 중 일부를 되돌아 볼 필요가 있습니다 .-) – wf4

Modernizr을 사용하여 키 프레임이 지원되는지 여부를 테스트하는 방법은 무엇입니까?

답변

관련 문제