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サイトの構築

More Related Content

What's hot (20)

More from Hiroaki Wakamatsu (6)

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