Snap4

所有瀏覽器在連結或表單元素的 :focus 時都會產生虛線,這種虛線的主要用途是:可方便使用 Tab 鍵前後移動、並得知目前所在的位置。這是 Web Accessiblity 很重要的一個小功能,也因此我極度並不贊同將此虛線移除。But .... 有時在產品設計上還是得妥協,他的確會帶來一些美觀上的問題 :(

會想發表這篇文章的原因是:雖然曾經讓每個瀏覽器都 Work,但現在想要用卻遍尋不著 IE < 8 的解法 :p (只能說年紀大了,很多事還是寫下來比較好 XD )另外就是用 Google 爬文的解法都怪怪的,像是得用 JavaScript 綁 focus 事件並 document.body.focus() ? 記得當初做沒有這麼複雜啊!而且上述作法會對視障朋友產生極大困擾(完全沒辦法用鍵盤操作了),真的應該禁止使用。

在大多數的標準瀏覽器,只要在 CSS 設定一下 outline 的屬性即可:
a, input {outline: 0}
針對在老舊的 IE 只要在 HTML 多加一個 hideFocus 屬性即可:


就這麼簡單囉,想不起來的原因是... 之前都一直跟 hasFocus() 搞混 :p 發表了這篇,以後應該不會再忘記了。



http://josephj.com/entry.php?id=347

天秤女~佳佳 發表在 痞客邦 PIXNET 留言(0) 人氣()