12 个现代 CSS 一行升级，你学会了吗

大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。

本期共享的是 —— 那些我们可以开始使用或提前预习的 CSS 现代属性。

有时，优化我们 App 的 CSS 只需要一行代码就能升级或增强！了解 12 个现代化属性，将其合并到项目中，享受减少技术债务、删除 JS，以及轻松赢得用户体验的乐趣。

本文会科普 3 种不同兼容性的属性：

• 稳定升级：通过替换旧技术，修复 hack（奇技淫巧）或问题
• 稳定增强：通过良好支持的现代属性，提供改进的体验
• 渐进增强：在支持这些属性时提供升级的体验，但不会尚未支持的浏览器中造成损害

稳定升级

以下支持良好的属性可以替换旧技术，辅助修复 hack或长期存在的顽瘴痼疾。

aspect-ratio

您是否曾经遭遇视频嵌入，强制采用 16:9 等宽高比的需求？截至 2021，aspect-ratio 属性在常青浏览器中保持稳定，并且是定义宽高比所需的唯一属性。

对于高清无码视频，我们可以只使用 aspect-ratio: 16/9 一行代码搞定。对于完美平方，只需要 aspect-ratio: 1，因为隐含的第二个值也是 1。

/* 16:9 高清无码 */
.aspect-ratio-hd {
  aspect-ratio: 16/9;
}

/* 正方形 */
.aspect-ratio-square {
  aspect-ratio: 1;
}