頁面可用性之outline輪廓外框的一些研究

頁面可用性之outline輪廓外框的一些研究

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=505

1、重要的前言
在IE以及Firefox瀏覽器下，默認狀況下，點擊連接文字或圖片（特指a標籤下的）。會留下一個輪廓框。曾經有一段時間，我稱之爲連接虛框。後來，改口了，由於我發現稱之爲連接虛框彷佛有些不許確，狹隘了點。

因爲點擊連接會產生輪廓框就在IE和Firefox瀏覽器下會出現，而這二者的變現剛好有都是虛框(dotted)，因此會直接用連接虛框的表述代替連接輪廓框。事實上，連接外框不等於連接虛框，例如，chrome瀏覽器下，連接獲取焦點是的輪廓框是羽化的實線，呈暗淡的橙色，以下：

因此除非是特指點擊事件，我會使用虛框一詞，其他均用輪廓框或外框取而代之。

就我我的而言，對於連接點擊後留下的輪廓框，我都是採起無視的態度，由於權衡來說，對連接輪廓框大動干戈麻煩大於好處。麻煩在於代碼成本，兼容性以及可用性，好處在於必定程度上去除了討厭的點擊外框，對於追求完美的設計師或頁面工程師而言，心理上舒服了。可是對於用戶而言呢，考慮到從衆與習慣性，用戶對連接外框的討厭遠不及設計師或工程師，瞧，百度，騰訊，或是新浪它們對連接外框作了處理嗎？沒有。大部分的用戶就是在這樣的環境下過來的。

然而，在互聯網上，頁面老是千差萬別，遇到的狀況也是千秋各異，因此有時候也會遇到好處大於麻煩的狀況，看下面這張圖：

還有就是一些設計類網站，醜陋的點擊虛框是完美主義的設計師們徹底沒法容忍的，因此他們就會對這個連接虛框下手，剷除他們。他們可能會使用a{outline:none;}或a{outline:0;}（後者更消耗渲染多一點），想必瀏覽至此的您也知道這一點。然而，這個，或許你們習覺得常，認爲「沒什麼啊」的一個樣式實際上是頁面可用性上一個大大的問題，a big problem!

絕大多數的用戶都是經過鼠標點擊打開一個連接的，因此設置a{outline:none;}去除點擊時的虛框是沒有問題的。然而，有一部分用戶是鍵盤使用愛好者或是不得已鍵盤使用者，設置a{outline:none;}就會給他們帶來麻煩。舉個例子吧，我大學同寢室的濤哥，他不是什麼鍵盤愛好者，可是他的鼠標老是時靈是不靈，換鼠標也不起做用，因此不少時間，都是使用鍵盤打開文件，瀏覽網頁什麼的。假設他在用Firefox3瀏覽器瀏覽個人新的首頁系統，其平時瀏覽頁面都是按TAB鍵在切換連接，回車打開的。誰知我這個「賴水寶」（方言，有傻逼之意）設置了a{outline:none;}，結果其狂按TAB鍵，頁面上一點反應都沒有，其迷茫了，腦中冒出諸如「這個頁面怎麼了」「我瀏覽器是否是出什麼岔子了」之類的問題，而後不得已關掉了此頁面。……

總結此例子，一句話，設置a{outline:none;}雖然能夠去除點擊時留下的外框，但同時也扼殺了鍵盤操做focus時留下的虛框，回事鍵盤使用者迷茫與網頁中。這也是爲何會寫這篇文章的緣由所在，本文討論的就是如何點擊時能夠有效地去除連接外框，鍵盤focus時又保留連接外框。因爲本文主要討論outline，因此IE6，IE7瀏覽器能夠繼續過元旦，放假休息。

您能夠狠狠地點擊這裏：本文CSS與outline表現測試demo頁面

2、demo使用的一些說明
demo效果的查看分兩類，一類是點擊；二類是鍵盤。

點擊沒有什麼好說的，移上去，左鍵一點（因爲基本上都是當前頁面連接，故不鬆開），觀察有無虛框；對於鍵盤查看效果，值得一提：首先IE瀏覽器，Firefox，chrome下，直接點擊TAB鍵就能夠查看focus焦點後的效果，Opera瀏覽器是個怪胎，按Tab鍵不頂用，要使用Shift+↓和Shift+↑進行切換查看（更多Opera下快捷鍵點這裏）。對於Safari瀏覽器，若是是在OS X下，需經過System Preferences（系統偏好） > Keyboard and Mouse（鍵盤與鼠標） > Keyboard Shortcuts（快捷鍵）設置打開鍵盤的可用性（我沒有蘋果機子-窮啊(5555~~)，因此這裏正確與否我未驗證）。若是是在windows系統下，則經過編輯 > 偏好設置 > 高級，而後勾選「按住TAB鍵以高亮顯示網頁上的每一項」，步驟以下圖所示：

