技术文章 Jake Archibald 2026/10/15
文章用自建基准脚本，在 M4 Pro 上系统对比 AVIF（avifenc 1.4.2）与两种 JPEG XL 编码器（libjxl 0.12.0 的 cjxl、jixel 0.4.2），覆盖有损照片、截图、插画、透明图、HDR、无损、渐进渲染以及小图与 18MP 大图等场景。核心结论：有损照片 AVIF 通常文件更小，默认努力下最佳 JPEG XL 大 15–25%，最高努力下差距收窄到 6–20%；截图与插画 AVIF 优势更大（大 30–90%）；透明通道、编码速度、内存占用与解码时间 AVIF 也普遍占优。JPEG XL 在无损压缩上明显胜出，可无损再压 JPEG 9–20%，且 jixel 在个别图像（如 weasel）能反超 AVIF。作者建议 Web 场景默认选 AVIF 4:4:4 并尽量提高努力等级，遇到超大文件再试 jixel。文中也提醒 SSIMULACRA2 与 ColorVideoVDP 两个度量在部分图像上判断不一致，HDR gain map 与动画格式仍是明显局限。
推荐收录：文章用统一脚本、多张代表性图像和明确的编码器版本做可复现对比，给出文件大小、编码时间、峰值内存与解码速度的量化数据，而非泛泛结论，能直接支撑 Web 图像格式选型。适合做前端性能优化、图片管线与资源压缩的工程师，其中度量指标选择、努力等级权衡和“先 AVIF、异常时再试 jixel”的决策方法可迁移到类似场景。主要风险是结论依赖当前实现版本且来自个人基准，落地前需用自己的图像复测。
技术文章 Jake Archibald 2026/08/26
文章深入探讨了 CSS 自定义属性的计算时机，指出未注册的自定义属性默认按 token stream 保存，var() 替换后才会在消费处计算；而通过 @property 注册并指定 syntax 后，自定义属性会在声明处提前计算，导致结果取决于上下文。作者用 sibling-index() 函数和 getComputedStyle() 验证了两种行为的差异，并说明该影响也涉及相对字体单位、容器查询单位以及 URL 解析基准。文章还通过嵌套 var() 的例子展示了任意替换函数的立即替换特性与 syntax 的交互，揭示了 --multiplier 在子元素上的覆盖被忽略的行为。内容以实例为主，边界清晰，对于理解 CSS 变量计算模型很有帮助。
文章用具体可复现的示例清晰解释了 CSS 自定义属性计算时机的微妙规则，是浏览器实现细节和规范行为的解读，具有长期参考价值。适合前端开发者、CSS 库作者和浏览器兼容性研究者阅读，能帮助理解 @property 注册对计算语义的影响并规避相关陷阱。
技术文章 Jake Archibald 2026/07/28
文章记录了一次工具提示（tooltip）无障碍（accessibility）实现错误及修复过程。作者在制作基于popover='hint'的图标按钮提示时，初始使用aria-describedby将按钮与提示相关联，但因提示文字重叠导致屏幕阅读器重复朗读，便错误地移除了按钮的aria-label，使按钮失去可访问名称。在专家反馈后，作者将aria-describedby改为aria-labelledby，直接从提示元素获取可访问名称，解决了朗读重复和语义缺失问题。文中还讨论了分割标签与描述的备选方案，并强调需用多个屏幕阅读器测试以避免单一工具遗漏问题。本文适合需要为SVG图标按钮提供无障碍说明的前端开发者，明确区分了两个ARIA属性的适用场景与边界。
本文通过作者亲身踩坑案例，清晰对比了aria-describedby与aria-labelledby的无障碍语义差异，直接展示了从错误到修复的完整过程与测试依据，对前端开发者编写可访问的图标按钮、工具提示具有直接可迁移的指导价值。尤其适合关注Web无障碍实践与屏幕阅读器兼容性的开发者参考。
技术文章 Jake Archibald 2026/06/29
文章围绕可定制 select 的下拉面板高度设计，提出一套“既不贴边、也不过小、还不过大”的 CSS 方案。作者先解释浏览器默认的 anchor positioning、max-block-size: stretch、position-try-fallbacks 等行为，再逐步用 viewport margin、最小/最大高度约束改善交互。核心难点在于不同浏览器对百分比高度、翻转边距和 intrinsic size 的支持不一致，因此文章引入 calc-size() 把 fit-content 和 stretch 这类内在尺寸纳入 min()/max() 计算。文中还给出 Firefox/Safari 的降级写法，以及在选项较少时避免“最小高度反而显得难看”的补丁。整体内容适合需要做现代表单控件、CSS 适配和跨浏览器布局调优的前端开发者参考，但其中部分最佳方案仍受浏览器支持度限制。
有明确的可复用代码和浏览器差异分析，不是泛泛介绍新特性，而是解决 select picker 高度控制的具体工程问题。适合前端开发者在做可定制表单控件、CSS 新特性落地和跨浏览器降级时直接借鉴。