前端工程師-設計開發(fā)Modernizr的應用出口_第1頁
前端工程師-設計開發(fā)Modernizr的應用出口_第2頁
前端工程師-設計開發(fā)Modernizr的應用出口_第3頁
前端工程師-設計開發(fā)Modernizr的應用出口_第4頁
免費預覽已結束，剩余1頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

1、modernizr是一個開源的js庫，它使得那些基于訪客瀏覽器的不同（指對新標準支持性的差異）而開發(fā)不同級別體驗的設計師的工作變得更為簡單。ad： 10年前，只有最尖端的網(wǎng)站設計師會為網(wǎng)頁的布局和修飾使用css。那時的瀏覽器對css進行布局的支持即不完善又漏洞百出，所以這些人在堅持web標準化的同時，也不得不采用hacks來使得他們的頁面在所有瀏覽器中都能正常顯示。其中一個被使用的越來越多的hack技術是瀏覽器嗅探（browser sniffing），使用javascript里的navigator.useragent屬性來判斷用戶使用的是什么品牌哪個版本的瀏覽器。瀏覽器嗅探技術可以快捷的將代碼

2、進行分支，以便針對不同的瀏覽器應用不同的指令。51cto推薦專題：html 5 下一代web開發(fā)標準詳解今天，以css為基礎進行的布局已經(jīng)非常普遍，瀏覽器們對它的支持也非常的堅實。但是現(xiàn)在css3和html5來了，歷史轉了個圈又回到了原地各個瀏覽器對這些新技術的支持又開始變得參差不齊了。我們早都習慣了書寫整潔的符合標準的代碼，也不會再使用css hacks或者瀏覽器嗅探這些不靠譜又低級的技術。我們也相信越來越多的用戶會認同網(wǎng)站不必在所有瀏覽器里都看起來一樣的理念。那面對當下這個熟悉的情形（瀏覽器支持的不同），我們該怎么做呢？簡單：使用特征檢測（feature detection），這意味著我們

3、不必通過問瀏覽器“你是誰？”來做出不靠譜的推測。取而代之，我們問瀏覽器“你能做這個或那個嗎”。這么來檢測瀏覽器的能力是很簡便的，但一個個的花時間去手工測試依然令人厭煩。此時modernizr可以幫助我們。modernizr：專為html5和css3開發(fā)的功能檢測類庫modernizr是一個開源的js庫，它使得那些基于訪客瀏覽器的不同（指對新標準支持性的差異）而開發(fā)不同級別體驗的設計師的工作變得更為簡單。它使得設計師可以在支持html5和css3的瀏覽器中充分利用html5和css3的特性進行開發(fā)，同時又不會犧牲其他不支持這些新技術的瀏覽器的控制。當你在網(wǎng)頁中嵌入modernizr的腳本時，它會

4、檢測當前瀏覽器是否支持css3的特性，比如 font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持html5的特性比如audio、video、本地儲存、和新的 標簽的類型和屬性等。在獲取到這些信息的基礎上，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創(chuàng)建一個基于js的fallback，或者對那些不支持的瀏覽器進行簡單的優(yōu)雅降級。另外，modernizr還可以令ie支持對html5的元素應用css樣式，這樣開發(fā)者就可以立即使用這些更富有語義化的標簽了。modernizr是基于漸進增強理論來開發(fā)的，所以它支

5、持并鼓勵開發(fā)者一層一層的創(chuàng)建他們的網(wǎng)站。一切從一個應用了javascript的空閑地基開始，一個接一個的添加增強的應用層。因為使用了modernizr，所以你容易知道瀏覽器都支持什么。下面我們來看一個通過應用modernizr來創(chuàng)建尖端網(wǎng)站的實例。從應用modernizr開始首先從下載modernizr的最新的穩(wěn)定版（目前國內(nèi)封了modernizr的官網(wǎng)，我們可以從github上下載。或者更簡單點，可以從堂主這里下載最新的1.7版的腳本文件），在官網(wǎng)上你還可以看到它支持檢測的所有特性的清單（本文末位會給出這些清單，以便翻不了墻的童鞋可以知道都支持哪些）。下載完最新版本以后（作者寫這篇文章的時候

