1.1可用性其次
? ? ? 當(dāng)用戶訪問你網(wǎng)站中的內(nèi)容和服務(wù)的時候，他們能理解并且找到他們想要的信息嗎？
這是個簡單甚至顯而易見的要求，但是我已經(jīng)記不清有多少次，當(dāng)我訪問一家公司的網(wǎng)站
時，絞盡腦汁嘗試去找聯(lián)系信息、開放時間和地點。結(jié)果只找到大量沒用的市場營銷信
息、無聊的視頻和其他展示的宣傳。?
? ? ? 為什么人們不多思考：對于瀏覽他們網(wǎng)站的用戶來說，什么信息是最有用的，然后如
何展現(xiàn)這些信息才能讓用戶更容易消化吸收？一個簡潔、書寫良好和明確提供的副本遠比
堆砌浮華、夸張和專業(yè)性的知識來得更有效。
我的“可用性”觀點（和許多其他人一樣）是“別讓我思考”，不要讓你的用戶思考
如何獲得他們想要的東西。如果你還沒有讀過Steve Krug的《Don’t Make Me Think》一
書：一種網(wǎng)絡(luò)可用性的常識教學(xué)法，那么第2版是必不可少的讀物。
1.2優(yōu)雅降級和漸進增強
? ? ? 優(yōu)雅降級和漸進增強這兩個術(shù)語最開始流行（或至少值得關(guān)注）于大約十年前。兩者
都是用來解決當(dāng)瀏覽器不支持構(gòu)建內(nèi)容所需的所有特性時，內(nèi)容如何去表現(xiàn)的問題。
? ? ?優(yōu)雅降級指的是簡化網(wǎng)站內(nèi)容的一些特效但仍能完美地保證其可訪問性和可用性。舉
例來說，如果創(chuàng)建一個內(nèi)容盒子，然后你賦予大量炫目的CSS3樣式，同時確保舊版瀏覽器
仍然能以一種可讀的形式顯示文本，即便它看起來不美觀。
? ? ?漸進增強指的是首先保證內(nèi)容可被所有瀏覽器訪問，在這個基礎(chǔ)上為那些高級瀏覽器
添加對可用性和樣式增強的支持。
? ? ?這兩個是我一直喜歡的設(shè)計理念。但很多時候這兩個理念并沒有得到堅持，因為你經(jīng)常會
碰到那種“癡迷于所有瀏覽器的像素完美”或者一些類似的荒誕追求的客戶。不過，我堅信這
兩個理念肯定會再次變得出色，尤其是在許多移動設(shè)備和其他備用瀏覽設(shè)備中使用所有CSS3特
性來渲染內(nèi)容。同時，IE6、IE7和IE8仍然占據(jù)著巨大的市場份額，因此你還需要支持它們。
? ? 對于追求在所有設(shè)備上都像素完美的客戶來說，目前你所需要支持的不同新設(shè)備（手
機、平板電腦、電視等）實際是讓事情變得更簡單：對于“站點在所有臺式和移動平臺中
外觀和功能都一樣”的要求是不切實際的，事實上也沒有意義（參見圖1-3，由dowebsite
sneedtolookexactlythesameineverybrowser.com模仿）。注意，在臺式電腦上表現(xiàn)良好的界
面，在移動設(shè)備或者平板上也可能會有很糟糕的用戶體驗。
? ? 幸運的是，CSS3可以很容易做到漸進增強和優(yōu)雅降級，并且在舊版瀏覽器也能正常工
作。如果大部分的特性能得到合理使用，它們將優(yōu)雅地降級從而達到基本內(nèi)容在不支持的
瀏覽器里依然可訪問的目的。另外，如果需要的話，還有一些機制允許你構(gòu)建支持或者提
供可替代的內(nèi)容。
2.1對內(nèi)容的思考過程
當(dāng)在網(wǎng)站界面中實現(xiàn)閃亮的特性時，以下良好的思考過程應(yīng)當(dāng)貫穿其中。
1）創(chuàng)建一個基本的可訪問HTML內(nèi)容?；趦?nèi)容的樣式和行為應(yīng)該盡可能可用和樣
式增強，但它們不是作為訪問內(nèi)容的必需條件。
2）思考你是否有必要使用所有炫目和先進的技術(shù)，還是單純只因為你是個想要眾人
捧的酷酷小孩所以想使用而已。
3）檢查用你所推薦的實施方案是否做到了優(yōu)雅降級，同時留有可訪問的基本內(nèi)容。
4）測試內(nèi)容是否可訪問并且在多個設(shè)備上能正常顯示（例如不同屏幕尺寸、控制機制）。
5）在沒有CSS3和WebGL的情況下或者任何情況下，對于特定用戶，內(nèi)容是否可訪
問。你最好建立一個提供內(nèi)容入口的后備機制。
讓內(nèi)容被盡可能多的用戶所訪問到，這是你一直要關(guān)注的宗旨。
1）牢記優(yōu)雅降級/漸進增強。
2）使用內(nèi)置特性向不可訪問的內(nèi)容提供備選方案（例如，alt文本、視頻的字幕）。
3）當(dāng)沒有任何內(nèi)置機制時建立你個人的備選方案（例如，用Modernizr來檢測特性并
提供替換樣式）。
4）用補丁方案向那些不存在的特性提供支持。
我決定在本書中介紹的CSS3特性的原則是：得到兩個及兩個以上主流瀏覽器的支持，
并且通過補丁方案、替換內(nèi)容、優(yōu)雅降級等措施讓應(yīng)用該特性的設(shè)計在不支持的舊版瀏覽
器中依然能工作。不過我已經(jīng)好幾次打破這個原則，但也只在我認為這個特性很重要而且
可能在不久的將來有更多的實現(xiàn)方式時，以及即便它沒有得到支持也完全不影響站點。
3.1 c ?s s 3的特性
? ? 先讓我們簡單地介紹你將用到的主要CSS3模塊及其主要特性。你可以在www.w3.org/
Style/CSS/current-work.en.html的W3C CSS Current Work頁面上查找關(guān)于每個模塊的更多詳
細信息。如你所見，很多模塊還未完成，但這不影響你使用其中的一些特性。很多特性已
經(jīng)得到瀏覽器支持，不過你需要增加廠商前綴.
? ?本書中所精選的主要CSS3模塊包括：
? ?CSS顏色（）。在CSS3中CSS顏色有許多方法定義來指定
顏色，包括RGB（紅、綠、藍），HSL（色相、飽和度、亮度），RGBA和HSLA
（分別和前面兩個一樣但是引入了定義透明度的alpha通道），以及一個單獨的opacity
屬性來控制選區(qū)元素的透明度。
? ?CSS3字體（）。該模塊不但包括對于可下載的Web字體（你猜對了，以前CSS Web字
?體是一個單獨模塊）的定義，而且包括其他影響字體的屬性的定義（）。關(guān)于這些屬性
我不準(zhǔn)備討論太多，除了Web字體，因為很多屬性的瀏覽器支持度并不是很好。
? ?CSS3文本（）。它與能讓文字變得光彩奪目的CSS3字體相
輔相成。CSS3文本包含CSS2所熟悉的條目，比如letter-spacing和text-transform，并
且引入新的條目，比如hyphenation（斷字）和text-shadow（文字陰影）。
? CSS3選擇器（）。對比CSS2中現(xiàn)有的選擇器，CSS3
選擇器定義一個更強大、更健壯的機制。它允許你在所指定的元素上應(yīng)用樣式。這
些選擇器幾乎都有良好的跨現(xiàn)代瀏覽器支持。
媒體查詢（）。媒體查詢是目前你為不同瀏覽設(shè)備（寬屏和窄屏）提供相同內(nèi)容不同最
佳布局的主要方法。
