## 一、H5 標簽 有時候不太確定某個 Web API 與瀏覽器、手機瀏覽器能否兼容？`CanIUse(https://www.caniuse.com)`讓你輕松測試 Web API 與瀏覽器的兼容情況。  對于不支持 H5 的瀏覽器，可以引入`html5shiv.js`來達到兼容的效果。 ## 二、CSS3  對于某些瀏覽器支持`CSS3`，但是需要添加瀏覽器前綴。同時也可以使用`modernizr.js`來對不支持的瀏覽器做兼容處理。 ``` <header>header</header> <footer>footer</footer> ``` ``` .flexbox header { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; } .no-flexbox header { text-align: center; line-height: 50px; } ``` ``` <script src="js/modernizr.js"></script> ``` ## 三、JS 在 Web 應用中，實現動畫效果的方法比較多，Javascript 中可以通過定時器 setTimeout 來實現，css3 可以使用?transition 和 animation 來實現，html5 中的 canvas 也可以實現。除此之外，html5 還提供一個專門用于請求動畫的 API，那就是 requestAnimationFrame，顧名思義就是**請求動畫幀。** ``` // 判斷requestAnimationFrame是否可用 if (window.requestAnimationFrame) { // ... } // 或者 var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (fn) { setTimeout(fn, 20) }; ```