6、用的是1.5版），把它加入頁面的區(qū)域：1. > 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>my beautiful sample page</< span>title> 6. <script src="modernizr-1.5.min.js"></< span>script>

7、; 7. </< span>head> 8.  接下來，向元素添加“no-js”的類。當modernizr運行的時候，它會把這個“no-js”的類變?yōu)椤癹s”來使你知道它已經(jīng)運行。modernizr并不僅僅只做這一件事情，它還會為所有它檢測過的特性添加class類，如果瀏覽器不支持某個特性，它就為該特性對應的類名加上“no-”的前綴。所以，你的元素可能會變得看起來像下面這個樣子：modernizr同時還會創(chuàng)建一個js對象，被命名為“modernizr”，其內(nèi)容是為每一個檢測完的特性給出的布爾值結果組成的列表。如果瀏覽器支持新的canvas元

8、素，那么“modernizr.canvas”的值就是true；如果瀏覽器不支持這個新元素，那它對應的值就是false。這個js對象針對某些功能還會包含更為詳細的信息，如“modernizr.video.h264”會告訴你瀏覽器是否支持這個特殊的編解碼器?！癿odernizr.inputtypes.search”會告訴你當前瀏覽器是否支持新的search input類型，等等。我們的未加工的簡單小頁面看起來有點像一個準測試系統(tǒng)了，但它具備更好的語義性和可訪問性。讓我們?yōu)樗砑右稽c基本的樣式：一點文字格式、顏色和布局以使它更好看。目前位置，沒什么新東西，只是為一個語義化結構的html頁面添加表現(xiàn)樣

9、式，看看添加了樣式后的頁面。下面，我們要增強這個頁面使得它更有意思。我想為頭部的h1應用一個奇特的文字效果，把關于檢測特性的列表分為兩欄，然后將帶有一張照片的關于modernizr的部分的一切都弄到右邊去。我還要把圍繞頁面內(nèi)容的邊框變美點。現(xiàn)在，更給力的css3使你可以對一條規(guī)則添加更多的屬性，如果瀏覽器不支持這些屬性，它會忽略它們。配合使用css的層疊（繼承），你可以不必依賴modernizr而使用像“border-radius”這樣的新屬性。不過，使用modernizr可以為你提供一些既有手段提供不了的功能：根據(jù)瀏覽器對新東西支持的差異動態(tài)修改的的類名。我會通過對我們的頁面添加2條新的規(guī)則

10、來說明這點：1. .borderradius #content   2.     border: 1px solid #141414;  3.     -webkit-border-radius: 12px;  4.     -moz-border-radius: 12px;  5.     border-radius:

11、0;12px;  6.  7. .boxshadow #content   8.     border: none;  9.     -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  10.     -moz-box-shadow: rgba(0,0,0, .5) 3p

12、x 3px 6px;  11.     box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  12.  第一條規(guī)則為“#content ”元素添加了一個12像素的圓角。但在既有的頁面里我們已經(jīng)為“#content ”元素設置了一個屬性值為“2px outset #666”的邊框，這在box是直角的時候是蠻好看的，但在圓角情況下就不是了。感謝modernizr，我可以在瀏覽器支持“border-radius”的情況下給box設置

13、一個1px的實邊。第二條規(guī)則更進步了一點，我們?yōu)椤?content ”元素添加了一個陰影，并且針對支持“box-shadow”屬性的瀏覽器一并移除了border屬性。為什么呢？因為大部分瀏覽器并不為“邊框附帶邊角”的組合外加陰影這樣的效果提供一個好的表現(xiàn)（這是一個應該被注意的瀏覽器的瑕疵，但我們現(xiàn)在卻必須忍受它）。同不使用陰影只使用邊框相比，我寧可只使用陰影包圍元素。采用這種方式，我可以擁有全世界最好的，準確點的，最好的一種css表現(xiàn)：在支持“box-shadow”屬性的瀏覽器里將會呈現(xiàn)一個美妙的陰影；只支持“border-radius”屬性的瀏覽器將會呈現(xiàn)一個好看的圓角薄邊框；對于那些這2者