demo中，文字連接爲普通的文字連接，第一個圖片連接背景爲圖片，文字text-indent負值定位到瀏覽器以外，第二個圖片連接添加一個span標籤，絕對定位到瀏覽器可見區域以外。

3、默認的連接外框
這裏沒有任何outline相關的屬性，結果在有些瀏覽器下連接外框的表現就比較挫了，例如Firefox下的虛框：

Opera瀏覽器下的外框：

這裏外框的延伸正是因爲使用了文字偏移技術產生的。爲了顯示的好看，有時會用圖片代替按鈕等，咱們所見的文字有時就是圖片的一部分。從搜索引擎的角度上講，有必要在HTML中顯示圖片上的文字，但又不能在頁面上看到，故使用文字偏移技術。經常使用的是text-indent定位，還有就是是絕對定位。

.indent{text-indent:-1000px;}
.absolute{position:relative;}
.absolute span{position:absolute; left:-1000px;}

4、overflow:hidden有效解決外框延長問題
overflow:hidden能夠有效解決外框延長的問題。不過，在Opera瀏覽器下，overflow:hidden貌似對絕對定位的文字偏移沒有做用，這彷佛是個bug。見下圖：

5、使用outline:none去除連接外框的
outline:none能夠去除連接外框，無論鼠標點的，或是鍵盤切換的，都沒有外框，這顯然是有問題的。問題不在於outline，其實outline:none自己並無什麼，只是直接掛在a標籤下面未免太狠了點，就像是寧錯殺三千不放走一人的恐怖行動，直接把鍵盤用戶排除掉了。由於a{outline:none;}形成了IE6/7（不認識outline）之外瀏覽器下，無論是點擊或是TAB鍵切換都看不到任何外框，用戶根本不知道哪一個連接當前在激活狀態，在鍵盤用戶眼中，這些頁面就是個死頁面。

a{outline:none;}

太多的設計師沒有考慮到這一點了，很多CSS重置(css reset)中也對outline進行了處理，例以下面：

上圖中的設置方式實際上是有問題的（此reset還比較出名），看過本文您就會知道爲何有問題，怎樣設置才更合理。

6、經過:focus添加鍵盤切換外框
經過:focus添加鍵盤切換外框的想法實際上是好的，既然a{outline:none;}不夠仁義，株連全部的外框，那麼我在後面再設置個:focus的樣式，豈不就解決了鍵盤切換的問題了。由於鍵盤切換的原理就是讓連接內容獲取焦點(focus)的。

a{outline:none;}
a:focus{outline:thin dotted;}

