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
arrow
arrow
    全站熱搜

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

    E-mail轉寄