为什么 CSS 中没有宽度和高度的简写属性？答案

【问题标题】：Why isn't there a shorthand property for width and height in CSS?为什么 CSS 中没有宽度和高度的简写属性？
【发布时间】：2018-04-25 08:22:44
【问题描述】：

在 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;

【问题讨论】：

更快，我的意思是打字时更快。使用“尺寸：100px 250px;”在这种情况下，比“width: 100px; height: 250px;”短 5 个字符。与两个属性相比，它可以写在一个属性中（尺寸 vs 宽度 + 高度）。

标签： css height width shorthand

【解决方案1】：

简短回答：CSSWG 尚未就速记属性的名称达成一致。

这个想法并不新鲜，多年来很多人不时提出它。但是，CSSWG（CSS 工作组）目前有一个提案[css-sizing] Adding a 'size' shorthand for 'width'/'height'。

很多事情已经讨论过了，但还有一些没有解决。以下是一些示例：

正确的名称是什么？

建议的一些名称：

size：与@page 的size-property 冲突
dimensions: 可能太长或难以拼写
box-size：可能太接近box-sizing

它将如何运作？

应该是：

<box-size>: <width> <height>?

…或更接近于其他属性，例如padding 或margin：

<box-size>: <height> <width>?

另外：它是否应该支持一个额外的参数来保持纵横比？

谁来支持它？

哪些供应商将支持该提案和语法本身？
它会增强作者的体验，让人们真正使用它吗？

正如你所看到的，正如 CSSWG 最近在他们的Minutes Telecon on 2017-08-16 中所说的那样，未来可能会有一个速记符号：

小组一致认为“宽度”/“高度”的简写会很好，但不应称为“大小”。但是，没有时间想出一个不同的名字。

话虽如此，您当然可以使用 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%;

【讨论】：

【解决方案2】：

是个好主意，但目前官方规范不允许这样做。

就是这样。

【讨论】：

【解决方案3】：

我的建议（只是一个意见/PoV）是：将size 替换为所选元素的height 和width 的简写。

例子：

size: <height> <width>;
size: 420px 297px;
size: 100% 50%;
size: 15rem 5em;

现在关于size 与@page 一起使用的先前属性应更改为page-size。

例子：

来源：MDN Web Docs

/* Keyword values for scalable size */
page-size: auto;
page-size: portrait;
page-size: landscape;

/* <length> values */
/* 1 value: height = width */
page-size: 6in;

/* 2 values: width then height */
page-size: 4in 6in;

/* Keyword values for absolute size */
page-size: A4;
page-size: B5;
page-size: JIS-B4;
page-size: letter;

/* Mixing size and orientation */
page-size: A4 portrait;

【讨论】：