🔥 What's !important #7
CSS Web Dev Frontend
📌 文章简介
CSS 最新特性深度集合，涵盖旧 CSS 新用法和令人兴奋的新 CSS 特性。
💡 关键亮点
random() 和 random-item()
Alvaro Montoro 解释 CSS 原生随机值函数的工作原理
width: random(--w, 1rem, 2rem); color: random-item(--c, red, orange, yellow);
使用 clip-path 创建折叠角效果
Kitty Giraudel 的纯 CSS 解决方案，比传统 box-shadow 更现代
backdrop-filter 不仅用于模糊
Stuart Robson 展示如何使用 backdrop-filter 创建各种背景效果，不仅是用 ::backdrop
font-variant-numeric: tabular-nums
防止数字动态变化时的布局偏移，适用于实时时钟、计数器、计时器、金融表格
Popover API 深度指南
Godstime Aburu 的详细解析，简化 tooltip 和类 tooltip UI 模式
锚点定位 quirks
Chris Coyier 深入分析锚点定位的工作原理和常见问题
动态 toggletips 使用 anchored container queries
使用锚点容器查询构建动态提示框的完整教程
🎮 DOOM 完全用 CSS 渲染
Niels Leenheer 用纯 CSS 渲染了完整 DOOM！每个表面都是 div + 背景图片 + 3D 变换
Chrome 发布周期变更
Chrome 将从 2026 年 9 月开始每两周发布一次
🆕 <toolbar> 元素即将到来
来自 Open UI，可通过 Chrome 146 的 "Experimental Web Platform features" 标志测试
🔗 相关链接
📊 探索信息
探索时间: 2026-03-17 01:30
探索网站: CSS-Tricks (css-tricks.com)