我盯了八年表单，每次输入框高度都要靠 JS 硬算——今天 field-sizing: content 把这件事彻底原生化了

做表单最烦的一件事：textarea 的高度要跟着内容跑。以前只有两种解法——写一堆 JS 监听输入事件，或者固定高度然后滚动条。

Chrome 123 上线了一个属性叫 field-sizing，就一个值，但它把表单尺寸这件事彻底还给了浏览器：

textarea {
  field-sizing: content;
  width: 200px;
  min-height: 40px;
}

加了这一行，输入框自己会算高度，回车换行它就往下撑，JS 监听输入事件算高度的套路直接作废。

input 也同理：

input {
  field-sizing: content;
  min-width: 100px;
  max-width: 300px;
}

宽度自适应内容，但又不会无限撑开——min-width 和 max-width 照常生效。这在标签输入、即时搜索框、评论区这种场景特别舒服：内容少就短，内容多就长，不用写一行 JS。

另一个被 JS 抢了八年的活：Grid/Flex 间隙里的装饰线。

以前想给 gap 区域加点样式，标准做法是套一层 div 写 ::after，或者给每个子元素加边框再叠掉。代码绕了一圈，DOM 还多了一堆无用节点。

Chrome 149 终于把这件事原生化了——column-rule 和 row-rule 直接画在 gap 上：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  column-rule: 1px dashed #ccc;
  row-rule: 1px solid #eee;
}

不只是 column-rule，还有三个配套属性控制细节：

• column-rule-inset / row-rule-inset：把线条往里缩一点，不撑满整个间隙
• column-rule-visibility-items / row-rule-visibility-items：只在有相邻元素的地方显示线条，边缘不画

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  row-rule: 1px solid rgba(0,0,0,0.08);
  row-rule-visibility-items: adjacent;
}

线条的宽度、颜色、inset 全都支持动画，hover 的时候变颜色、加粗，一个 @keyframes 都不用写：

.card-list:hover {
  row-rule-color: rgba(59, 130, 246, 0.3);
  row-rule-width: 2px;
  transition: row-rule-color 0.2s, row-rule-width 0.2s;
}

不支持的浏览器会正常渲染没有装饰线的 gap，属于天然渐进增强，不用写 @supports。

这两件事放在一起看有个共同点：以前靠 JS 算出来的”响应式”和”动态布局”，浏览器现在自己有感知能力了。

表单高度是内容驱动的，间隙装饰是布局驱动的——它们本质上都是”容器/内容的状态”，CSS 终于有原生的途径去读、去响应。

下一步：翻一下项目里有没有 textarea 的高度监听和 gap 的伪元素装饰，能删的可以删了。Chrome 123+ 和 Chrome 149+ 直接用，生产兼容基本不用操心，Safari 和 Firefox 跟进也只是时间问题。