平时写代码，大家聊的不是 React Hooks 就是 Webpack 优化。但有时候，真正能体现一个前端“底蕴”的，反而是那些藏在规范角落里的冷门细节。今天翻箱底找了几个有趣的冷知识，内容涵盖从浏览器考古到现代 CSS 骚操作，建议收藏，关键时刻能拿出来“装一装”。
1. Doctype：其实是个“复古”开关
现在大家写 HTML，第一行雷打不动都是 <!DOCTYPE html>。很多人以为这是在声明 HTML5 版本，其实并不是。
早期的浏览器为了兼容那些远古时期的网页，搞出了怪异模式（Quirks Mode） 。如果你不写这行 Doctype，或者写错了一个字符，浏览器就会瞬间“穿越”回 IE5 时代。这时候你会发现：盒模型变了（width 竟然包含了 padding）、行内元素高度乱了。所以，这行代码的真实作用是给浏览器打个信号：“别整那些老古董渲染了，按现代标准来”。
2. 文本描边的“正确姿势”：paint-order
如果你用过 -webkit-text-stroke 给文字做描边，肯定被它坑过：边框一旦粗一点，就把文字颜色给“吃”掉了，因为它的描边是往内伸缩的。
其实 CSS 里藏着一个从 SVG 借来的属性：paint-order。
.hero-text {
-webkit-text-stroke: 8px #000;
paint-order: stroke fill; /* 先画边框，再填颜色 */
color: #fff;
}
加上 paint-order: stroke fill;，浏览器就会先画边框再填色，这样不管你把描边设多粗，文字本身都能清晰露出来。
3. inert：封印元素的终极杀招
做弹窗（Modal）最头疼的就是“焦点陷阱”——用户按 Tab 键，焦点会穿过弹窗跑到背景页面的按钮上。以前我们得手写一大堆逻辑去拦截键盘事件，或者手动改 tabindex。
现在 HTML 出了个原生属性 inert。只要给父容器加上它，这个容器里所有的链接、按钮就全部被“封印”了：点不动、Tab 跳不过去，甚至连屏幕阅读器也会直接无视它。简单粗暴，非常适合处理那种全局禁用的场景。
<main id="content" inert>
<!-- 当弹窗出现时，这里的一切交互都被冻结了 -->
</main>
4. sendBeacon：埋点统计的“离别礼”
在用户关闭页面时发最后一条埋点，是出了名的“玄学”。用 fetch 或 axios 很容易被浏览器直接掐断，用同步请求又会让页面关不掉，用户体验极差。
navigator.sendBeacon 就是专门干这活的。它的牛逼之处在于：即使页面已经销毁了，浏览器也会在后台默默把数据传完，而且完全不占主线程。这才是处理页面卸载数据上报的“正道”。
5. UA 字符串里的“套娃”大戏
如果你去打印一下 Chrome 的 User-Agent，会发现它长得像一段乱码，里面竟然还写着 Safari、AppleWebKit 甚至 Mozilla。
这其实是一部长达 20 年的“欺诈史”。当年 IE 为了骗过只支持 Mozilla 的网站，自称是 Mozilla；后来 Chrome 为了骗过只支持 Safari 的网站，把自己也加上了 Safari 的标识。就这样层层套娃，导致现在的 UA 字符串成了一个谁都不敢乱动的历史遗迹。
6. 终于能告别 Padding Hack 的 aspect-ratio
以前为了做一个自适应比例的容器（比如 16:9 的视频），我们得用 padding-top: 56.25% 这种极其别扭的“Padding Hack”。
现在现代浏览器都支持 aspect-ratio 了。代码直观得感人：
.video-box {
width: 100%;
aspect-ratio: 16 / 9;
}
再也不用去算那个该死的百分比了。
结语： 前端不只有那些大而全的架构，这些细碎的、带着历史气息或奇思妙想的小知识，才是这个领域有趣的地方。下次和人讨论技术时，不妨顺带聊聊这些。
