網頁技巧:具有親和力的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 那樣的其它類型的頁面。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。