Modernizerを用いたHTML5Webサイトの構築

<!DOCTYPE html> <html lang="ja"> ! <head> ! ! <meta charset="UTF-8" /> ! ! <script src="prettyprint.js"></script> ! ! <script src="modernizr.js"></script> ! </head> ! <body> ! ! <div id="debug"></div> ! ! <script> ! ! ! var info = prettyPrint(Modernizr); ! ! ! document.getElementById("debug").appendChild(info); ! ! </script> ! </body> </html>

.button { ! ! background-image: url("images/button.png"); } .cssgradients .button { ! background-image: -webkit-gradient(linear, ! ! center top, ! ! center bottom, ! ! from(#555), ! ! to(#333)); ! background-image: -moz-linear-gradient(top, #555, #333); ! background-image: linear-gradient(top, #555, #333); }

.button { ! ! background-image: -webkit-gradient(linear, ! ! center top, ! ! center bottom, ! ! from(#555), ! ! to(#333)); ! background-image: -moz-linear-gradient(top, #555, #333); ! background-image: linear-gradient(top, #555, #333); } .no-cssgradients .button { ! background-image: url("images/button.png"); }

if (Modernizr.canvas) { ! // canvas } if (Modernizr.indexeddb) { ! // indexedDB }

var eventEndName = { ! "WebkitTransition": "webkitTransitionEnd", ! "MozTransition": "transitionend", ! "transition": "transitionEnd" }; document.getElementById("hogehoge").addEventListener( eventEndName[Modernizr.preﬁxed("transition")], function(e) { ! // transition }, false);

Modernizerを用いたHTML5Webサイトの構築

Modernizerを用いたHTML5Webサイトの構築

More Related Content

What's hot

More from Hiroaki Wakamatsu

Modernizerを用いたHTML5Webサイトの構築