HTML5-Modernizr

Modernizr는 작습니다 JavaScript Library 차세대 웹 기술에 대한 기본 구현의 가용성을 감지합니다.

HTML5 및 CSS3를 통해 도입 된 몇 가지 새로운 기능이 있지만 동시에 많은 브라우저가 이러한 뉴스 기능을 지원하지 않습니다.

Modernizr는 새로운 기능을 쉽게 감지 할 수있는 방법을 제공하므로 해당 작업을 수행 할 수 있습니다. 예를 들어 브라우저가 비디오 기능을 지원하지 않는 경우 간단한 페이지를 표시하려고합니다.

기능 가용성을 기반으로 CSS 규칙을 만들 수 있으며 브라우저가 새 기능을 지원하지 않는 경우 이러한 규칙이 웹 페이지에 자동으로 적용됩니다.

Modernizr Download 에서이 유틸리티의 최신 버전을 다운로드 할 수 있습니다 .

통사론

Modernizr 사용을 시작하기 전에 다음과 같이 HTML 페이지 헤더에 자바 스크립트 라이브러리를 포함해야합니다.

<script src="modernizr.min.js" type="text/javascript"></script>

위에서 언급했듯이 기능 가용성을 기반으로 CSS 규칙을 만들 수 있으며 브라우저가 새로운 기능을 지원하지 않는 경우 이러한 규칙이 웹 페이지에 자동으로 적용됩니다.

다음은 지원되는 기능과 지원되지 않는 기능을 처리하는 간단한 구문입니다.

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

여기서는 지원하지 않는 브라우저에 대해 처리하려는 모든 기능 / 속성에 "no-"접두사를 붙여야한다는 점이 주목할 만합니다.

다음은 Javascript를 통해 특정 기능을 감지하는 구문입니다.

if (Modernizr.audio) {
   /* properties for browsers that
   support audio */
}

else{
   /* properties for browsers that
   does not support audio */
}

Modernizr에서 감지 한 기능

다음은 Modernizr에서 감지 할 수있는 기능 목록입니다.

특색	CSS 속성	자바 스크립트 확인
@ font-face	.fontface	Modernizr.fontface
캔버스	.캔버스	Modernizr.canvas
캔버스 텍스트	.canvastext	Modernizr.canvastext
HTML5 오디오	.audio	Modernizr.audio
HTML5 오디오 형식	NA	Modernizr.audio [형식]
HTML5 비디오	.비디오	Modernizr.video
HTML5 비디오 형식	NA	Modernizr.video [형식]
rgba ()	.rgba	Modernizr.rgba
hsla ()	.hsla	Modernizr.hsla
경계 이미지	.borderimage	Modernizr.borderimage
테두리 반경	.borderradius	Modernizr.borderradius
상자 그림자	.boxshadow	Modernizr.boxshadow
여러 배경	.multiplebgs	Modernizr.multiplebgs
불투명	.불투명	Modernizr.opacity
CSS 애니메이션	.cssanimations	Modernizr.cssanimations
CSS 열	.csscolumns	Modernizr.csscolumns
CSS 그라디언트	.cssgradients	Modernizr.cssgradients
CSS 반사	.cssreflections	Modernizr.cssreflections
CSS 2D 변환	.csstransforms	Modernizr.csstransforms
CSS 3D 변환	.csstransforms3d	Modernizr.csstransforms3d
CSS 전환	.csstransitions	Modernizr.csstransitions
Geolocation API	.geolocation	Modernizr.geolocation
입력 유형	NA	Modernizr.inputtypes [유형]
입력 속성	NA	Modernizr.input [속성]
localStorage	.localstorage	Modernizr.localstorage
sessionStorage	.sessionstorage	Modernizr.sessionstorage
웹 워커	.webworkers	Modernizr.webworkers
applicationCache	.applicationcache	Modernizr.applicationcache
SVG	.svg	Modernizr.svg
SVG 클립 경로	.svgclippaths	Modernizr.svgclippaths
미소	.smil	Modernizr.smil
웹 SQL 데이터베이스	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
웹 소켓	.websockets	Modernizr.websockets
해시 체인지 이벤트	.hashchange	Modernizr.hashchange
역사 관리	.historymanagement	Modernizr.historymanagement
끌어서 놓기	.끌어서 놓기	Modernizr.draganddrop
창 간 메시징	.crosswindowmessaging	Modernizr.crosswindowmessaging
addTest () 플러그인 API	NA	Modernizr.addTest (str, fn)