(建筑工程設(shè)計(jì))前端工程師設(shè)計(jì)開發(fā)M的應(yīng)用出口_第1頁
(建筑工程設(shè)計(jì))前端工程師設(shè)計(jì)開發(fā)M的應(yīng)用出口_第2頁
(建筑工程設(shè)計(jì))前端工程師設(shè)計(jì)開發(fā)M的應(yīng)用出口_第3頁
(建筑工程設(shè)計(jì))前端工程師設(shè)計(jì)開發(fā)M的應(yīng)用出口_第4頁
(建筑工程設(shè)計(jì))前端工程師設(shè)計(jì)開發(fā)M的應(yīng)用出口_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

Modernizr是一個開源的JS庫，它使得那些基于訪客瀏覽器的不同(指對新標(biāo)準(zhǔn)支持性的差異)而開發(fā)不AD：所以這些人在堅(jiān)持WEB標(biāo)準(zhǔn)化的同時，也不得不采用hacks來使得他們的頁面在所有瀏覽器中都能正常顯示。其中一個被使用的越來越多的hack技術(shù)是瀏覽器嗅探(browsersniffing)，使用Javascript里的navigator.userAgent屬性來判斷用戶使用的是什么品牌哪個版本的瀏覽器。瀏覽器嗅探技術(shù)可以快捷的將代碼進(jìn)行分支，以便針對不同的瀏覽器應(yīng)用不同的指令。b圈又回到了原地——各個瀏覽器對這些新技術(shù)的支持又開始變得參差不齊了。我們早都習(xí)慣了書寫整潔的符合標(biāo)準(zhǔn)的代碼，也不會再使用CSShacks或者瀏覽器嗅探這些不靠譜又低級的技術(shù)。我們也相信越來越多的用戶會認(rèn)同網(wǎng)站不必在所有瀏覽器里都看起來一樣的理念。那面對當(dāng)下這個熟悉的情形(瀏覽器支持的不同)，我們該怎么做呢？簡單：使用特征檢測(featuredetection)，這意味著我們不必通過問瀏覽器“你是誰？”來做出不靠譜的推測。取而代之，我們問瀏覽器“你能做這個或那個嗎”。這么來檢測瀏覽器的能力是很簡便的，但一個個的花時間去手工測試依然令人厭煩。此時Modernizr可以幫助我們。Modernizr是一個開源的JS庫，它使得那些基于訪客瀏覽器的不同(指對新標(biāo)準(zhǔn)支持性的差異)而開發(fā)不同級別體驗(yàn)的設(shè)計(jì)師MLCSSHTMLCSS會犧牲其他不支持這些新技術(shù)的瀏覽器的控制。當(dāng)你在網(wǎng)頁中嵌入Modernizr的腳本時，它會檢測當(dāng)前瀏覽器是否支持CSS3的特性，比如@font-face、border-radius、borderimageboxshadowrgba)等，同時也會檢測是否支持HTML5的特性——比如audio、video、本地儲存、和新的性等。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們，的空閑地基開始，一個接一個的添加增強(qiáng)的應(yīng)用層。因?yàn)槭褂昧薓odernizr，所以你容易知道瀏覽器都支持什么。下面我們來看首先從下載Modernizr的最新的穩(wěn)定版(目前國內(nèi)封了Modernizr的官網(wǎng)，我們可以從github上下載?；蛘吒唵吸c(diǎn)，可以從堂主這里下載最新的1.7版的腳本文件)，在官網(wǎng)上你還可以看到它支持檢測的所有特性的清單(本文末把它加入頁面的區(qū)域：1.>2.<html>3.<head>4.<metacharset="utf-8">5.<title>MyBeautifulSamplePage</<span>title>6.<scriptsrc="modernizr-1.5.min.js"></<span>script>7.</<span>head>8.…o你的元素可能會變得看起來像下面這個樣子：Modernizr同時還會創(chuàng)建一個JS對象，被命名為“Modernizr”，其內(nèi)容是為每一個檢測完的特性給出的布爾值結(jié)果組成的列表。如果瀏覽器支持新的canvas元素，那么“Modernizr.canvas”的值就是true；如果瀏覽器不支持這個新元素，那它對應(yīng)的值就是false。這個JS對象針對某些功能還會包含更為詳細(xì)的信息，如“Modernizr.video.h264”會告訴你瀏覽器是否支持“Modernizr.inputtypes.search”會告訴你當(dāng)前瀏覽器是否支持新的searchinput類型，等等。我們的未加工的簡單小頁面看起來有點(diǎn)像一個準(zhǔn)測試系統(tǒng)了，但它具備更好的語義性和可訪問性。讓我們?yōu)樗砑右稽c(diǎn)基本的看看添加了樣式后的頁面。下面，我們要增強(qiáng)這個頁面使得它更有意思。我想為頭部的h1應(yīng)用一個奇特的文字效果，把關(guān)于檢測特性的列表分為兩欄，然后將帶有一張照片的關(guān)于Modernizr的部分的一切都弄到右邊去。我還要把圍繞頁面內(nèi)容的邊框變美點(diǎn)?，F(xiàn)在，更給力的CSS3使你可以對一條規(guī)則添加更多的屬性，如果瀏覽器不支持這些屬性，它會忽略它們。配合使用CSS的層疊(繼承)，你可以不能：根據(jù)瀏覽器對新東西支持的差異動態(tài)修改的的類名。我會通過對我們的頁面添加2條新的規(guī)則來說明這點(diǎn)：1..borderradius#content{2.border:1pxsolid#141414;3.-webkit-border-radius:12px;4.-moz-border-radius:12px;5.border-radius:12px;6.}7..boxshadow#content{8.border:none;9.-webkit-box-shadow:rgba(0,0,0,.5)3px3px6px;10.-moz-box-shadow:rgba(0,0,0,.5)3px3px6px;11.box-shadow:rgba(0,0,0,.5)3px3px6px;12.}第一條規(guī)則為“#content”元素添加了一個12像素的圓角。但在既有的頁面里我們已經(jīng)為“#content”元素設(shè)置了一個屬性值為“2pxoutset#666”的邊框，這在box是直角的時候是蠻好看的，但在圓角情況下就不是了。感謝Modernizr，我可以在瀏覽器支持“border-radius”的情況下給box設(shè)置一個1px的實(shí)邊。第二條規(guī)則更進(jìn)步了一點(diǎn)，我們?yōu)椤?content”元素添加了一個陰影，并且針對支持“box-shadow”屬性的瀏覽器一并移除了border屬性。為什么呢？因?yàn)榇蟛糠譃g覽器并不為“邊框附帶邊角”的組合外加陰影這樣的效果提供一個好的表現(xiàn)(這是一個應(yīng)該被注意的瀏覽器的瑕疵，但我們現(xiàn)在卻必須忍受它)。同不使用陰影只使用邊框相比，我寧可只使用陰影包圍元素。采用這種方式，我可以擁有全世界最好的，準(zhǔn)確點(diǎn)的，最好的一種CSS表現(xiàn)：在支持“box-shadow”屬性的瀏覽器里將會呈現(xiàn)一個下面我們要為header應(yīng)用一個自定義的特殊字體，下面的是我們目前針對h1的聲明，沒改動版的：1.h1{2.color:#e33a89;3.font:27px/27pxBaskerville,Palatino,"PalatinoLinotype",4."BookAntiqua",Georgia,serif;5.margin:0;6.text-shadow:#aaa5px5px5px;7.}這些聲明在我們的基礎(chǔ)網(wǎng)頁里工作良好，27像素的文字大小也很適合我們?yōu)閔1設(shè)置的那些字體的展示。但對于我要用的名叫“Beautiful”的字體來說，27像素就太小了。下面我們要添加其他的規(guī)則來使用這個自定義字體：11.@font-face{2.src:url(Beautiful-ES.ttf);3.font-family:"Beautiful";4.}5.6..fontfaceh1{7.font:42px/50pxBeautiful;8.text-shadow:none;9.}首先，我們添加“@font-face”聲明，并在其中為我們的自定義字體指定路徑、文件名和字體名。之后我們用一條CSS語句為我們的h1選擇字體樣式。你會看到，我這里選擇了一個很大的字號，那是因?yàn)椤癇eautiful”字體本身就比其他字體的文字要小很多，所以我們必須要指示瀏覽器在展示我們自定義字體的時候，給予h1一個很大的字號。寫體文字在文字陰影方面存在一些渲染問題，所以我們要在瀏覽器決定使用自定義文字時取消文字的陰影。另外，關(guān)于檢測特征部分的列表還需要被分為兩欄。為了達(dá)到目的，我要使用牛叉的CSScolumns屬性，這一屬性會使瀏覽器它的順序，而我們的列表，雖然沒有數(shù)字序號，卻也是按照字母順序排列的。當(dāng)然，不是所有的瀏覽器都支持這一屬性，對于那些不支持的瀏覽器，我們使用浮動來達(dá)到2欄的目的——使用了浮動后列表在視覺上不會再按照有。1..csscolumnsol.features{2.-moz-column-count:2;3.-webkit-columns:2;4.-o-columns:2;5.columns:2;6.}7.8..no-csscolumnsol.features{9.float:left;10.margin:0020px;11.}12.13..no-csscolumnsol.featuresli{14.float:left;15.width:180px;16.}Modernizr器支持CSScolumns，它就會把列表完美的分為2欄，也比直接來一個長串的單欄列表強(qiáng)。這里您可能注意到了我為屬性添加了不同的前綴(-moz-、-webkit-、-o-)，這是因?yàn)椴煌臑g覽器廠商對該功能的實(shí)現(xiàn)有不同的定義，所以要實(shí)現(xiàn)該功能需要針對不同的瀏覽器加上它們對應(yīng)的前綴。經(jīng)過這些改變，我們新的頁面看起來更好了。面添加進(jìn)更多的漸進(jìn)式增強(qiáng)效果來結(jié)束這篇教程?；赪ebKit的瀏覽器支持一些更牛叉的特效，如CSS變換、動畫和三維轉(zhuǎn)換等。并且我想在最后一個階段的頁面中應(yīng)用一些這類特效。再一次的，這些屬性會被添加進(jìn)我們既有的CSS中并在不支持它們的瀏覽器中給忽視。所以，針對這種一方面是漸進(jìn)增強(qiáng)一方面是不被支持的情況，使用Modernizr是恰當(dāng)?shù)?。首先設(shè)置的：1.@-webkit-keyframesspin{2.2.0%{-webkit-transform:rotateY(0);}3.100%{-webkit-transform:rotateY(360deg);}4.}5.6..csstransforms3d.cssanimationssection{7.-webkit-perspective:1000;8.}@keyframes規(guī)則是新的CSSanimations規(guī)范中的一部分，目前只有WebKit支持。它容許你針對任何屬性聲明一個完整的動畫路徑，并在你喜歡的任何階段改變它們。想知道關(guān)于animations的更多知識，請閱讀W3CWorkingDraftspecification。下面我們添加使得我們一個元素在三維空間里旋轉(zhuǎn)的代碼：1..csstransforms3d.cssanimationssectionh2{2.background-image:url(modernizr-logo.png);3.overflow:hidden;4.-webkit-animation:spin2slin

溫馨提示

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

最新文檔

評論

0/150

提交評論