placehoder
這個值可以簡單地指定一段文本,你經常在網上看到的效果,沒值的時候顯示此文本,單擊的時候值變成空,離開又恢復成該文本,以前要用到Javascript處理,現在浏覽器會為你做這個事情了。
- <input type="email" placeholder="Your email address">
有哪些Html5特性你馬上就可以使用?
不是所有的Html5元素都已經准備好可以使用了,因為種種原因(這些原因是沒有一個縮寫為 IE 的),浏覽器支持馬上就要來了,在不遠的未來,你馬上就有兩個元素可以使用了。
魔幻字體,每個設計師都有一個夢想,希望站點的訪問者們都安裝了他們在設計時所需要的字體,為此,以前可謂手段 百出,用圖片,Flash等等不一而足,現在,他們擁有了這個權利,你可以強制你的訪問者安裝你指定的字體了。這就是CSS3的支持: @font-face屬性。Firefox 3.5以前的版本和Safari的移動版本(iOS 4之前)不支持這個屬性,如果你的站點有很多這樣類似的訪問,那麼你可能就得等等了。
無論如何,其實沒有真正的理由,讓所有的浏覽器都使用同一種字體的。如果你想提供給那些支持此屬性的浏覽器以自定義字體,然後讓不支持此屬性的浏覽器有一個可替代的字體也是一個不錯的解決方案,這個時候,Font Squirrel’s @font-face 生成器 是個不錯的去處。
陰影和圓角,讓很多設計師高興的東西來了,文本陰影、區塊陰影,區塊圓角特性等現在都CSS3支持的標准了。再說一次,如果你不想用像素級別的完美來衡量在不同浏覽器中的渲染的話,那麼你現在就可以開始使用這些特性了。CSS3 生成器 會幫助你做好這事。
圓角 (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+)
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
文本陰影 (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+)
- text-shadow: 5px 5px 3px #CCC;
區塊陰影(Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):
- -webkit-box-shadow: 10px 10px 5px #666;
- -moz-box-shadow: 10px 10px 5px #666;
- box-shadow: 10px 10px 5px #666;
哪些特性有一天你會用到?
這個目錄裡包含了開發人員和設計師已經想了很多年的特性。可惜的是,在它們能夠在現實世界真正使用之前,可能還得再等上幾年時間。智能表單,前面已經提到過了,但是其實還有很多更好用的元素沒有提及,但在更廣泛的支持之前,是沒有辦法使用的。
滑動選擇器:
- <input type="range" min="0" max="100" step="2" value="50">
顏色選擇器:
- <input type="color">
日期選擇器:
- <input type="date">
帶有正則驗證的輸入框:
- <input type="text" pattern="[0-9]{13,16}">
必須輸入的輸入框:
- <input type="text" required>