css可访问性隐藏，clip裁剪

很多网站左上角都有包含自己网站名称的标识（logo），而这些标识一般都是图
片，为了更好地 SEO 以及无障碍识别，我们一般会使用<h1>标签写上网站的名称，代码如下：

<a href="/" class="logo">
 <h1>网站名</h1>
</a>

隐藏<h1>标签中的“网站名”这几个文字，通常有以下一些技术选型。
• 下策是 display:none 或者 visibility:hidden 隐藏，因为屏幕阅读设备会忽略
这里的文字。
• text-indent 缩进是中策，但文字如果缩进过大，大到屏幕之外，屏幕阅读设备也
是不会读取的。
• color:transparent 是移动端上策，但却是桌面端中策，因为原生 IE8 浏览器并不
支持它。color:transparent 声明，很难用简单的方式阻止文本被框选。
• clip 剪裁隐藏是上策，既满足视觉上的隐藏，屏幕阅读设备等辅助设备也支持得很好。

.logo h1 {
    position: absolute;
    clip: rect(0 0 0 0);
 } 

任何元素、任何场景都可以使用。例如，我们定义一个类：

.clip {
     position: absolute;
     clip: rect(0 0 0 0);
} 

就可以整站使用，哪里需要“可访问性隐藏”就加一个类名.clip 就可以了。