CSS方言之webkit私有属性

前言

写这篇文章的起因来源于一个小bug,就是在一个p元素中,明明已经设置了text-align: center,文字却依然没有居中。仔细一看是由于设置了display: -webkit-box的缘故。

p {
	text-align: center;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
}

看着熟悉而又陌生的-webkit前缀,进而想到chrome目前的市场占有率,我觉得还是有必要再过一遍-webkit类的css特性。前端在写css时浏览器兼容性固然重要,但是了解一下某种主流浏览器特有的奇技淫巧,对于解决特定问题还是很能开阔思路的。

display: -webkit-box 与display: flex的渊源

display:flex和display:box都是弹性布局,box是2009年的命名,已经过时,使用时要加上前缀(比如webkit)。flex是2012年之后的命名。

以上可以先得出一个结论, display: box不要用了,省的给自己挖坑。 flex完全可以满足需求且是最新标准。

但是问题既然遇到了,还是应该了解一下原因。其实也很简单,当元素设置为弹性盒子布局(box/flex),一些css属性就失效了。

在指定flex之后,子元素的float、text-align、vertical-align属性都将失效。 可以理解为弹性盒子本身就是布局属性,设置后子元素的布局将由其接管,其他普通布局类css都靠边站。

webkit-box并非百无一用( -webkit-line-clamp )

-webkit-line-clamp :限制在一个块元素显示的文本的行数。适用于多行文本显示省略号的问题。(单行文本使用text-overflow : ellipsis即可)

.multi-text {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

效果图如下:

CSS方言之webkit私有属性_第1张图片

如果不用-webkit-line-clamp,大概可以用css hack或者用js实现,当然也可以使用插件,比如jQuery.dotdotdot。这样当然麻烦很多。

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。只有webkit内核浏览器支持这个属性,比如chrome,safari和opera.

CSS方言之webkit私有属性_第2张图片

在使用-webkit-line-clamp有两个非常重要的点就是:

  1. 兼容性
  2. 必须配合webkit-box使用,在我看来算是webkit-box的一点剩余价值
display: -webkit-box; // 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient:// 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

Webkit Extensions

WebKit支持大量的CSS扩展,这种css属性的前缀为-webkit-.

这些属性其中的一部分已经被包含在 CSS 规范草案中,并且可能成为最后的推荐标准,但目前仍然是试验性的属性, 还有一些属性是不规范的属性,它们没有出现在跟踪规范中.

具体细节可参照MDN:Webkit Extensions

有用的webkit私有css属性

  1. -webkit-mask

图片渐变

    background : url("images/image.png") no-repeat;
    // 对角线渐变
    -webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

CSS方言之webkit私有属性_第3张图片

图片裁剪:

.homePage {
    height: 300px;
    width: 300px;
    background: url(./img/index.png) 0 0 no-repeat;
     -webkit-mask-image: url(./img/circle.svg);
    -webkit-mask-size: 300px 300px;
}

CSS方言之webkit私有属性_第4张图片

2. -webkit-appearance:none | button | button-bevel …

我是span
我想整容成button