簡介
使用方式
這裡面就會在不支援的屬性上加入 no- 的字樣，以上面的例子，no-touch 就是不支援觸控的意思啦！詳細字樣對應可以參考 https://modernizr.com/docs，這樣的字樣還蠻容易令人了解的，比如說想知道 css animation 的支援度，只要查 animation 字樣，就可以知道 browser 支援狀態。
另外還可以透過 js 來判定支援度，如下面程式，就可以判定， html5 本機儲存功能是否支援。
if (Modernizr.localstorage) { // 有支援本機儲存 } else { // 不支援本機儲存 }
範例
這個範例只要是在偵測 animation 與 css 變型 支援度，如果沒支援，就會看到 GG。
結語
如果製作的網頁規格不需考慮舊版瀏覽器，特別是 IE ，那應該就可以忽略這項工具，例如，只做手機版的話，但如果不幸的話 = =，那這項工具將會幫你很多。另外，在製作時，也有個網站很方便查詢語法支援，http://caniuse.com/，搭配查詢，應該可以讓開發者們，輕鬆應付不支援的狀態了吧！
Ref
http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
https://desandro.github.io/3dtransforms/examples/box-01-steps.html
http://bourbon.io/
今天要來介紹一個功能強大的套件，主要是在做 broswer 對 css3 / html5 支援度判定，另外也會在網頁瀏覽時，順便添加判定後的 class 在 div 上面，方便 Developer 做未支援的處理。
使用方式
首先下載 https://modernizr.com/download 並引用至網頁，然後在 html 加上 class="no-js" ，待瀏覽時就會發現 html class="{加了一堆判定...}"
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
這裡面就會在不支援的屬性上加入 no- 的字樣，以上面的例子，no-touch 就是不支援觸控的意思啦！詳細字樣對應可以參考 https://modernizr.com/docs，這樣的字樣還蠻容易令人了解的，比如說想知道 css animation 的支援度，只要查 animation 字樣，就可以知道 browser 支援狀態。
另外還可以透過 js 來判定支援度，如下面程式，就可以判定， html5 本機儲存功能是否支援。
if (Modernizr.localstorage) { // 有支援本機儲存 } else { // 不支援本機儲存 }
範例
這個範例只要是在偵測 animation 與 css 變型 支援度，如果沒支援，就會看到 GG。
結語
如果製作的網頁規格不需考慮舊版瀏覽器，特別是 IE ，那應該就可以忽略這項工具，例如，只做手機版的話，但如果不幸的話 = =，那這項工具將會幫你很多。另外，在製作時，也有個網站很方便查詢語法支援，http://caniuse.com/，搭配查詢，應該可以讓開發者們，輕鬆應付不支援的狀態了吧！
Ref
http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
https://desandro.github.io/3dtransforms/examples/box-01-steps.html
http://bourbon.io/
留言
張貼留言