你从未听说过的新（旧）CSS 单位

现在有一些更有趣的事情......

JavaScript 近年来发展迅速，但其他 Web 开发语言也并非一成不变。

CSS 也在不断发展，尽管 Houdini 很可能会在 CSS 开发领域取得新的突破，但遗憾的是，它还远远没有被广泛采用。所以我们照例要召开专家会议，制定新的规范等等……虽然不像 TC39 那样快节奏，但仍然如此。

说到 CSS，你可能——但更有可能——听说过，甚至很少用到，本文中描述的是这些单位。而且，它们不像“老”的vwand vh（我碰巧仍然需要向那些不太精通 CSS 的人解释它们）。

下面列出的是即将在CSS 值和单位模块级别 4中指定的新 CSS 单位。

lh和rlh

事情从一开始就很有趣。lh等于当前行高，这在计算文本内容的高度时会非常有用。可惜的是，没有浏览器支持它。

rlh另一方面，相当于rem：em根元素上的行高。

vi和vb

另一个有趣的补充是，与vw和类似vh，它们是相对于视口的百分比。具体来说：

• vi是内联方向视口尺寸的1% ；
• vb是块方向上视口大小的 1% 。

这些“行内”轴和“块”轴是什么？对于那些水平书写的语言，比如英语或阿拉伯语（以从右到左为例），它们分别是水平和垂直方向，这两个单位相当于vw和vh。

但对于那些垂直书写的语言（比如日语），这些方向就会改变。

我们从一开始就在 CSS 中使用了这种区别（例如在display属性中），因此现在随着更多语言感知的 CSS 规范的创建，它们被一致地使用。

太糟糕了，没有浏览器，再说一次，到目前为止支持这些单元👎。

ic

谈到国际化，ic是东方的等价物ch，代表字符的大小0。ic而是 CJK（中文/日文/韩文）表意文字水（“水”，U+6C34）的大小，因此可以粗略地解释为“表意文字数量”。

但是这个“尺寸”是什么呢？它就是所谓的“预置尺寸”：如果文本水平排列，则为宽度；否则为高度。注意，同样的概念也适用于ch！

但仍然没有得到浏览器供应商的支持。

cap

它是所谓的大写字母高度 (cap-height)的度量单位。规范将大写字母高度定义为“约等于一个大写拉丁字母的高度”。即使对于不包含拉丁字母的字体，也有一个算法可以计算出这个高度，但我就不详细讲解了。

另外，我们还不能在任何浏览器中使用它们。

现在有一些更有趣的事情......

让我们看一下较旧的规范（级别 3），因为即使它应该得到广泛的支持和使用，它仍然有一些鲜为人知的部分......

turn和兄弟们

这是为了让你热身，因为它应该比其他的更为人所知。

我们以前用 来deg旋转物体transform，对吧？嗯，1turn相当于 360 deg。就这么简单。这对于动画（尤其是 360 度旋转）和 JavaScript 计算的进度值非常有用。

等等，还有更多！还有grad和rad被指定，是的，你猜对了：它们分别是度和弧度。

它们都被每个浏览器（IE 9 及以上版本）支持，尽管我没有看到百分度的实际用途，而弧度可以直接用于 JavaScript 的三角函数。

Q

这个应该会被所有浏览器支持，因为它是 Level 3 的一部分。事实上，只有 Firefox 从相对较新的 49 版（2016 年 9 月）开始支持它。补充：Chrome 从 63 版开始也支持它。

那么，什么是Q？它只是0.25毫米，即四分之一毫米。

我们为什么觉得有必要这么做呢？显然，它是用于印刷排版的。在日本，他们显然不使用点或任何其他英制单位（这对我来说是👍）。

长宽比

它实际上不是一个单位，因为它应该是一个纯数值，但无论如何都是一种度量。它具体表示为两个正整数，中间用斜线/（Unicode 术语中为“斜线”）分隔。

我们可以在哪里使用它？当然是在媒体查询中！例如：

@media screen and (min-aspect-ratio: 16/10) {
  /* something for wide screens */
}

好消息是：所有浏览器都支持它！太棒了！🎉

Hz和kHz

... 等等，什么？我们高中学过的，这些不是频率单位吗？它们和 CSS 有什么关系？

回答这个问题：是的，确实如此；而且没有任何CSS 属性（正如我所写）需要频率。然而，频率单位已经被定义了：为什么？

或许是为了将来某个模块规范（针对语音合成或其他听觉输出）的需要。当时，实际上有一个CSS Aural 样式表模块正在开发中，它确实定义了一些利用频率的属性，但该模块从未面世。

该模块已被一个与语音合成标记语言 (SSML)兼容的新模块取代，该模块与CSS Speech的名称一致。它仍在开发中，并再次定义了voice-pitch需要频率的属性（例如），但尚未准备就绪。

因此，如果没有浏览器支持频率单位，这是可以理解的：无论如何我们都无法使用它们！

未来计划？

最后，亲爱的读者，您是否曾经使用过或计划使用上述设备之一？或者，您现在正在计划？