主流瀏覽器對於CSS3與HTML5支持情況

CSS3與HTML5的推出，也讓各種瀏覽器的兼容性成了許多設計師關心的問題，本文以表格形式排列了目前主流瀏覽器對於CSS3與HTML5支持情況。

支持 CSS3 和 HTML5 的瀏覽器越來越多，甚至包括最新版的 IE，當然，所謂支持僅僅是部分支持，因為 CSS3 和 HTML5 的W3C 規範都尚未形成。如果你現在就希望使用 CSS3 和 HTML5 創建你的站點，至少要對各個瀏覽器對這兩種新技術的支持情況有一個全面了解。

需要指出的是，即使同一個瀏覽器的同一個版本，在 Mac 和 Windows 兩個平台，它們對 CSS3 和 HTML5 的支持也並不一致。本文是一份 Chrome， Safari， Firefox， Opera， IE 5 大瀏覽器，在 Mac 和 Windows 兩個平台，對 CSS3 和 HTML5 各種功能的詳細支持情況清單。

CSS3 屬性

可以看出，全盤支持 CSS3 屬性的瀏覽器有 Chrome 和 Safari，而且不管是 Mac 平台還是 Windows 平台全支持。

CSS3 選擇器

除了 IE 家族和 Firefox 3，其它幾乎全部支持。Chrome，Safari，Firefox 3.6，Opera 10.5 成績最好 。

HTML5 Web 應用

Safari 對 HTML5 Web 應用的支持最好，除了地理定位功能，其它都支持。

HTML5 網頁內嵌對象

這應該是 HTML5 最令人期待的東西，內置的畫布，視頻，音頻等對象。全部支持的有 Chrome，Safari，Firefox 3.6，Opera 10.5。IE家族則全軍覆沒。

HTML5 音頻編碼

Opera 10.5 支持的最全面，IE 家族又是顆粒無收。

HTML5 視頻編碼

H.264 任重道遠。

HTML5 各種表單對象

Mac 平台下的 Chrome 成績最佳。這些表單對象讓人想起了桌面程序。

HTML5 表單對象屬性與行為

又一次想到了桌面程序。

結論

目前，對 CSS3 和 HTML5 支持最好的是 Safari，Chrome 次之，Firefox 3.6 和 Opera 10.5 旗鼓相當，IE家族最差。鑒於這種情況，假如你想使用這兩項新技術創建一個先鋒體驗式站點，現在的 CSS3 和 HTML5 可以讓你實現，假如你希望這個站點能被絕大多數人正常訪問，現在還為時過早，折中的方案是，為不支持 CSS3 和 HTML5 某些功能的瀏覽器提供降級方案，當然，其中要涉及到很多問題，包括瀏覽器，版本，平台的探測，CSS Hack 等等大量工作，相信是得不償失的。

簡潔的語義化的HTML代碼編寫5個原則

1、刪除不必要的<div>標簽
2、使用具有語義的標簽
3、盡量減少使用的<div>標簽
4、使用縮進格式化代碼
5、對代碼注釋使用結束標記

結論：養成好的編碼習慣，盡量編寫簡潔的符合語義的代碼，會無形中提高搜索引擎對你網頁的可訪問性！當然對SEO會起到事半功倍的效果！

來源:網頁教學網

用戶體驗:各大網站紛紛將首頁變灰色

為表達全國人民對青海玉樹地震遇難同胞的深切哀悼，特在4月21日這一天舉行全國哀悼活動。這一天，每個人的心情都是沉重的。

各大網站紛紛將首頁變灰色表達對遇難同胞的哀思。我們的用戶也一樣，不希望在這一天看到哪個網站跟沒事似的還色彩鮮明。

問題一，如何將首頁變灰？

最常用的方式是使用濾鏡html { filterrogidXImageTransform.Microsoft.BasicImage(grayscale=1); }或html { FILTER: gray }
優點：一行代碼搞定，簡單、方便。
缺點：僅IE支持，Firefox無效，Safari也無效

問題二，門戶網站是如何做的？

新浪、網易、騰訊、搜狐將LOGO等圖片手動改為灰色。

2008年5月21日汶川地震，各大門戶使用的是同樣的方法。

