別怕！我們還有HTML 5和CSS3
HTML5和CSS3熱潮正橫掃網(wǎng)絡(luò)，從事互聯(lián)網(wǎng)行業(yè)，特別是前端工作者，大家或多或少都有了解、學(xué)習(xí)和使用，HTML5和CSS3包含豐富的技術(shù)內(nèi)容，在每周的技術(shù)分享交流會(huì)中，頁(yè)面構(gòu)建工程師Sunshine珍兒同學(xué)，從三個(gè)特別的角度出發(fā)，配合豐富的實(shí)例，概括了HTML5與CSS3對(duì)頁(yè)面工作帶來(lái)的息息相關(guān)的變化和精彩。
一、我們擔(dān)心苦惱的那么事兒
1.1、對(duì)于頁(yè)面構(gòu)建者來(lái)說(shuō)：
表現(xiàn)層會(huì)遇到一些難題，欣賞絢麗的UI設(shè)計(jì)稿的同時(shí)，也在苦惱怎樣用現(xiàn)用的技術(shù)力量去實(shí)現(xiàn)圓角，陰影，高光，漸變，透明等各種表現(xiàn)效果。為了精準(zhǔn)UI還原度，我們會(huì)不惜花費(fèi)更多字節(jié)數(shù)切大圖或者添加一些多余的空標(biāo)簽。
結(jié)構(gòu)層同樣也會(huì)遇到麻煩。首先看頁(yè)面首行代碼doctype，包含了，冗長(zhǎng)而復(fù)雜，從事多年開(kāi)發(fā)的你能記住這段話(huà)嗎？
接著看滿(mǎn)屏幾乎都是毫無(wú)語(yǔ)義的div標(biāo)簽，為了實(shí)現(xiàn)復(fù)雜的設(shè)計(jì)效果，我們不得不使用多個(gè)層級(jí)嵌套，造成代碼冗余。
再看看頁(yè)面中一些交互動(dòng)畫(huà)效果，基本都是JavaScript和Flash開(kāi)發(fā)人員所實(shí)現(xiàn)，頁(yè)面構(gòu)建在現(xiàn)有技術(shù)上只能有心而無(wú)力。
1.2、對(duì)于js開(kāi)發(fā)人員來(lái)說(shuō)：
一個(gè)簡(jiǎn)單的交互效果，一個(gè)又一個(gè)表單驗(yàn)證，需要使用一大段JavaScript代碼去實(shí)現(xiàn)，為了兼容各個(gè)瀏覽器，不得不多寫(xiě)數(shù)行代碼。
1.3、對(duì)于Flash開(kāi)發(fā)人員來(lái)說(shuō)：
Flash開(kāi)發(fā)人員擔(dān)心的是用戶(hù)沒(méi)有安裝必要的插件，擔(dān)心插件被禁用或者屏蔽，像現(xiàn)在apple的ipad就已經(jīng)不支持flash插件了。
以上的擔(dān)心與苦惱你曾有過(guò)嗎？如果有，別怕，HTML5和CSS3來(lái)了，已經(jīng)來(lái)了！
二、我們開(kāi)心盼來(lái)的那么事兒
HTML5和CSS3的到來(lái)，讓我們網(wǎng)頁(yè)開(kāi)發(fā)者可以做的更多，更好！
CSS3帶來(lái)了圓角，半透明，陰影，漸變，多背景圖等新的特征，輕松實(shí)現(xiàn)了設(shè)計(jì)稿中常見(jiàn)的圖層樣式，用簡(jiǎn)潔的代碼替代圖片，代替了多余的空標(biāo)簽。CSS3帶來(lái)的媒體查詢(xún)可以為不同的顯示設(shè)備定義相匹配的樣式，靈活實(shí)現(xiàn)了智能的流體布局，CSS3還為我們帶來(lái)了強(qiáng)大的選擇器以及變形動(dòng)畫(huà)。下面讓我們一起來(lái)看 看實(shí)際工作中的具體應(yīng)用吧：
實(shí)例一
類(lèi)似實(shí)例一的設(shè)計(jì)稿，我們常見(jiàn)的做法是在無(wú)序列表li里為不同小圖標(biāo)識(shí)寫(xiě)上不同的class類(lèi)名，或者單獨(dú)為每個(gè)小圖標(biāo)寫(xiě)上空標(biāo)簽定義樣式，這樣帶來(lái)的問(wèn)題之一是HTML結(jié)構(gòu)不干凈簡(jiǎn)潔，二是使后續(xù)的開(kāi)發(fā)工程師多了一層判斷。
而利用CSS3強(qiáng)大的選擇器就能輕松解決這個(gè)問(wèn)題，E[foo^=”bar”]表示的是選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值包含前綴為 bar的子字符串.
以下是片段代碼。
CSS3包含了很多新的屬性特征，動(dòng)畫(huà)效果尤為受大家喜愛(ài)。實(shí)例二是為這次分享做的一個(gè)學(xué)習(xí)轉(zhuǎn)動(dòng)盤(pán)。用JavaScript和CSS3去控制轉(zhuǎn)盤(pán)的指針轉(zhuǎn)動(dòng)效果。
實(shí)例二
該實(shí)例重點(diǎn)在于animation-play-state屬性，paused表示的是暫停。
Animation屬性包含了動(dòng)畫(huà)名稱(chēng)Animation-name， 動(dòng)畫(huà)時(shí)間Animation-duration， 動(dòng)畫(huà)播放方式Animation-timing-function，動(dòng)畫(huà)開(kāi)始播放時(shí)間Animation-delay，動(dòng)畫(huà)播放次數(shù)Animation- iteration-count，動(dòng)畫(huà)播放方向Animation-direction等等。
領(lǐng)閱了CSS3帶來(lái)的價(jià)值，那么HTML5給我們帶來(lái)了哪些盼來(lái)的事兒呢？
HTML5的口號(hào)是簡(jiǎn)單至上，盡可能地簡(jiǎn)化：簡(jiǎn)化了doctype，如；簡(jiǎn)化了字符集聲明；新增了更多語(yǔ)義化標(biāo)記header、footer、 section、article、aside、nav；新增了很多標(biāo)識(shí)元素如canvas、audio、video，配合簡(jiǎn)單而又強(qiáng)大的HTML***PI，讓瀏覽器發(fā)揮它原生的能力，來(lái)替代復(fù)雜的javascript代碼。
實(shí)例三
實(shí)例三是用Canvas畫(huà)的一個(gè)weibo logo圖標(biāo)。這里用到了兩個(gè)知識(shí)重點(diǎn)：
其一，context.lineCap=[value]，線(xiàn)帽風(fēng)格有三種：對(duì)接（butt）默認(rèn)值，圓形（round）方形（square）；
其二，arc(x, y, radius,startAngle, endAngle, anticlockwise)， x,y指定繪制的圓弧的圓心下xy軸坐標(biāo)，radius是圓的半徑，startAngle和endAngle指定了起始弧和結(jié)束 弧，anticlockwise指定是否使用逆時(shí)針?lè)较蚶L圖，逆時(shí)針?lè)较颍═RUE），順時(shí)針?lè)较颍‵ALSE）。
實(shí)例四
實(shí)例四是用Audio標(biāo)簽做的一個(gè)音樂(lè)播放器，用HTML***PI提供的屬性去控制該控件的播放play()，暫停pause()，進(jìn)度條，當(dāng)前時(shí)間currentTime，音量volume，歌曲選擇且封面和曲名相應(yīng)變化等效果。
介紹Audio標(biāo)簽常用的幾個(gè)可腳本控制的特性：
Autoplay：控制音頻在就緒后自動(dòng)播放，或者查詢(xún)是否已設(shè)置為autoplay。
Controls：向用戶(hù)顯示或隱藏默認(rèn)控件界面，比如播放按鈕。
loop：用來(lái)設(shè)置媒體文件是否循環(huán)播放。
currenTime：返回從開(kāi)始播放到現(xiàn)在所用的時(shí)間（以S為單位）。
Muted：設(shè)置靜音或者消除靜音。
更多關(guān)于A(yíng)udio的技術(shù)講解，您可以參考我愛(ài)貓貓技術(shù)博客的另外一篇文章《HTML5提供的音頻播放標(biāo)準(zhǔn) 》。
實(shí)例五
實(shí)例五是演示強(qiáng)大的表單，它的強(qiáng)大不僅體現(xiàn)在更多的type類(lèi)型tel,email,url,search,range,number,color,datetime等更強(qiáng)的體現(xiàn)在它對(duì)應(yīng)的HTML5 forms API。
講三個(gè)工作中常見(jiàn)的交互效果所用到的特性：
1、autofocus指定某個(gè)表單元素自動(dòng)獲得焦點(diǎn)，但需要注意每個(gè)頁(yè)面僅只允許一個(gè)autofocus特性。
2、placeholder 表單輸入型控件的默認(rèn)文案，當(dāng)獲得焦點(diǎn)或者輸入值時(shí)，默認(rèn)文案自動(dòng)消失。
3、list特性和datalist元素，使用該組合，可以實(shí)現(xiàn)常見(jiàn)的聯(lián)想輸入浮層。
三、我們正滿(mǎn)懷期待的那些事兒
理想總是美好的，然而不管是瀏覽器的歷史遺留問(wèn)題，還是互聯(lián)網(wǎng)用戶(hù)的習(xí)慣，都或多或少的限制著HTML5和CSS3的推廣，我們期待規(guī)范制定者們能夠盡快推出統(tǒng)一的標(biāo)準(zhǔn)，各個(gè)瀏覽器廠(chǎng)商能夠更好更多地支持新特性。
期待我們不再為了兼容各種瀏覽器，而寫(xiě)上大量的私有特性，不再因?yàn)槟承g覽器的限制，而采取不必要的冗余措施。
期待更多的互聯(lián)網(wǎng)使用者盡快和老頑固IE6說(shuō)拜拜。
期待在實(shí)際工作中讓我們參與更多，做的更多。
因?yàn)橛蠬TML5和CSS3，一切不用擔(dān)心。
原文鏈接：http://www.52maomao.info/html5-and-css3.html
【編輯推薦】
