前端共6篇
设计令牌的最小实现:一个颜色变量驱动全站(附阅读进度条)-知集

设计令牌的最小实现:一个颜色变量驱动全站(附阅读进度条)

设计令牌的最小可用形态只有三层:一个色值源头、一组派生纯函数、一堆 CSS 变量引用。本文讲清它为什么值钱、hex 解析必须兜住的边界(写错会让全站 var() 静默失效),以及一条 3px 进度条里...
lixiansen的头像-知集lixiansen17天前
02214
内联 CSS 的真实代价:一次把「省 25.6%」证伪的实测-知集

内联 CSS 的真实代价:一次把「省 25.6%」证伪的实测

16 个内联样式块、占页面 21% 的体积,合并到底能省多少?孤立测量说 14%~31%,整页 A/B 说 0.15%~0.36%。本文给出正确口径、线上实测数据,以及把 N 个散点收成「可缓存出口」的零依赖收集器。
lixiansen的头像-知集lixiansen17天前
04013
勋章活动的三个静默失败:时区、正则、角标-知集

勋章活动的三个静默失败:时区、正则、角标

限时三选一勋章活动上线当天连报三个「不生效」:后台设了时段不触发、开始日填了横幅不出现、领取成功角标不动。三个问题都不报错不留日志。本文逐一还原根因并给出修法,附 49 项单测与零依赖...
lixiansen的头像-知集lixiansen17天前
02512
一个 81 行的朗读按钮改了三轮:三个静默失效的坑-知集

一个 81 行的朗读按钮改了三轮:三个静默失效的坑

文章朗读按钮的核心代码不到 100 行,却踩了三个静默失效的坑:cssText 整体覆盖抹掉 innerHTML 的 display:none、硬编码白底在夜间模式消失、只在 boot 判定一次视口导致缩放后不搬家。附零依...
lixiansen的头像-知集lixiansen17天前
04412
用 alt 后缀驱动的 WordPress 密集墙排版:从 float 到 flex-wrap 与纵向叠列-知集

用 alt 后缀驱动的 WordPress 密集墙排版:从 float 到 flex-wrap 与纵向叠列

本文记录 zibll 子主题「图片宽度排版」模块的完整落地过程:alt 后缀语法设计、为何必须弃用 float、叠列分组算法、线上实测数据与 7 条静默失效的踩坑记录。
lixiansen的头像-知集lixiansen17天前
0429
当主题模板没有过滤器:把「字数+阅读时间」并进它的 meta 行-知集

当主题模板没有过滤器:把「字数+阅读时间」并进它的 meta 行

主题文章头部那行 meta 是硬编码的、没有 apply_filters,插不进新项。本文给出第三条路:服务端渲染自己的块,客户端把子项逐个搬进目标行,搬不动就原地保留。附中英混排字数口径、三层测试与...
lixiansen的头像-知集lixiansen17天前
0475