<!DOCTYPE html>
<meta charset=utf-8>
<head>
<title>HTML5 Test</title>
<style>
table {border:2px solid black;border-spacing:0px;}
td {white-space:nowrap;padding:5px;}
.support {text-align:center;}
</style>
<script src="modernizr.js"></script>
</head>
<body>
<table rules="all">
<caption>您的瀏覽器支援那些 HTML5 功能?</caption>
<tr>
<th>HTML5 功能</th>
<th>Modernizr 屬性</th>
<th style="width:50px;">支援</td>
</tr>
<tr>
<td>Canvas 繪圖</td>
<td>Modernizr.canvas</td>
<td class="support">
<script>Modernizr.canvas? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Canvas 文字</td>
<td>Modernizr.canvastext</td>
<td class="support">
<script>Modernizr.canvastext? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Video 視訊</td>
<td>Modernizr.video</td>
<td class="support">
<script>Modernizr.video? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Video ogg 解碼器</td>
<td>Modernizr.video.ogg</td>
<td class="support">
<script>Modernizr.video.ogg? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Video h.264 解碼器</td>
<td>Modernizr.video.h264</td>
<td class="support">
<script>Modernizr.video.h264? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Video WebM 解碼器</td>
<td>Modernizr.video.webm</td>
<td class="support">
<script>Modernizr.video.webm? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Audio 音訊</td>
<td>Modernizr.audio</td>
<td class="support">
<script>Modernizr.audio? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Audio mp3 音訊</td>
<td>Modernizr.audio.mp3</td>
<td class="support">
<script>Modernizr.audio.mp3? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Audio wav 音訊</td>
<td>Modernizr.audio.wav</td>
<td class="support">
<script>Modernizr.audio.wav? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Audio m4a 音訊</td>
<td>Modernizr.audio.m4a</td>
<td class="support">
<script>Modernizr.audio.m4a? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Drag and Drop 拖放</td>
<td>Modernizr.draganddrop</td>
<td class="support">
<script>Modernizr.draganddrop? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Local Storage 本地儲存</td>
<td>Modernizr.localstorage</td>
<td class="support">
<script>Modernizr.localstorage? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Session Storage 連線儲存</td>
<td>Modernizr.sessionstorage</td>
<td class="support">
<script>Modernizr.sessionstorage? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Web Worker 背景執行</td>
<td>Modernizr.webworkers</td>
<td class="support">
<script>Modernizr.webworkers? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Application Cache 離線執行</td>
<td>Modernizr.applicationcache</td>
<td class="support">
<script>Modernizr.applicationcache? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Geolocation 地理定位</td>
<td>Modernizr.geolocation</td>
<td class="support">
<script>Modernizr.geolocation? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>IndexedDB 本地資料庫</td>
<td>Modernizr.indexeddb</td>
<td class="support">
<script>Modernizr.indexeddb? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Web SQL 本地資料庫</td>
<td>Modernizr.websqldatabase</td>
<td class="support">
<script>Modernizr.websqldatabase? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Web Sockets 網路通訊</td>
<td>Modernizr.websockets</td>
<td class="support">
<script>Modernizr.websockets? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Post Message 跨文件通訊</td>
<td>Modernizr.postmessage</td>
<td class="support">
<script>Modernizr.postmessage? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>History 物件管理</td>
<td>Modernizr.history</td>
<td class="support">
<script>Modernizr.history? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>SVG 可縮放向量繪圖</td>
<td>Modernizr.svg</td>
<td class="support">
<script>Modernizr.svg? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Inline SVG</td>
<td>Modernizr.inlinesvg</td>
<td class="support">
<script>Modernizr.inlinesvg? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>SVG Clip Paths 剪裁路徑</td>
<td>Modernizr.svgclippaths</td>
<td class="support">
<script>Modernizr.svgclippaths? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>SMIL 同步多媒體集成語言</td>
<td>Modernizr.smil</td>
<td class="support">
<script>Modernizr.smil? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>WebGL 3D 繪圖</td>
<td>Modernizr.webgl</td>
<td class="support">
<script>Modernizr.webgl? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Hash Chage 事件</td>
<td>Modernizr.hashchange</td>
<td class="support">
<script>Modernizr.hashchange? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Touch 事件</td>
<td>Modernizr.touch</td>
<td class="support">
<script>Modernizr.touch? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: search</td>
<td>Modernizr.inputtypes.search</td>
<td class="support">
<script>Modernizr.inputtypes.search? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: tel</td>
<td>Modernizr.inputtypes.tel</td>
<td class="support">
<script>Modernizr.inputtypes.tel? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: url</td>
<td>Modernizr.inputtypes.url</td>
<td class="support">
<script>Modernizr.inputtypes.url? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: datetime</td>
<td>Modernizr.inputtypes.datetime</td>
<td class="support">
<script>Modernizr.inputtypes.datetime? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: date</td>
<td>Modernizr.inputtypes.date</td>
<td class="support">
<script>Modernizr.inputtypes.date? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: month</td>
<td>Modernizr.inputtypes.month</td>
<td class="support">
<script>Modernizr.inputtypes.month? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: week</td>
<td>Modernizr.inputtypes.week</td>
<td class="support">
<script>Modernizr.inputtypes.week? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: time</td>
<td>Modernizr.inputtypes.time</td>
<td class="support">
<script>Modernizr.inputtypes.time? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: datetime-local</td>
<td>Modernizr.inputtypes.datetimelocal</td>
<td class="support">
<script>Modernizr.inputtypes.datetimelocal? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: number</td>
<td>Modernizr.inputtypes.number</td>
<td class="support">
<script>Modernizr.inputtypes.number? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: range</td>
<td>Modernizr.inputtypes.range</td>
<td class="support">
<script>Modernizr.inputtypes.range? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input Types 輸入表單: color</td>
<td>Modernizr.inputtypes.color</td>
<td class="support">
<script>Modernizr.inputtypes.color? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: autocomplete</td>
<td>Modernizr.input.autocomplete</td>
<td class="support">
<script>Modernizr.input.autocomplete? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: autofocus</td>
<td>Modernizr.input.autofocus</td>
<td class="support">
<script>Modernizr.input.autofocus? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: list</td>
<td>Modernizr.input.list</td>
<td class="support">
<script>Modernizr.input.list? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: placeholder</td>
<td>Modernizr.input.placeholder</td>
<td class="support">
<script>Modernizr.input.placeholder? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: max</td>
<td>Modernizr.input.max</td>
<td class="support">
<script>Modernizr.input.max? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: min</td>
<td>Modernizr.input.min</td>
<td class="support">
<script>Modernizr.input.min? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: multiple</td>
<td>Modernizr.input.multiple</td>
<td class="support">
<script>Modernizr.input.multiple? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: pattern</td>
<td>Modernizr.input.pattern</td>
<td class="support">
<script>Modernizr.input.pattern? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: required</td>
<td>Modernizr.input.required</td>
<td class="support">
<script>Modernizr.input.required? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>Input 屬性: step</td>
<td>Modernizr.input.step</td>
<td class="support">
<script>Modernizr.input.step? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: @font-face</td>
<td>Modernizr.fontface</td>
<td class="support">
<script>Modernizr.fontface? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: background-size</td>
<td>Modernizr.backgroundsize</td>
<td class="support">
<script>Modernizr.backgroundsize? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: border-image</td>
<td>Modernizr.borderimage</td>
<td class="support">
<script>Modernizr.borderimage? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: border-radius</td>
<td>Modernizr.borderradius</td>
<td class="support">
<script>Modernizr.borderradius? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: box-shadow</td>
<td>Modernizr.boxshadow</td>
<td class="support">
<script>Modernizr.boxshadow? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: Flexible Box Model</td>
<td>Modernizr.flexbox</td>
<td class="support">
<script>Modernizr.flexbox? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: hsla</td>
<td>Modernizr.hsla</td>
<td class="support">
<script>Modernizr.hsla? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: Multiple backgrounds</td>
<td>Modernizr.multiplebgs</td>
<td class="support">
<script>Modernizr.multiplebgs? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: opacity</td>
<td>Modernizr.opacity</td>
<td class="support">
<script>Modernizr.opacity? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: rgba</td>
<td>Modernizr.rgba</td>
<td class="support">
<script>Modernizr.rgba? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: text-shadow</td>
<td>Modernizr.textshadow</td>
<td class="support">
<script>Modernizr.textshadow? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: CSS Animations</td>
<td>Modernizr.cssanimations</td>
<td class="support">
<script>Modernizr.cssanimations? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: CSS Columns</td>
<td>Modernizr.csscolumns</td>
<td class="support">
<script>Modernizr.csscolumns? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: Generated Content</td>
<td>Modernizr.generatedcontent</td>
<td class="support">
<script>Modernizr.generatedcontent? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: CSS Gradients</td>
<td>Modernizr.cssgradients</td>
<td class="support">
<script>Modernizr.cssgradients? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: CSS Reflections</td>
<td>Modernizr.cssreflections</td>
<td class="support">
<script>Modernizr.cssreflections? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: CSS 2D Transforms</td>
<td>Modernizr.csstransforms</td>
<td class="support">
<script>Modernizr.csstransforms? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: CSS 3D Transforms</td>
<td>Modernizr.csstransforms3d</td>
<td class="support">
<script>Modernizr.csstransforms3d? document.write("O"): document.write("X");</script>
</td>
</tr>
<tr>
<td>CSS 屬性: CSS Transitions</td>
<td>Modernizr.csstransitions</td>
<td class="support">
<script>Modernizr.csstransitions? document.write("O"): document.write("X");</script>
</td>
</tr>
</table>
</body>