隨著更多設計師與開發者開始使用標準(特別是CSS),每天都會有許多新技術被發現,達成相同目標的新方法,更好的方法也不斷發展著.
"圖片替換" 可以說是這種變革的最佳範例,這是用CSS把普通文字置換成圖片的技術.
應該如何用CSS把文字換成圖片?
如果能把表現用(不重要的或者裝飾用的)的圖片全放在CSS中是最好的,因為這樣能夠輕易替換更新過的圖片,但卻不用更改標記原始碼.同樣,我們也能確保所有瀏覽器和設備能正確解析標記源代碼的意義,不管有沒有完全支持把文字替換成圖片的進階CSS.在這本書中一直強調這樣的優勢.
沒有完美的解決方案
然而,尋找單純使用CSS將文字置換成圖片的"完美"方式幾乎跟尋找聖杯沒啥兩樣...因為現在還不存在.僅有能在所有瀏覽器中正常運作的方法,但是它無法配合輔助程式(例如螢幕閱讀器)使用.還有其他能奏效的方法,除非使用者指定瀏覽器不顯示任何圖片,但又啟用CSS.
雖然在這段文字撰寫的時候還沒有能夠滿足所有人(或是所有使用者)的方法,但是這類方法現在的確有不少網站使用.在套用任何圖片置換法的時候都必須特別小心,同時也必須了解它會帶來的副作用.
能用,但是要小心
這就是本章的目的,屆時圖片置換帶來的便利性,但是相對的也會揭露它的缺點,隨著時間的發展,或許會有更多CSS狂熱者發現能夠做出相同效果的更好方法;在那之前,我們必須善用其中的技巧,衡量得失.
為了讓你熟悉圖片置換的概念,讓我們看看幾種常用的方法.先從Fahrner圖片替換技巧談起(Fahrner Image Replacement;FIR).
#p#
方法A: Fahrner圖片替換(FIR)
以發現這個技巧的Todd Fahrner為名,FIR是用CSS的background(或background-image)屬性把文字替換成圖片的原始方法.
Douglas Bowman在2003年3月發表的極佳教學文件"Using Background-image to Replace Text" (http://www.php.cn/)使這個方法大受矚目.
讓我們透過一個簡單的例子,用FIR吧標題文字替換成圖片.
標記原始碼
接下來要用來做替換的標記原始碼:
Fahrner Image Replacement
這只是個簡單的標題標籤,裡面有稍侯要用圖片替換掉的文字.你會發現其中為
圖14-1 標題的預設樣式
額外的標籤Fahrner Image Replacement
現在我們放好了額外的標籤,準備加上CSS.
CSS內容
方法A的精華是以所擁有的兩組標籤分別完成兩份工作,接著將以標籤隱藏文字,再為標籤加上樣式,指定背景圖片,正是因為這兩個步驟,所以會用到兩組標籤.
隱藏文字
首先,讓用標籤的display屬性把文字隱藏起來.
#fir span {
display: none;
}
display: none;
}
display: none;
}
#fir {
width: 287px;
height: 29px;
(fir.gif) no-repeat;
}
#fir span {
display: none;
}
先前
}
先前在標籤上用display屬性隱藏的文字內容,這邊則使用background屬性指定替換圖片的長寬以及圖片名稱.
圖14-3是瀏覽器查看標題的效果,成果只有看到漂亮的圖片.完美!
圖14-3 Fahrner圖片替換法的效果
優點
但是這些優點也伴隨著幾個非常重要的缺點而來,值得一提. 缺點
易用性專家Joe Clark廣泛的研究了Fahrner圖片替換法對使用螢幕閱讀器或其他輔助設備閱讀頁面內容的使用者有何影響.
他測試的結果能在他的文章" Facts and Opinion About Fahrner Image Replacement"(http://www.php.cn/)看到.在這篇文章中,他發現大多數螢幕閱讀器(或許錯誤的)遵守了這個聲明:
#fir span {
display: none;
}
不僅視覺上隱藏了文字,這些規則還會是那些透過螢幕閱讀器瀏覽的人完全螢幕閱讀器聽不到標題內容.某些人會爭論display屬性只應該被具有屏幕的設備解析.同時應該特別為屏幕閱讀器建立新的CSS媒體類型,以便設計者能夠更精確的控制系統如何展現未來的圖片替換技巧.或是螢幕閱讀器應該遵守現存的媒體類型之一,像是aural.
除了螢幕閱讀器遇上文字顯示問題,FIR還有兩個缺點:
這個方法需要一組不具備任何語意的標籤才能運作.
再用戶關閉瀏覽器顯示圖片,但又啟用CSS支援的極少數情況下(通常是為了節省頻寬),文字和圖片都不會顯示出來.
衡量優缺點
事實是使用FIR,設計者會冒著無法對殘疾人士提供完整內容的風險,同時對關閉圖片顯示,啟用CSS的用戶也冒著相同的風險.這裡必須衡量優缺點,了解缺點,小心使用.
有些情況使用FIR很有道理,在本章後面的"技巧延伸"單元,我會分析兩種這類情況.
由於這些易用性研究成果浮上檯面,因此其他設計師開發者不斷調整,嘗試圖片替換技巧,尋找新的方法"隱藏"一般文字,並且為北京製訂圖片,接著看看以下幾種方法.
同時被Seamus Leahy(http://www.php.cn/)與Stuart Langridge(http://www.php.cn/)發展出來,LIR法的目標是處理圖片替換問題,而不需要用上FIR裡無意義但又必要的標籤.由於這個方法不需要額外的標籤,因此標記原始碼能縮減成:
LIR不用display屬性隱藏文字,而是把外包元素的高度(在這個例子中是)設為0,並將padding-top設為與替換圖片高度相同,把文字擠開. 標記原始碼和CSS
#lir {
padding: 90px 0 0 0;
overflow: hidden;
background: url(lir.gif) no-repeat;
height: 0px ! /* for most browsers */
height /**/:90px; /* 對於 IE5/Win*/
}
圖14-4 用圖片編輯器建立的lir.gif
圖14-4 用圖片編輯器建立的lir.gif
用來替換掉文字的圖片高90像素,因此把上內部定設定為相同的數值.對大多數瀏覽器來說,我們把高度設為0,就等於把文字(或是包含在
與方法B類似,Phark法(以Mike網站的暱稱為名)同樣不需要額外的標籤就能正常運作.使用方法C後標題標記源代碼就像這樣:
這個方法不必用上FIR法額外需要的標籤,讓我們看看隱藏文字,把它置換成圖14-5中的圖片所需的簡單CSS內容:圖14-5 我們用來替換文字的高26像素的圖片phark.gif}
#phark {
height: 26px;
text-indent: -5000px;
background: url(phark.gif) no-repeat;
}
如你所見,方法C是目前最簡單的方法,不需要打上盒模型Hack或額外的標籤,通過為文字設定誇張負縮進值,就能把文字推到屏幕之外,讓使用者看不見它的內容.
與方法B一樣,使用這個方法的時候,屏幕閱讀器的使用者應該也能正常聽到標題文字的內容,這的確是個進步.
仍然不完美
雖然Phark法最容易實現,但是它仍然會在"關閉圖片顯示,啟用CSS"的情況下發生問題,雖然聽起來實在不容易發生,但是這代表了在撰寫這段文字的時候,暫時還沒有完美的解決方法可用.
讓我們複習一下先前展示的三種方法,並且歸納它們的差異.
#p#
歸納
仔細研究了三種常用的圖片替換技巧,從最早的Fahrner圖片替換法開始,接著是它的兩種變形,雖然都不是完美的做法,但是Mike Rundle之類的技巧已經非常接近完美了.應該能在現實世界裡應用,只是必須要注意一些陷阱和缺點.
讓我們分析這三個方法的主要差異:
方法A:
需要一組額外的沒有意義的標籤.
在這段文字撰寫時,常被使用的螢幕閱讀器會被display屬性影響,不念出任何內容(根據Joe Clark的研究結果而知)
在"關閉圖片顯示,啟用CSS"的時候,什麼都看不到.
方法B:
不需要額外標籤
螢幕閱讀器應該能正常念出內容.
要為IE5 for Windows使用盒機型Hack.
在"關閉圖片顯示,啟用CSS"的時候,什麼都看不到.
方法C:
不需要額外標籤
螢幕閱讀器應該能正常念出內容.
在"關閉圖片顯示,啟用CSS"的時候,什麼都看不到.
現在所有常見的方法都共享了最後一個缺點,但隨著更多開發者持續研究圖片替換的技巧,相信有一天會看到能夠滿足所有人的解決方法.
在那之前,還有幾個圖片替換的實際應用概念值得一提,將在本章稍後的"技巧延伸"單元中討論其中的兩個.
有個重點值得一提:有位遵照標準的設計師Dave Shea不斷地觀察圖片圖換技術的最新發展,同時維護了一份組織完善的頁面,記載了不少相關技巧.一定記得看看Dave的"Revised Image Replacement" (http://www.php.cn /).
#p#
技巧延伸
在這個單元中,首先先來看看兩個真實世界里或許能正確應用的圖片替換技術的地方,首先,我們先來看看標識(logo)替換的有用技巧,這是推廣FIR技巧的(方法A)的Douglas Bowman最先告訴我的.其次,我會分享Fast Company的網站是如何不使用JavaScript單靠圖片替換技術做出導航系統的.
標識替換
在本章開始的時候討論瞭如何用CSS把文字替換成圖片.這些方法都有些特定的缺點,但是這些缺點陷在一種特殊情況下會完全消失:那就是用圖片... ..替換掉另一個圖片.
但是為什麼會想這麼做?
Hi-Fi和Lo-Fi
以圖片替換掉另一個圖片的理由之一,可能是為了提供不同的網站標識,一種給完全支持CSS(能正確處理background屬性)的瀏覽器,另一種則是給老舊瀏覽器,手持設備,屏幕閱讀器等.
如果你的標識有配合CSS設計的透明顏色,特殊顏色時,這個方法尤其便利,你或許會想顯示Lo-Fi版本的標識,讓頁面在CSS關閉或不支援的時候仍然有不錯的外觀.
範例
為了避開著作權律師的糾纏,我將再度以個人網站作為範例.它不僅替換了標識圖片,同時還考慮到首頁之外的其他頁面,啟用CSS版的標識仍能作為超連結點擊,連回首頁.
一起來看看我在首頁上標記標識所使用的源代碼,以及其他頁面使用的源代碼.
圖14-6 未啟用CSS的瀏覽器會看到的logo_lofi.gif
圖14-7 啟用CSS的瀏覽器會看到的logo_corn.gif
CSS內容
#logo img {
display: block;
width: 0;
}
最後,對首頁以外的其他頁面來說,仍然希望用戶能夠點擊標識,回到首頁.但是在把圖片寬度設置成0之後要怎麼辦到呢?現在根本沒有能夠點擊的區域.
#logo span {
width: 173px;
height: 31px;
背
你應該發現了,我們該做的所有事情就是把高度,寬度設為與替換用的圖片相同,同時把背景圖片指定為hi-fi版. 恢復超連結
border-style: none;加上了border-style屬性去掉了大多數瀏覽器為圖片連結自動加上的預設邊框(圖14-8).
display: block;
width: 173px;
}
透過CSS指定的寬度,我們甚至能提供兩張大小不同的圖片,在這個例子中,他們的大小是一樣的.
圖14-10 不支援CSS時顯示的lo-fi標識
接下來,繼續看看另一個現實世界的個案研究,這是我為Fast Company網站設計的導航系統,它結合了無序清單,圖片置換..以及一點其他的手法.
圖14-12 一張包含三種狀態的圖片background-position: 0 -40px;
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* 僅適用於 IE5/Win*/
}
#nav a :hover {
background-position: 0 -20px;
}
#nav a:active, #nav a.selected {
#thome a {
width: 40px;
background: url(home.gif) top left no-repeat;
}
圖14-13 標籤導航效果,示範三種不同狀態.
為什麼要用它?
它非常輕量,標記原始碼裡不過是個無序清單.
它易於使用: 利用Stuart的方法,我們確信螢幕閱讀器能夠念出文字連結.
不用JavaScript:不要預先載入圖片,或是為每個狀態分別製作圖片.也不需要額外的JavaScript控制滑鼠滑過效果.謝拉!Pixy兄.
它很美觀:把文字放到指定的位置頗需技巧,這讓我們可以直接使用[漂亮的圖片.
但等等,文字不會變化大小!
#thome a {
width: 46px;
background: url(guides_lg.gif) top left no-repeat;
}
圖14-14 用替換樣式表放大圖標圖片的導航條
相容性
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
width: 201px;
}