14、都不支持的破爛瀏覽器，我們會看到一個2像素的直角邊框。下面我們要為header應用一個自定義的特殊字體，下面的是我們目前針對h1的聲明，沒改動版的：1. h1   2.     color: #e33a89;  3.     font: 27px/27px baskerville, palatino, "palatino linotype",  4.     

15、;"book antiqua", georgia, serif;  5.     margin: 0;  6.     text-shadow: #aaa 5px 5px 5px;  7.  這些聲明在我們的基礎網(wǎng)頁里工作良好，27像素的文字大小也很適合我們?yōu)閔1設置的那些字體的展示。但對于我要用的名叫“beautiful”的字體來說，27像素就太小了。下面我們要添加其他的規(guī)則

16、來使用這個自定義字體：1. font-face   2.     src: url(beautiful-es.ttf);  3.     font-family: "beautiful"  4.     5.  6. .fontface h1   7.     font: 42px/50px beautifu

17、l;  8.     text-shadow: none;  9.  首先，我們添加“font-face”聲明，并在其中為我們的自定義字體指定路徑、文件名和字體名。之后我們用一條css語句為我們的h1選擇字體樣式。你會看到，我這里選擇了一個很大的字號，那是因為“beautiful”字體本身就比其他字體的文字要小很多，所以我們必須要指示瀏覽器在展示我們自定義字體的時候，給予h1一個很大的字號。此外，我們漂亮的手寫體文字在文字陰影方面存在一些渲染問題，所以我們要在瀏覽器決定使用自定義文字時取消文字的陰影。另外，關于檢測

18、特征部分的列表還需要被分為兩欄。為了達到目的，我要使用牛叉的css columns 屬性，這一屬性會使瀏覽器把列表智能分欄而不會打亂它的順序，而我們的列表，雖然沒有數(shù)字序號，卻也是按照字母順序排列的。當然，不是所有的瀏覽器都支持這一屬性，對于那些不支持的瀏覽器，我們使用浮動來達到2欄的目的使用了浮動后列表在視覺上不會再按照字母順序排列，但那也好過什么都沒有。1. .csscolumns ol.features   2.     -moz-column-count: 2;  3.   &

19、#160; -webkit-columns: 2;  4.     -o-columns: 2;  5.     columns: 2;  6.       7.  8. .no-csscolumns ol.features   9.     float: left;  10.  

20、0;  margin: 0 0 20px;  11.       12.  13. .no-csscolumns ol.features li   14.     float: left;  15.     width: 180px;  16.  我又一次使用了modernizr來針對不同的情況設置不同的屬性

21、。如果瀏覽器支持css columns，它就會把列表完美的分為2欄，如果不支持，通過modernizr為添加的“no-csscolumns”類我們也可以用浮動的方式使得列表變?yōu)閮蓹?，雖然不那么完美，但也比直接來一個長串的單欄列表強。這里您可能注意到了我為屬性添加了不同的前綴（-moz-、-webkit-、-o-），這是因為不同的瀏覽器廠商對該功能的實現(xiàn)有不同的定義，所以要實現(xiàn)該功能需要針對不同的瀏覽器加上它們對應的前綴。經(jīng)過這些改變，我們新的頁面看起來更好了。我們將為我們的頁面添加進更多的漸進式增強效果來結束這篇教程。基于webkit的瀏覽器支持一些更牛叉的特效，如css變換、動畫和三維轉換等

22、。并且我想在最后一個階段的頁面中應用一些這類特效。再一次的，這些屬性會被添加進我們既有的css中并在不支持它們的瀏覽器中給忽視。所以，針對這種一方面是漸進增強一方面是不被支持的情況，使用modernizr是恰當?shù)?。首先設置的：1. -webkit-keyframes spin   2.       0%  -webkit-transform: rotatey(0);   3.     100%  -webkit-transform: rotatey(360deg);   4.     5.  6. .csstransforms3d.cssanimations section   7.     -webkit-perspective: 1000;  8.  keyf

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論