modernizrとは？

modernizrはJavaScriptのライブラリである。
webサイトにアクセスしてきたユーザーのブラウザがどのような機能をサポートしているかをHTMLタグにサポート状況を判別できるクラスを付け加える。

Javascriptの無効判定

Javascriptが有効であるならば、htmlタグに設定したクラスno-jsはjsに書き換えられる。これを利用してJavascriptの有効判定を行う。次のようにJavascriptが有効なら、id=JSNGを持つdivクラスは非表示になる。


<!DOCTYPE HTML>
<html class="no-js" lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Javascriptの有効判定</title>
<script type="text/javascript" src="js/modernizr-custom.js"></script>
<style type="text/css">
.js #JSNG{
display:none;
}
</style>
</head>
<body>

<h1>Javascriptの有効判定</h1>

<div id="JSNG">
<p>JavaScript が無効化されています。</p>
</div>

</body>
</html>

htmlタグに追加されるクラス名

modernizr 3.2.0をFirefoxで実行させると次のようにhtmlタグにクラス名が追加された。最近のブラウザは多機能だな。

<html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor blob-constructor cookies cors customprotocolhandler customevent dataview eventlistener geolocation history no-ie8compat json notification postmessage queryselector no-serviceworker svg templatestrings typedarrays websockets no-xdomainrequest webaudio cssescape supports target microdata mutationobserver picture es5array es5date es5function es5object strictmode es5string es5syntax es5undefined es5 no-es6array generators es6math es6number es6object es6string promises devicemotion deviceorientation filereader beacon no-lowbandwidth eventsource fetch xhrresponsetype xhr2 no-speechsynthesis localstorage no-websqldatabase sessionstorage svgfilters urlparser websocketsbinary atob-btoa no-framed sharedworkers webworkers contextmenu cssall willchange classlist documentfragment contains svgasimg ambientlight hashchange no-inputsearchevent no-pointerevents audio canvas canvastext contenteditable emoji olreversed no-userdata video no-vml no-webanimations webgl adownload audioloop canvasblending todataurljpeg todataurlpng no-todataurlwebp canvaswinding bgpositionshorthand csscalc cubicbezierrange cssgradients multiplebgs opacity csspointerevents csspositionsticky no-regions cssremunit rgba no-createelementattrs no-createelement-attrs dataset hidden bdi outputelem progressbar meter ruby no-time template texttrackapi track unknownelements no-capture fileinput no-fileinputdirectory formattribute placeholder sandbox srcdoc no-seamless srcset inputformenctype input-formenctype inputformmethod inputformaction input-formaction no-inputformtarget no-input-formtarget scriptasync scriptdefer stylescoped inlinesvg textareamaxlength videoloop videopreload mediaqueries no-hiddenscroll mathml no-touchevents no-unicoderange unicode checked displaytable display-table fontface generatedcontent cssinvalid lastchild no-nthchild no-cssscrollbar siblinggeneral no-subpixelfont cssvalid cssvhunit cssvwunit no-details oninput formvalidation datalistelem no-localizednumber csschunit cssexunit hsla cssvmaxunit cssvminunit xhrresponsetypearraybuffer xhrresponsetypeblob xhrresponsetypedocument xhrresponsetypejson xhrresponsetypetext svgclippaths svgforeignobject smil textshadow batteryapi battery-api crypto no-dart fullscreen gamepads indexeddb indexeddb-deletedatabase intl pagevisibility performance pointerlock no-quotamanagement requestanimationframe raf vibrate no-webintents no-lowbattery getrandomvalues backgroundblendmode objectfit object-fit no-wrapflow no-filesystem no-requestautocomplete no-speechrecognition bloburls getusermedia peerconnection datachannel matchmedia cssanimations csspseudoanimations appearance no-backdropfilter no-backgroundcliptext no-bgpositionxy no-bgrepeatround no-bgrepeatspace backgroundsize bgsizecover borderimage borderradius boxshadow boxsizing csscolumns csscolumns-width no-csscolumns-span csscolumns-fill csscolumns-gap csscolumns-rule csscolumns-rulecolor csscolumns-rulestyle csscolumns-rulewidth no-csscolumns-breakbefore no-csscolumns-breakafter no-csscolumns-breakinside no-displayrunin no-display-runin ellipsis cssfilters flexbox flexboxlegacy no-flexboxtweener flexwrap no-cssmask no-overflowscrolling no-cssreflections cssresize no-shapes textalignlast csstransforms csstransforms3d preserve3d csstransitions csspseudotransitions userselect no-exiforientation no-jpeg2000 no-jpegxr no-webpalpha no-webpanimation no-webplossless no-webp apng datauri blobworkers dataworkers no-proximity no-csshyphens softhyphens no-softhyphensfind no-audiopreload videoautoplay" lang="ja">

参考文献

Modernizr: the feature detection library for HTML5/CSS3