CSS新世界
上QQ阅读APP看书,第一时间看更新

2.4 指代所有CSS属性的all属性

all属性可以重置除unicode-bidi、direction以及CSS自定义属性以外的所有CSS属性。例如:

input {
    all: inherit;
}

该段代码表示<input>元素中所有CSS属性都使用inherit关键字作为属性值。all属性的语法如下:

all: initial | inherit | unset | revert

从all的语法中可看出,只能使用inherit、initial、unset和revert中的一个值作为属性值。

all:inherit没有任何实用价值,all:initial也没有任何实用价值。有实用价值的是all:unset和all:revert。all:unset可以让任意一个元素样式表现和<span>元素一样。all:revert可以让元素恢复成浏览器默认的样式,也是很有用的。例如,<progress>进度条效果在iOS端很好看,很有质感,那么无须对其自定义样式,我们就可以使用all:revert将进度条一键还原成系统默认的样式:

/* 仅iOS Safari有效 */
@supports (-webkit-overflow-scrolling: touch) {
    progress {
        all: revert;
    }
}

最后讲讲为什么unicode-bidi和direction这两个CSS属性不受all属性影响。

我们不妨反问一下,如果unicode-bidi和direction这两个CSS属性会受到all属性影响,那会出现什么问题呢?阿拉伯文的呈现形式是从右往左的,但是,direction属性的初始值却是ltr,即从左往右。如果all属性可以影响direction属性,那么执行all:initial的时候,这些阿拉伯文的网页文字全部都会变成从左往右呈现。大家可以想象一下我们的中文网页上的中文内容全部从右往左显示是什么样的,我敢保证,使用阿拉伯文的前端开发者绝对不会使用这个all属性的,all属性在阿拉伯文中从此名存实亡。

于是答案就出来了,之所以direction属性不受all影响,是因为当年direction属性设计失误,将其初始值设为了ltr,而不是auto。现在为了照顾从右往左阅读的场景,direction属性就被设计成不受all属性影响。

unicode-bidi属性是direction属性的“跟屁虫”,而且它的功能还挺强大的,可以精确控制每一个文字的呈现方向,只是离开了direction属性就没用。既然这两个CSS属性形影不离,那就把unicode-bidi属性加入不会受all属性影响的属性队列吧。

如果你对unicode-bidi属性不太了解,可以阅读《CSS世界》一书的第12章。