然而，實際上，事情不是想的那個樣子。怎麼了呢？經過:focus從新引入outline會使IE8和Firefox瀏覽器下:active的樣式從新出現。因而，在單擊文字或圖片連接的時候，仍是會看到連接輪廓框。同時，在chrome瀏覽器以及Safari瀏覽器下，:focus{{outline:thin dotted;}替換了瀏覽器默認focus時的樣式。Opera瀏覽器不是覆蓋原來的focus樣式，而是添加，因而會出現雙邊框。 見下圖（前者爲chrome的默認focus樣式替換，後者是Opera下的雙邊框）：

7、再添加:active進行消除
接上面。既然:focus引出了:active的樣式，因此，若是再在後面添加:active{outline:none}豈不是可讓IE8或是Firefox點擊時無虛框。結果如何呢？還不錯，IE8或是Firefox瀏覽器下點擊是沒有虛框了，且不影響鍵盤TAB鍵的連接切換。就是代碼彷佛冗餘了一點，並且覆蓋了chrome和Safari瀏覽器下默認的蠻酷的focus樣式，Opera下的雙邊框問題依舊存在。

a{outline:none;}
a:focus{outline:thin dotted;}
a:active{outline:none;}

好，如今咱們理一理，咱們能夠發現，這裏的邏輯有點問題，相似於負負得正。顯示a{outline:none}讓全部的連接外框沒有了，而後又設置:focus讓外框又出現，而後又設置:active讓外框又消失，這其中存在消失 – 出現 – 消失的邏輯，而最後一個消失起做用了，這種狀況下，最終起做用的那個消失是與前面二者是沒有關係的。因此，邏輯推斷，:active是解決問題的關鍵。究竟是不是如此呢？看下面內容。

8、僅僅使用:active去掉連接外框輪廓線
這裏的核心樣式很簡單。

a:active{outline:none;}

結果是出其的好：能夠去除用戶點擊圖片式連接時的外框線的問題，同時保留了習慣使用鍵盤用戶在連接得到焦點時虛框可見。而且不會重置瀏覽器默認的focus得到焦點的樣式，或是產生雙邊框的問題。能夠說是至關完美。
下圖爲IE8下鍵盤切換focus時的樣式表現：

9、使用:hover作進一步的彌補
後來的一些測試代表，僅僅使用:active還有一點小小的問題，就是用戶點擊一個連接和這個連接指向的頁面加載的過程當中，連接外框依舊會出現，這其實也不難理解，連接被點中，也處於:focus狀態。因爲本測試頁面的連接基本上都是在頁面自身，因此看不到此問題。必定程度上解決此問題的方法就是添加:hover的outline:none屬性。

a:hover,a:active{outline:none;}

另外，還有一種狀況下，連接外框的問題沒有解決，就是當用戶點擊了一個連接後，再點擊瀏覽器的後退按鈕的時候，此時outline就會出現。

10、IE6/7與連接外框
雖然本文主題是outline，與IE6/7形同陌路。可是IE6/7也是有連接虛框的。有個IE的私有屬性能夠有效的根除IE的連接虛框，就是hidefocus=」true」，若是您的頁面想保證較高的可用性，這玩意最好不要用，或僅用在不重要的地方。這東西，也是個狠角色，很獨裁，鰲拜。會讓含有此屬性的連接外框徹底消失，什麼鍵盤TAB切換根本鳥都不鳥，會有a{outline:none}一樣的可用性問題，貌似還會屏蔽focus事件。

<a href="#" hidefocus="true">連接</a>

11、最後的總結
首先，應該知道爲什麼說:focus{outline:none}是不合理的了。考慮到頁面的可用性，尤爲對於鍵盤使用者的頁面可用性，一旦設置了:focus{outline:none}，鍵盤TAB切換是，雖然事實上實在不停的切換，可是因爲outline樣式爲none，外框沒有樣式，用戶根本不知道當前哪一個連接（或是表單控件）處於focus得到焦點的狀態，也就沒法再頁面上進行操做，這類用戶包括殘疾人士，使用網頁閱讀器，或是鼠標出問題的用戶，或是就是個鍵盤使用愛好者。

事實上是存在共贏的方法的，將:focus{outline:none;}改爲:active{outline:none;}這樣，既可讓鼠標使用者點擊時去掉醜陋的外框，又保留了鍵盤使用者須要看到的焦點外框，確實爲一箭雙鵰的方法。若是您想更近一步，能夠添加:hover{outline:none;}，但我我的的見解是hover就不用加了，綜合估量成本和收益，貌似成本要比收益大一點，固然，這裏面含有主觀因素，您沒必要跟我意見一致。

回到開始，本文的討論前提是是在假設你要去除連接外框，考慮到頁面的可用性問題，您應該對CSS怎麼作。個人經驗告訴我，不少事物，每每是原始的，默認的是最好的。馬化騰馬老闆在其內部的產品會議上也提到這一點，點擊這裏，其針對的是瀏覽器默認的控件，尤指按鈕。
因此，咱們要不要經過樣式花代碼花心思改變連接外框的樣式表現呢？至少我是不會的，除了會解決下外框延伸的問題或是極少的使用了a標籤的非連接，我是不會動outline動外框的，由於我以爲這是吃力不討好的事情，不作反而悠閒，都交給瀏覽器吧。

最後，因爲文章寫了一半，瀏覽器出岔子，不少內容丟了重寫（真是火），因此內容上可能有重複，或囉嗦，或上下銜接不天然，還望見諒。還有，您在使用過程當中遇到什麼相似問題，或是發現本文內容的不正確之處，歡迎指正。就這些，我要去買《阿凡達》的電影票了，嘿嘿。

12、參考文章
一、Don’t Lose Your :focus
二、Better CSS outline suppression

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=505