優點：最笨”的方法，卻能讓所有瀏覽器顯示灰色。
缺點：工作量大，要考慮更多細節。

————
請根據用戶訪問量區分采用何種方法：
1、若用戶90以上都用IE，人力又不夠，建議用濾鏡做。少做無用功。有時間努力想想如何讓提高該網站的影響力吧。這才是重中之重。

2、若您所在的網站，用戶群的基數很大，比如網易每天有數以億計的訪客，那麼用火狐的也得有幾十萬，幾百萬吧。 那這個數字是不能容忍用濾鏡的。
————
省時省力的全兼容的素顏代碼暫時沒有！

因為：某些瀏覽器不支持，我們是按WEB標准寫代碼的。標准不支持，真的沒辦法。

解決方案：字體可用CSS控制，圖片少量的話就得手動改為灰色，量大建議寫個通用腳本吧。日後有需要的時候，可以拿來就用。

————
最後強調：用哪種解決方案，取決於二點要素：用戶訪問基數、網站實力。

為了讓用戶用的更舒服，建議大門戶好好弄弄你們的網站。不要得過且過。

以下是做的用戶體驗極佳的網站：（IE下都是正常的，沒有可比性，主要說IE以外的情況）
第一名：
騰訊：字體、圖片、廣告、FLASH均用灰色，主要位置制作專題，今日話題為：“4.14玉樹地震網上紀念館”。搜索欄放置一束菊花。愛心捐款為紅色等。  （主流瀏覽器均兼容）

點評：該體現的體現，該暗淡的暗淡，說出百姓心聲，考慮細節。

第二名：

搜狐：字體、圖片、廣告、FLASH均用灰色，主要位置制作5個大幅專題圖片入口位置，並特設了“點亮天路”。頁腳沒有色彩鮮明。（主流瀏覽器均兼容）

網易：字體、圖片、廣告、FLASH均用灰色，LOGO旁邊放了蠟燭，網站制作哀思專題。（主流瀏覽器均兼容）

點評：搜狐新浪真的很不錯。很用心的為用戶考慮。網易做的也很到位。我是非常喜歡網易的。

第三名：
淘寶：字體、圖片均為灰色。（火狐下體驗不好，FLASH廣告，圖片廣告均色彩鮮明，）

點評：其實淘寶可以做的更好的，我覺得。可能是淘寶是購物網站，不是新聞媒體的原因吧。

。

新浪：字體、圖片均為灰色。（火狐下體驗不好，FLASH廣告，圖片廣告均色彩鮮明，）

點評：互聯網從業人員，尤其是技術人員誰能不用火狐呢？我們也是需要看新聞的。新浪可以做的更好的。加油。
其他，人民網，新華網等國家級新聞門戶在火狐下依然色彩鮮明。無語。

期待：
期待在標准不支持的情況下，網站要顧及用戶感受，考慮細節中的用戶體驗。

期待火狐等知名瀏覽器，可以支持濾鏡。

用戶研究:用戶是如何瀏覽你的網站的

事實上，互聯網用戶瀏覽網頁的習慣和顧客瀏覽商店中物品的習慣沒有多大差別。用戶打開一個新的頁面，掃視一些文字，並點擊第一個引起他興趣的鏈接。在這過程中，頁面上有大量的區域用戶甚至完全沒有看過。大部分用戶在頁面上尋找他感興趣且可點擊的內容，一旦發現目標，點擊行為就會發生，但如果頁面不符合期望，後退或關閉按鈕也將馬上被點擊。

用戶是如何瀏覽你的網站的

1. 大部分時候用戶並非在閱讀屏幕上的內容，而是在掃視。

用戶習慣掃視和快速尋找頁面上一些能夠引導他理解內容的關鍵點。

2. 不要考驗用戶的耐心

當一個頁面不能滿足用戶的期望時，離開就在所難免。希望通過添加相關內容來豐富頁面和留住用戶往往效果不佳甚至適得其反。一屏頁面上承載的信息越多，認知的負擔就會越重，就需要花費更多的時間去處理信息，如果這些信息中還有些不是用戶期望的，那就還要花額外的精力將這些多於信息從注意力中剝離。Jakbo Nielsen 的研究結論也表明：一個頁面上的認識負擔越重，導航和瀏覽就會越困難，用戶離開並尋找其他替代品的可能性就越大。

