前言
写这篇文章的起因来源于一个小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;
}
效果图如下：
如果不用-webkit-line-clamp，大概可以用css hack或者用js实现，当然也可以使用插件，比如jQuery.dotdotdot。这样当然麻烦很多。
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。只有webkit内核浏览器支持这个属性，比如chrome，safari和opera.
在使用-webkit-line-clamp有两个非常重要的点就是：
- 兼容性
- 必须配合webkit-box使用，在我看来算是webkit-box的一点剩余价值：
display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient：// 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
Webkit Extensions
WebKit支持大量的CSS扩展,这种css属性的前缀为-webkit-.
这些属性其中的一部分已经被包含在 CSS 规范草案中,并且可能成为最后的推荐标准,但目前仍然是试验性的属性, 还有一些属性是不规范的属性,它们没有出现在跟踪规范中.
具体细节可参照MDN：Webkit Extensions
有用的webkit私有css属性
- -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)));
图片裁剪：
.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;
}
2. -webkit-appearance：none | button | button-bevel …
<span>我是span</span>
<span class="buttonStyle">我想整容成button</span>
<style>
.buttonStyle {
-webkit-appearance: button
}
<style>
-
-webkit-text-stroke
文字描边的宽度和描边的颜色
h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}
- 再列一个私有伪元素
::-webkit-progress-bar: 进度条未完成部分样式
-webkit-progress-value：进度条已完成部分样式
<progress value="10" max="50">
默认效果：
应用效果：
// 小前提：progress的默认样式要设置为none
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
::-webkit-progress-value {
background: blue;
}
没用的webkit私有属性(个人看法)
-webkit-margin
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
相当于：
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 0px;
margin-left: 0px;
}
可见我们常用的margin也有chrome版呀，当时看到还觉得挺好玩的。有点像是普通话中“臀部”在有些方言中直接叫“腚”了:)
后记
先做一个简单总结，文章中亮相的webkit私有属性有:
-webkit-box，-webkit-line-clamp, -webkit-mask, -webkit-appearance, -webkit-text-stroke, -webkit-margin, ::-webkit-progress-bar, ::-webkit-progress-value
当然还有很多很多，需要在平时的工作中不断挖掘学习。
接下来想要谈一下我自己对浏览器私有属性的看法，包括webkit, ms以及moz。以webkit私有属性为例。
根据MDN描述，webkit的私有属性大致分为以下三类：
- WebKit-only properties (avoid using on websites)
- WebKit-prefixed properties on the standards track
- Formerly proprietary properties that are now standard
翻译过来的大概意思就是：
- 未被css标准追踪，换句话说就是“自嗨”的
- 被css标准追踪，将来有可能成为标准
- 已经成为css标准
这个分类表达了一种趋势，一些新奇的玩意在将来可能会成为标准，关注各大浏览器厂商推出的css私有属性，有助于我们了解css昨天今天明天的变化与动态，追踪最新标准同时对自身拓宽加深对css的学习有很大帮助。
另外，对于所谓“自嗨”型的浏览器私有属性，我不赞同MDN中说的避免在网站使用(aviod using on website)。以webkit为例，今天chrome浏览器的市场份额超过50%，对于一些不影响交互性的私有属性，我们完全可以用在项目中使用，因为它可以触达多数用户。而在不支持webkit私有属性的其他浏览器也不会影响业务与功能，这不正是我们前端开发中经常所说的渐进增强吗？