wulin.com (www.vevb.com) 기사 소개 : Modernizr 및 HTML5.
좋아, html5는 지금 인기가 있으므로 제목에 html5를 추가 할 것입니다 :)
실제로 ModernIZR은 HTML5에서 태어났습니다. HTML5 및 CSS3 기능에 대한 브라우저의 지원을 감지하는 JS 라이브러리입니다. 유명한 HTML5/CSS3 브라우저 호환성 웹 사이트 FindMeByip 은이 프레임 워크를 기반으로합니다.
오른쪽 하단의 녹색 버튼에 Modernizr에 대한 링크가 있음을 알 수 있습니다.
Modernizr의 특징Modernizr의 기능은 실제로 매우 간단합니다. JS를 사용하여 HTML5/CSS3 기능에 대한 브라우저의 지원을 감지하는 것입니다. 특정 속성을 지원하는 경우 페이지의 <html> 태그에 해당 클래스를 추가하십시오. 지원하지 않으면 준비되지 않은 클래스를 추가하십시오. 예를 들어, 감지 된 브라우저가 비디오 태그를 지원하는 경우 Modernizr은 <html> 태그에 비디오 클래스를 추가하고, 그렇지 않으면, 비데이오 클래스를 추가합니다.
FindMeByip의 소스 코드를 확인하거나 FireBug와 같은 도구를 사용하여 페이지 코드를 보면 <html> 태그에서 클래스를 볼 수 있습니다.
또한 ModernIZR은 또 다른 사용량을 제공하며, 이는 다음과 같은 특정 기능에 대한 브라우저의 지원을 감지하는 것입니다.
유사한 인터페이스를 통해 브라우저의 HTML5 지원을 감지하는 것이 비교적 안전합니다.
브라우저 감지 : UA 대 기능실제로 모든 사람은 일반적으로 UA를 사용하여 브라우저를 감지합니다. 물론 UA는 더 풍부한 정보를 제공합니다. UA는 전능하지 않으며 사용자 브라우저의 UA 변장 및 일부 후진 브라우저가 제공하는 UA 정보 부족과 같은 약점도 있습니다. 더 중요한 것은 HTML5 기능의 경우 UA를 사용하여 브라우저가 특정 기능을 지원하는지 여부를 결정하는 것이 너무 복잡하고 신뢰할 수 없습니다.
물론 UA와 기능 탐지에 대한 논쟁이 항상있었습니다. 여기서 내가 말하고 싶은 것은 웹 사이트에서 기능 지원을 감지하기 위해 HTML5를 사용하여 특정 문제에 대한 특정 분석이 UA보다 신뢰할 수 있고 편리하다는 것입니다.
Modernizr 사용Modernizr의 사용은 매우 간단합니다. 라이브러리의 JS 파일을 페이지에 소개합니다.
>/스크립트>
Modernizr은 오픈 소스이지만 어떤 이유로 g-fw에 의해 차단되었습니다.
modernizr @ gitModernizr 프로젝트는 GIT로 주최되며 다음 주소로 얻을 수 있습니다.
저자는 또한 GIT에서 간단한 출력 페이지를 제공합니다.
자세한 테스트 페이지 :
확장 된 독서 :HTML5 기능 감지
Modernizr과 함께 HTML5 및 CSS3를 안전하게 배포하십시오