|
e. degrade gracefully
優(yōu)雅降級(jí)
HTML5中設(shè)計(jì)了這么些新玩意： input type="number"
input type="search“
input type="range"
input type="email"
input type="date"
input type="url"
很有趣, 但是瀏覽器不認(rèn)識(shí), 怎么辦呢?
最關(guān)鍵的問(wèn)題在于瀏覽器在看到這些新type值時(shí)會(huì)如何處理。現(xiàn)有的瀏覽器，不是將來(lái)的瀏覽器，現(xiàn)有的瀏覽器是無(wú)法理解這些新type值的。但在它們看到自己不理解的type值時(shí)，會(huì)將type的值解釋為text。
無(wú)論你寫(xiě)的是input type=”foo”還是input type=”bar”，現(xiàn)有的任何瀏覽器都會(huì)說(shuō)：“嗯，也許作者的意思是text�！币蚨銖默F(xiàn)在開(kāi)始就可以使用這些新值，而且你也可以放心，那些不理解它們的瀏覽器會(huì)把新值看成type=”text”，而這真是一個(gè)瀏覽器實(shí)踐平穩(wěn)退化原理的好例子。
比如說(shuō)，你現(xiàn)在輸入了type=”number”。假設(shè)你需要一個(gè)輸入數(shù)值的文本框。那么你可以把這個(gè)input的type屬性設(shè)置為number，然后理解它的瀏覽器就會(huì)呈現(xiàn)一個(gè)可愛(ài)的小控件，像帶小箭頭圖標(biāo)的微調(diào)控件之類(lèi)的。對(duì)吧？而在不理解它的瀏覽器中，你會(huì)看到一個(gè)文本框，一個(gè)你再熟悉不過(guò)的文本框。既然如此，為什么不能說(shuō)輸入type=”number”就會(huì)得到一個(gè)帶小箭頭圖標(biāo)的微調(diào)控件呢？
當(dāng)然，你還可以設(shè)置最小和最大值屬性，它們同樣可以平穩(wěn)退化。這是問(wèn)題的關(guān)鍵。
HTML5還為輸入元素增加了新的屬性，比如placeholder（占位符）。有人不知道這個(gè)屬性的用處嗎，沒(méi)有吧？沒(méi)錯(cuò)，就是用于在文本框中預(yù)先放一些文本。不對(duì)，不是標(biāo)簽（label）——占位符和標(biāo)簽完全不是一回事。占位符就是文本框可以接受的示例內(nèi)容，一般顏色是灰色的。只要你一點(diǎn)擊文本框，它就消失了。如果你把已經(jīng)輸入的內(nèi)容全部刪除，然后單擊了文本框外部，它又會(huì)出現(xiàn)。
使用JavaScript編寫(xiě)一些代碼當(dāng)然也可以實(shí)現(xiàn)這個(gè)功能，但HTML5只用一個(gè)placeholder屬性就幫我們解決了問(wèn)題。
當(dāng)然，對(duì)于不支持這個(gè)屬性的瀏覽器，你還是可以使用JavaScript來(lái)實(shí)現(xiàn)占位符功能。通過(guò)JavaScript來(lái)測(cè)試瀏覽器支不支持該屬性也非常簡(jiǎn)單。如果支持，后退一步，把路讓開(kāi)，樂(lè)享其成即可。如果不支持，可以再讓你的JavaScript來(lái)模擬這個(gè)功能。
再來(lái)看一個(gè)比較極端的優(yōu)雅降級(jí)方案: <video>
<source src="movie.mp4">
<source src="movie.ogv">
<source src="movie.webm">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
很NB吧…
f. Priority of constituencies
最終用戶優(yōu)先
事先聲明, 這是條很哲學(xué)的設(shè)計(jì)原則, 沒(méi)有代碼可以看.
它的意義就是: 一旦遇到?jīng)_突，最終用戶優(yōu)先，其次是作者，其次是實(shí)現(xiàn)者，其次標(biāo)準(zhǔn)制定者，最后才是理論上的完滿。
在有人建議了某個(gè)特性，而HTML5工作組為此爭(zhēng)論不下時(shí)，如果有瀏覽器廠商說(shuō)“我們不會(huì)支持這個(gè)特性，不會(huì)在我們的瀏覽器中實(shí)現(xiàn)這個(gè)特性”，那么這個(gè)特性就不會(huì)寫(xiě)進(jìn)規(guī)范。因?yàn)榧词故前烟匦詫?xiě)進(jìn)規(guī)范，如果沒(méi)有廠商實(shí)現(xiàn)，規(guī)范不過(guò)是一紙空文，對(duì)不對(duì)？實(shí)現(xiàn)者可以拒絕實(shí)現(xiàn)規(guī)范。
嗯, 要學(xué)會(huì)辯證的去看這些問(wèn)題, 別鉆牛角尖就好.
本文鏈接：http://m.95time.cn/tech/web/2011/8661.asp 
出處：Alibaba.com UED
責(zé)任編輯：bluehearts
上一頁(yè) HTML5設(shè)計(jì)原則 [5] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 6 頁(yè) HTML5設(shè)計(jì)原則 [6]
