#设计
18 篇
CSS 有了 if()：条件样式不用再靠媒体查询叠罗汉
Chrome 137 起支持 CSS 的 if() 函数，可以在任意属性值里写条件分支，按自定义属性、媒体查询或特性支持来选择值。它不替代媒体查询，但能把大量重复的样式块收成一行。
用 CSS 做半调网点与套印错位
印刷感不是滤镜，是三个可量化的东西：网点角度、套印偏移、油墨透明度。用 repeating-conic-gradient 和 mask 拼出来，全程不加图片。
CSS 开始有函数和条件了：@function 与 if()
CSS 新增的 @function 与 if() 把「一个组件多种状态」从媒体查询复制粘贴里解放出来。两者都还没到 Baseline，但值得先看懂它们替代了什么。
text-box-trim 能用了：把标题上下的空白削掉
行盒总比字高，标题上方那半行空白一直靠负 margin 硬抠。Baseline 之后 text-box-trim 一次修好，代价是接受它按字体度量裁切。
把一座 Three.js 浮岛搬进静态站
浮岛页只下载自己那一份脚本。场景在运行时现算，Three.js 与整个三维世界都留在这一页的 chunk 里，首屏 HTML 里只有一个空舞台。
不建模也能有体积：手工三角化一座浮岛
岛上的岩石不是从建模软件导出的，是五层不规则环带在运行时拼出来的。顶点色加平面着色，就足够让一块几何体看起来像被凿开的石头。
一个场景的光：三种灯与只算一次的阴影
半球光给环境色，主光给方向与阴影，轮廓光把岛从背景里拉出来；其余六个灯笼只是点光。阴影贴图只算一次，因为它照的东西一动不动。
两个着色器做水：水洼、溪流与瀑布
岛上没有水面模拟，也没有反射。两个 ShaderMaterial 分别负责平躺的水与竖直落下的水，共用一组 time 与 night 变量。
sibling-index() 和 sibling-count()：CSS 终于知道自己是第几个
Firefox 154 让这两个函数进入 Baseline。它们返回当前元素在兄弟中的序号和兄弟总数，于是错落动画、按序配色、均分尺寸都能在 CSS 里算完，不必再给每个元素挂一个内联样式或 CSS 变量。
autocorrect 属性：把「要不要自动纠错」还给页面
Chrome 152 支持了全局 autocorrect 属性，Safari 与 Firefox 早就有，于是它进入 Baseline。这篇讲它和 spellcheck 的区别、为什么这个属性以前只能靠私有前缀、以及什么场景下该关掉它。
用 @layer 把样式优先级从「比权重」变成「排顺序」
样式失控的根源不是选择器写得不够具体，而是所有人都靠加权重解决问题。级联层让顺序显式化：层与层之间比顺序，层内部才比特异性。
锚点跳转被页头吃掉：一次 scroll-padding-top 修全站
吸顶页头会盖住锚点目标，逐个标题写 scroll-margin 迟早漏。正确的位置是滚动容器上的 scroll-padding-top，再用 ResizeObserver 把真实页头高度写回令牌。
模态框用原生 dialog：白拿的东西比想象中多
自己搭模态要手写焦点陷阱、ESC、滚动锁与返回焦点。原生 dialog 配 showModal 全部内置，还能用 ::backdrop，代价只有一条样式继承规则。
深色模式下表单还是白的：color-scheme 才是开关
把背景涂黑不等于原生控件跟着黑。select 的下拉、日期选择器、自动填充的底色都由 color-scheme 决定，accent-color 只管住勾选框与滑块。
设计令牌：一个文件管住整个站点
为什么我把颜色、间距、圆角全部收进 _tokens.scss，以及换一套视觉方向为什么只需要改这一个文件。
不用框架的 i18n：双语站点手写路由的代价
这个站点的手写 i18n 没用框架自带的配置。说说为什么，以及代价具体出现在哪里——两次 404，和一半没翻的文章。
把孔版套印的约束翻译成设计令牌
这个站点的视觉方向是孔版套印。我真正做的事是把印刷的物理限制写成令牌，于是换观感只动了两个文件，组件一行没改。
用 View Transitions 做主题切换水波纹
主题切换时用一个从点击点扩散的圆揭示新主题。半径要够到屏幕最远的角，动画结束必须清掉自定义属性，否则会污染下一次。