3. 用戶並不做最佳選擇

用戶並不是在搜尋找到最佳選項的最快途徑，他們也並非用線性的方式來閱讀屏幕上的內容（有順序地從一個模塊到另一個模塊）。當用戶找到第一個合理的選項，或者一旦找到了可能的目標內容，立即點擊的可能性會非常大。其實，用戶是在尋找能讓他們覺得夠用或者合適的內容，而非尋找最佳的選擇，理由也很直觀，讓用戶自己去做最佳選擇需要花費不少時間和精力，那已經在考驗用戶的耐心了（選擇即成本）。

來自eyetools 的圖片，可以看出用戶瀏覽時的關注點和非線性的瀏覽軌跡。

Jakbo Nielsen的F形瀏覽熱區

Jakbo Nielsen曾對232位用戶瀏覽幾千個頁面的過程中的眼動情況進行追蹤，發現用戶在不同站點上的瀏覽行為有明顯的一致性，將瀏覽熱點可視化後呈現出類似F形的圖案。這種瀏覽行為有三個特征：

1. 用戶首先會在內容區的上部進行橫向瀏覽。

2. 用戶視線下移一段距離後在小範圍內再次橫向瀏覽。

3. 最後用戶會在內容區的左側做快速的縱向瀏覽。

PS.顯然，用戶的瀏覽行為並非精確的包含這個三個過程，有時候，在這三個過程之後，還會在底部有橫向瀏覽的熱點，使得整個瀏覽熱區圖看上去更像E而不是F。也有時候，用戶瀏覽時只反應了上述的行為1和行為3，使得瀏覽熱區圖像一個倒寫的L。但從所有數據整體上來看，用戶的屏幕瀏覽熱區圖還是較一致地反應出了F圖像。

如何運用F形閱讀行為進行設計：

1. 用戶並不會瀏覽頁面上的所有內容（F形之外的大片空白區）

2. 將最重要的信息放在頭兩段（F熱區中的兩個橫向熱區）

3. 在後續的內容中，將關鍵詞和信息放在段首，使用戶在左側縱向瀏覽時能更容易關注到。

總結和啟示

1. 用戶習慣掃視，而不是閱讀

2. 用戶並不會關注到頁面上的所有內容

3. 不要考驗用戶的耐心，不要增加用戶的認知負擔

4. 用戶並不做最佳選擇

5. 用戶在屏幕上的瀏覽熱區整體上符合“F形”

6. 針對F形瀏覽行為，將最重要的信息放在上部，將相關的關鍵內容和信息放在內容區左側。

25個最佳的非盈利組織網站設計

Sower of Seeds

Urban Roots

A Word from His Word

The Seed Company

Wide Awake

Park Angels

Leeds Universities Catholic Chaplaincy

Yellow Bird Project

Villa Hope

Hope Unlimited

R.U. 4 Children

Revive Africa

Family Life

One

To Write Love On Her Arms

The Gospel Coalition

Harvest

Invisible Children

The Designers Accord

Red Nose Day

Tufts University Alumni Association

Kanye West Foundation

The Bill & Melinda Gates Foundation

Next American City

The Painted Door

極簡網頁視覺設計技巧:越簡單越豐富 part.5/5

頁面變得蒼白？是不是整版的文字缺少圖片的點綴？在保留有必要的留白空間後，試着為文字配上一張點睛的美圖吧，或者給段落文字總結一個示意小圖標，適當的點綴必不可少。

http://Pc.qq.com

透氣的留白不等於無力的蒼白，讓有趣的設計大膽的去激發用戶的視覺神經，讓設計更有思想，不斷趨向簡潔和完美。

http://www.devia.be/

感謝您的閱讀，希望對您有所幫助 ^_^

來源:cdc.tencent

天海設計 - SkySea-Design Site: http://www.skysea.megabyet.net/

極簡網頁視覺設計技巧:越簡單越豐富 part.4/5

