在 CSS 中编码时,为元素的宽度和高度使用较短的属性会不会更快?
截至目前,我必须输入:
selector {width: 100px; height: 250px;}
虽然速度很快,但我认为这会更快:
selector {dimension: 100px 250px;}
是否已经有可以实现此目的的 CSS 预处理器?似乎在处理大量宽度和高度时会节省一些时间。
一个很好的例子就是 CSS Grid属性:
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
相当于:
grid-template: 100px 100px / 100px 100px;
最佳答案
简短回答:CSSWG 尚未就速记属性的名称达成一致。
这个想法并不新鲜,很多人多年来不时地提出过这个想法。但是,目前有一个提案 [css-sizing] Adding a 'size' shorthand for 'width'/'height'来自 CSSWG (CSS 工作组)。
很多事情已经讨论过了,但还有一些没有解决。以下是一些示例:
什么是专有名称?
建议的一些名称:
size
:与@page
的size
属性 冲突
尺寸
:可能太长或难以拼写box-size
:可能太接近box-sizing
它将如何运作?
应该是:
<box-size>: <width> <height>?
...或更接近于其他属性,如 padding
或 margin
:
<box-size>: <height> <width>?
另外:它是否应该支持一个额外的参数来保持纵横比?
谁会支持它?
- 哪些供应商将支持提案和语法本身?
- 它会增强作者的体验,以便人们实际使用它吗?
如您所见,正如 CSSWG 最近在其 Minutes Telecon on 2017-08-16 中所说, future 可能会出现速记符号。 :
The group agreed that a shorthand for ‘width’/’height’ would be good, but shouldn’t be called ‘size’. However, there wasn’t time to come up with a different name.
话虽如此,您当然可以使用 CSS 预处理器,让您的生活更轻松。例如,我在 LESS 中有一个 mixin,看起来像这样:
.size(@a: null, @b: null) {
& when not (null = @a) {
width: @a;
}
& when (null = @b) {
height: @a;
}
& when not (null = @b) {
height: @b;
}
}
就这么简单:
.size(100%, 50%);
width: 100%;
height: 50%;
…它也支持方形元素:
.size(100%);
width: 100%;
height: 100%;
关于css - 为什么 CSS 中没有宽度和高度的简写属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47251011/