博客 · 第 14 页
关于工程、设计与一些随手记录。
锚点跳转被页头吃掉:一次 scroll-padding-top 修全站
吸顶页头会盖住锚点目标,逐个标题写 scroll-margin 迟早漏。正确的位置是滚动容器上的 scroll-padding-top,再用 ResizeObserver 把真实页头高度写回令牌。
模态框用原生 dialog:白拿的东西比想象中多
自己搭模态要手写焦点陷阱、ESC、滚动锁与返回焦点。原生 dialog 配 showModal 全部内置,还能用 ::backdrop,代价只有一条样式继承规则。
深色模式下表单还是白的:color-scheme 才是开关
把背景涂黑不等于原生控件跟着黑。select 的下拉、日期选择器、自动填充的底色都由 color-scheme 决定,accent-color 只管住勾选框与滑块。
页头多高不该猜:ResizeObserver 实测回写 CSS 变量
导航换行、字体晚到、内容长度变化都会让元素高度和 CSS 里的常量对不上。ResizeObserver 观察元素本身,把实测值写回变量,比监听 resize 可靠。
设计令牌:一个文件管住整个站点
为什么我把颜色、间距、圆角全部收进 _tokens.scss,以及换一套视觉方向为什么只需要改这一个文件。
不用框架的 i18n:三语站点手写路由的代价
这个站点的手写 i18n 没用框架自带的配置。说说为什么,以及代价具体出现在哪里——两次 404,和一半没翻的文章。
