绍兴网站建设-后起网络

新闻详情
01. News
你值得重新认识的clip属性
2020-04-07查阅次数:

    非常多的人都不知道CSS中还有抱大腿的clip剪裁属性,就算见到,也认为它是一个非常冷门、生僻的CSS属性,作用和价值不大。实际上,clip剪裁非常有用,在以下两种场景下具有不可替代的地位。
 
 
    1.fixed固定定位的剪裁
 
    对于普通元素或者绝对定位元素,想要对其进行剪裁,我们可以利用语义更明显的overflow属性,但是对于position:fixed元素,overflow属性往往就力不能及了,因为fixed固定定位元素的包含块是根元素,除非是根元素滚动条,普通元素的overflow是根本无法对其进行剪裁的。怎么办呢?此时就要用到名不经传的clip属性了。再嚣张的固定定位,clip属性也能立马将它剪裁得服服帖帖的。例如:
 
    .fixed-clip{
    position:fixed;
    clip:rect(30px200px200px20px);
    }
 
    2.最佳可访问性隐藏
 
    所谓“可访问性隐藏”,指的是虽然内容肉眼看不见,但是其他辅助设备却能够进行识别和访问的隐藏。举个例子,很多网站左上角都有包含自己网站名称的标识(logo),而这些标识一般都是图片,为了更好地SEO以及无障碍识别,我们一般会使用<h1>标签写上网站的名称,代码如下:
 
    <h1>CSS世界</h1>
 
    如何隐藏<h1>标签中的“CSS世界”这几个文字,通常有以下一些技术选型。下策是display:none或者visibility:hidden隐藏,因为屏幕阅读设备会忽略这里的文字。text-indent缩进是中策,但文字如果缩进过大,大到屏幕之外,屏幕阅读设备也是不会读取的。color:transparent是移动端上策,但却是桌面端中策,因为原生IE8浏览器并不支持它。color:transparent声明,很难用简单的方式阻止文本被框选。clip剪裁隐藏是上策,既满足视觉上的隐藏,屏幕阅读设备等辅助设备也支持得很好。
 
    .logoh1{
    position:absolute;
    clip:rect(0000);
    }
 
    clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是,它具有更强的普遍适应性,任何元素、任何场景都可以无障碍使用。例如,我定义一个如下的CSS语句块:
 
    .clip{
    position:absolute;
    clip:rect(0000);
    }
 
    就可以整站使用,哪里需要“可访问性隐藏”就加一个类名.clip即可,无论是图片、文字还是块级元素,都可以满足隐藏需求(与文字透明、缩进等方法相比)。同时,clip语法简单,功能单一,与其他CSS属性相比,和元素原本CSS样式冲突的概率更低。不仅如此,元素原本的行为特性也很好用。例如,依然可以被focus,而且非常难得的是就地剪裁,因为属于“无依赖的绝对定位”。这一点很重要,我们来看下面这个实用案例。
 
    众所周知,如果<form>表单元素里面有一个type为submit或者image类型的按钮,那么表单自动有回车提交行为,可以节约大量啰嗦的键盘相关的事件的代码。但是,submit类型按钮在IE7下有黑框,很难所有浏览器(包括Firefox在内的浏览器)UI完全一致,对视觉呈现是个一挑战。于是就有了下面这个使用<label>元素李代桃僵的经典策略:
 
    <form>
    <inputtype="submit"id="someID"class="clip">
    <labelfor="someID">提交</label>
    </form>
 
    原本的submit按钮隐藏,肉眼所见的按钮UI实际上是<label>标签渲染。由于<label>是非替换元素,没有内置的UI,因此兼容性非常好。这里使用的clip剪裁隐藏是我工作这么多年大浪淘沙筛选后的最佳实践,有对比才能显出好在何处。display:none或者visibility:hidden隐藏有两个问题,一个是按钮无法被focus了,另外一个是IE8浏览器下提交行为丢失,原因应该与按钮focus特性丢失有关。透明度0覆盖也是一个不错的实践。如果是移动端项目,建议这么做;但如果是桌面端项目,则完全没有必要。使用透明度0覆盖的问题是每一个场景都需要根据环境的不同重新定位,以保证点击区域的准确性,成本较高,但clip隐藏直接用一个类名加一下就好。还有一种比较具有适用性的“可访问隐藏”是下面这种屏幕外隐藏:
 
    .abs-out{
    position:absolute;
    left:-999px;top:-999px;
    }
 
    然而,在本例中,会出现一个比较麻烦的问题。在6.4节讲过,当一个控件元素被focus的时候,浏览器会自动改变滚动高度,让这个控件元素在屏幕内显示。假如说我们的<label>“提交”按钮在第二屏,则点击按钮的时候浏览器会自动跳到第一屏置顶,因为按钮隐藏在了屏幕外,于是发生了非常糟糕的体验问题。而clip就地剪裁,就不会有“页面跳动”的体验问题。于是,权衡成本和效果,clip隐藏成为了最佳选择,特别是对于桌面端项目。