網頁技巧:具有親和力的CSS隱藏文字方法

來源:互聯網
上載者:User
css|技巧|網頁 一個新的,更加具有親和力的CSS隱藏文字方法介紹,說明為什麼現有的幾種CSS隱藏文字的方法的缺陷和新的方法如何彌補。實用性一般,但是這個方法挺新穎的。

1.display:none;的缺陷
  • 搜尋引擎可能認為被隱藏的文字屬於垃圾資訊而被忽略
  • 螢幕助讀程式(是為視覺上有障礙的人設計的讀取螢幕內容的程式)會忽略被隱藏的文字。
2. visibility: hidden ;的缺陷
這個大家應該比較熟悉就是隱藏的內容會佔據他所應該佔據物理空間

3.overflow:hidden;一個比較合理的方法 .texthidden
{
 display:block;/*統一轉化為區塊層級元素*/
 overflow: hidden;
 width: 0;
 height: 0;
}
就像上面的一段CSS所展示的方法,將寬度和高度設定為0,然後超過部分隱藏,就會彌補上述一、二方法中的缺陷,也達到了隱藏內容的目的。

術語:
可訪問性(Accessibility)
是使殘疾人更容易地使用應用程式的慣例。
1990 年的美國殘疾人法案(The American Disabilities Act)
1996 年的電信法案(The Telecommunications Act)
1998 年的康複法案修正案(Rehabilitation Act Amendments)508 條款
全球資訊網聯盟(W3C)的 Web 可訪問性倡議(Web Accessibility Initiative(WAI))
這些都是可訪問性標準。在 Law and disabilities頁面上可獲得更多資訊。

螢幕助讀程式(Screen Reader)
是為視覺上有障礙的人設計的讀取螢幕內容的程式。

可用性(Usability)
使每個人都更容易地使用應用程式的慣例。可訪問性是可用性中的一類。

網頁瀏覽器(Web Browser)
可以顯示 Web 頁面的任何程式。大多數 網頁瀏覽器可以顯示 HTML 頁面,但有些(諸如行動電話中的瀏覽器)可能只顯示諸如 WML 或 cHTML 那樣的其它類型的頁面。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.