两个CSS新特性：告别文本域样式的魔法数字

在前端开发中，textarea（文本域）的样式处理一直是个让人头疼的小问题。设计师告诉你「这个文本域要显示三行文字」，于是你开始不断试错、调整像素值——也就是所谓的「魔法数字（magic numbering）」。好不容易调好了，设计师又说「字号改一下」，于是你之前的努力全部作废，又得重新试错。这段来自 YouTube 的教程分享了两个 CSS 新特性，能够彻底解决这类痛点。

用 lh 单位精确控制行数高度

传统做法的核心问题在于：高度是用固定像素写死的，而文字的实际占用高度会随字号变化。一旦字号变动，之前基于旧字号计算出来的高度就不再准确。

解决方案是 lh 单位——它代表当前元素的行高（line-height）。当你把文本域的高度设置为 3lh 时，无论字号如何变化，高度都会自动匹配三行文字所需的空间。

「用了这个单位，如果我改变字号，高度依然会始终匹配三行文字，非常完美，这是个很不错的胜利。」

这意味着你不再需要每次改字号都重新计算高度。字号和行高联动，lh 单位帮你把这层关系自动化了。

用 min-block-size 替代 height

作者建议，如果要用这个技巧，最好不要直接设置 height，而应该使用 min-height，甚至更进一步用它的逻辑属性 min-block-size。

block-size 对应的是块轴方向（在常规书写模式下就是上下方向）的尺寸，是 height 的逻辑属性变体。使用逻辑属性的好处在于，它能更好地适配不同书写模式（如从右到左、垂直排版等）的布局需求。

而选择「最小高度」而非「固定高度」，则是为了配合下面要讲的第二个特性——让文本域能够随内容自动增长。

lh 单位是 CSS Values and Units Module Level 4 引入的相对长度单位，于 2023 年前后在主流浏览器中获得支持（Chrome 108+、Firefox 120+、Safari 17.2+）。与之类似的还有 rlh（root line-height），它相对于根元素 <html> 的行高计算，而 lh 则相对于当前元素自身的 line-height 值。如果某元素未显式设置 line-height，浏览器会使用其继承或默认值（通常为字号的 1.2 倍左右）来计算 lh 的实际像素量。这一设计使得 lh 天然与字体排印系统保持联动，特别适合需要按「行数」而非「像素」来表达高度意图的场景。

field-sizing 让文本域自动扩展

第二个特性是 CSS 中的 field-sizing: content。设置之后，当用户在文本域中输入更多文字时，文本域会随着每一行的增加自动变高，而不是出现内部滚动条。

「现在如果我加入更多行文字，文本域会随着每一行自动变大……这在做聊天应用或其他需要可扩展文本域的场景中特别有用。」

这个能力在过去需要相当数量的 JavaScript 来实现——通常要监听输入事件、计算内容高度、动态调整元素尺寸。而现在，字面意义上只需要一行 CSS 就能搞定。

把 min-block-size: 3lh 和 field-sizing: content 结合起来使用，你就得到了一个既保证初始显示三行、又能随内容平滑扩展的文本域，代码量极小且逻辑清晰。

field-sizing 是一个专门作用于表单控件的 CSS 属性，目前处于 CSS UI 规范的草案阶段。其默认值为 fixed，即控件保持设定的固定尺寸（传统行为）；设为 content 后，控件的尺寸改由内容决定，类似于普通块级元素的 width: max-content 逻辑。除 <textarea> 之外，该属性也可应用于 <input> 等其他表单元素，例如让单行文本框随输入字符数自动伸缩宽度。截至 2024 年，Chrome 123+ 已支持该属性，但 Firefox 和 Safari 尚未跟进，因此在生产环境使用时仍需准备 JavaScript 降级方案（如监听 input 事件并动态调整 height），或通过 @supports (field-sizing: content) 进行特性检测，按需增强。

为什么这两个特性值得关注

这两个特性看似是很小的改进，却精准命中了日常开发中的高频痛点。lh 单位消除了字号与高度之间的手动同步负担；field-sizing 则把一个原本需要 JS 逻辑的交互能力下沉到了 CSS 声明层面。

对于聊天界面、评论框、富文本输入等场景，可自动扩展的文本域几乎是标配需求。用纯 CSS 实现意味着更少的运行时代码、更好的性能，以及更容易维护的样式逻辑。

需要提醒的是，field-sizing 属于较新的 CSS 特性，在实际项目中使用前建议确认目标浏览器的兼容性情况，必要时保留降级方案。但趋势很明确：越来越多曾经依赖 JavaScript 的布局与交互能力，正在被原生 CSS 逐步接管。