設計的加減法哲學
從第一個像素開始，我們開始不斷用加法進行創造，搭建出完美的設計作品，然而這就是極致麼？在設計適時運用放大或減少，不斷地變化，可以更好的趨向極簡，反複歷練考究每一個必要的元素存在的價值。

http://pc.qq.com/

每當到達這個階段，設計師需要靜下心來思考，當加法到一定的量的時候再轉做減法設計，考驗的是設計師對整體把握能力。減法設計是在加法比較成熟的情況下才能去嘗試的設計方式。理論上來說，加法設計比減法設計相對更加容易。減法設計更能體現設計師的功力和積累，目標要求的是少而精煉。

http://www.31three.com/

鼓起勇氣大膽的去除邊框，讓畫面更加通透大氣，空間視覺元素不多不少，但又顯得很豐富、美觀。
這個加減的過程正是讓設計不斷趨向完美的歷練之路。

讓空間更加透氣
通過去除與隱藏的方式降低設計複雜性的方法中，減少“視覺感知”的複雜性也是很重要的。空白與對比無疑成為行之有效的減少視覺幹擾的重要方法。
視覺布局中適當的空白對平衡即將出現在頁面中的少量元素是必要的平衡。它應是你默認的布局工具。經典法則之一：如果可以使用空白就不要放置其他設計元素。如果用這種方式布局，你會很驚訝調整界面的空白就可以完成布局了。

http://www.kylestanding.com/

雖然使用空白多多益善，但也要盡可能的保證有對比感。設計師應使用最小的視覺變化來表達想法。事實上這就是意味着元素之間要有主次感。

來源:cdc.tencent

天海設計 - SkySea-Design Site: http://www.skysea.megabyet.net/

極簡網頁視覺設計技巧:越簡單越豐富 part.3/5

白色頁面設計小技巧：
讓鏈接更容易識別, 使用淺色或亮色；
減少雜亂廣告圖片； 不要使用過小的字體，
避免頁面看起來瑣碎和疲勞；

http://www.flickr.com

明快的文字顏色，讓內容更易識別

http://www.sixapart.com/

精致高雅的灰色紳士
“灰質(Gray matter)”讓人聯想到智商與腦力。它不像黑色那麼鮮明，又不像純白那樣蒼白，灰色是黑與白的過度，是完美的補色。灰色可以和任何色彩搭配，由於它的中立性，它常常被用作背景顏色，可以讓其它色彩突出。使用淺灰色替代白色或者用暗灰色替代黑色，能夠賦予網頁與眾不同的高雅之感。

http://www.apple.com

http://www.dbushell.com/

灰色無論是作為背景顏色還是標題或者主字體顏色都很流行。灰色也是極簡主義網站設計的首選色彩，這類網站通常會選用淺灰色作為背景色彩，然後選用深灰色作為主要的字體顏色。這裡是一些使用灰色的幾個很不錯的網站設計。

http://www.iconwerk.de/

http://2008.dconstruct.org/

來源:cdc.tencent

天海設計 - SkySea-Design Site: http://www.skysea.megabyet.net/

極簡網頁視覺設計技巧:越簡單越豐富 part.2/5

http://labs.qq.com/

這裡的關鍵並非讓網站有較少的功能，而是去掉不是必要的元素或將多個部分整合到一個更簡單的布局。你也可以分割內容到獨立的頁面，給予內容的每個部分更多關注。

http://www.areyoufrank.com/

善用色彩的心裡暗示

簡約而通透的白色頁面
白色，因其明度最高，無色相，明亮幹淨、暢快、樸素，永恒無暇，在自然界象征着極致的純淨與貞潔。白色優雅、平和而簡單，沒有強烈的個性，因而網站設計中，白色具有高級，科技的意象，是永遠流行的主色調。
輕快的白色可以給人很好的輕快速度感，運用得當可以讓其它任何淺顏色及亮顏色呈現出其深度、明度和飽和度的不同，通過對比讓其亮色更加明快、專注和舒適。整潔、大空白的同時讓用戶保持歡快的情感進行瀏覽。

下面的網站展示了如果使用白色來呈現內容和一個網站自身的潛力：

http://www.istockphoto.com/index.php

天海設計 - SkySea-Design Site: http://www.skysea.megabyet.net/