Web无障碍 | 锤子前端

《CSS 单位完全参考手册》

Wed, 02 Sep 2026 13:28:01 GMT

《CSS 单位完全参考手册》

标签：
#前端开发 #CSS #响应式设计 #Web排版 #容器查询 #视口单位 #字体相对单位 #CSS数学函数

总结：

这是一本由 Mykola Ptushchuk 编写的交互式 CSS 单位参考手册，涵盖从基础像素到现代容器查询单位的所有 CSS 度量单位。全书共 7 章，每个单位都配有实时浏览器演示，可在线调整参数观察实际效果，并提供完整 PDF 下载。

文章要点：

1. 全书结构清晰，覆盖七大单位家族：从绝对单位（px）、字体相对单位（em/rem/ch/cap 等）、视口单位（vw/vh 及小/大/动态视口变体）、容器查询单位（cqi/cqw 等）、百分比、数学函数，到角度单位，形成完整的 CSS 度量体系地图。

2. 视口单位家族详解：现代移动端浏览器 UI 会动态收缩/展开，因此视口单位分为默认（等价于大视口）、小视口（sv，假设浏览器控件展开）、大视口（lv，假设控件收起）和动态视口（dv，实时状态）四大家族，解决了 100vh 在移动端全屏布局中常见的"被地址栏遮挡"难题。

3. 容器查询单位让组件真正可移植：cqi/cqw 等单位测量的是组件所在的"查询容器"而非整个视口，使同一个卡片组件在 300px 侧边栏和 700px 主栏中能自动呈现不同布局，无需媒体查询或额外类名，实现了"组件响应自身上下文"而非"响应整个页面"的范式转变。

4. 字体相对单位不止 em/rem：除了常见的 em（当前元素字体大小）和 rem（根元素字体大小），还有 ch（数字 0 的字宽，适合设置最佳阅读行宽如 65ch）、cap（大写字母高度，适合图标与标题对齐）、lh（当前行高作为长度）等精细排版单位，以及对应的根元素变体（rch/rex/rcap 等，2026 年 1 月才在 Firefox 中补齐，至此全浏览器支持）。

5. CSS 数学函数是单位的粘合剂：calc() 可混合不同单位（如 100% - 240px），clamp() 实现流体排版（如 clamp(2rem, 5vw + 1rem, 4rem)），min()/max() 取极值，还有三角函数（sin/cos/tan）可用于无 JS 的圆形布局，指数函数（pow/sqrt）可构建模块化字号比例系统。

6. 实用选型建议：正文用 rem 尊重用户偏好，组件内部比例用 em 保持缩放一致性，line-height 推荐无单位写法（如 1.5）以便作为乘数继承，clamp() 的流体值中务必包含 rem 项以确保缩放无障碍性。

7. 交互式学习体验：每个单位都配有可拖拽、可滑动的实时演示，直接在浏览器中观察单位变化效果，将抽象概念转化为直观体验，并支持下载完整 PDF 离线阅读。

URL：
https://cssunits.com/

CSS Units

CSS Units — The Complete Reference

A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw.

《hucre：零依赖的电子表格引擎》

Sat, 15 Aug 2026 13:03:55 GMT

《hucre：零依赖的电子表格引擎》

标签：
#Web开发 #TypeScript #电子表格 #Xlsx #Csv #Ods #数据转换 #零依赖 #流式处理 #数据验证 #无障碍访问

总结：

文章要点：
1. 核心定位：一个纯 TypeScript 编写的零依赖电子表格引擎，支持读写 XLSX、CSV、ODS、JSON、NDJSON、XML、HTML 等多种格式，可在 Node.js、Deno、Bun、浏览器、Cloudflare Workers 等任意平台运行
2. 极致轻量：完全支持 Tree Shaking，按需导入，CSV 模块仅 3.7KB gzip，完整库 129KB gzip，远小于 SheetJS（300KB）和 ExcelJS（500KB）
3. 多格式统一 API：通过 read() 自动检测格式，write() 支持 9 种输出格式（XLSX、ODS、CSV、TSV、JSON、NDJSON、XML、HTML、Markdown），大幅降低多格式处理的心智负担
4. 流式处理：支持 XLSX、CSV、NDJSON、ODS、XML 的流式读写，可处理百万级数据而不爆内存；300万行 XLSX 流式写入峰值内存仅 70MB，而增量写入器需要 1GB+
5. 功能全面：支持单元格样式、条件格式（13 种）、数据验证、超链接、图片（含 SVG）、图表（柱状/折线/饼图等）、数据透视表、迷你图、冻结窗格、密码保护、Excel 2024 原生复选框、模板引擎等
6. 往返保真：openXlsx/saveXlsx 路径可保留图表、VBA 宏、切片器、时间线过滤器等 hucre 不原生建模的部分，实现无损编辑他人文件
7. 数据验证与无障碍：内置 Schema 验证（类型强制、正则、枚举、范围），以及 WCAG 2.1 AA 无障碍审计（对比度检查、缺失替代文本、表头检测等）
8. 遗留格式支持：可读取 XLS（Excel 97-2003）和 XLSB（二进制 Excel）文件，自动检测格式
9. 开发体验友好：提供 Builder API 链式调用、对象简写读写（readObjects/writeObjects）、CLI 工具（格式转换、检查、验证）、单元格工具函数（行列转换、范围解析）
10. 明确的能力边界：不实现公式计算引擎、不支持 XLS/XLSB 写入、部分高级图表类型（气泡图/雷达图等）仅支持读取和往返、流式 ODS 写入不带样式

URL：https://github.com/productdevbook/hucre

GitHub

GitHub - productdevbook/hucre: Zero-dependency spreadsheet engine. Read & write XLSX, CSV, ODS. Pure TypeScript, works everywhere.

Zero-dependency spreadsheet engine. Read & write XLSX, CSV, ODS. Pure TypeScript, works everywhere. - productdevbook/hucre

《别在 div 和 span 上乱加 aria-label》

Sat, 30 May 2026 00:06:23 GMT

《别在 div 和 span 上乱加 aria-label》

标签：#前端 #Web无障碍 #ARIA #屏幕阅读器 #HTML语义化

总结：
本文通过实测数据揭示了在 div、span 等 generic 角色元素上使用 aria-label 的严重兼容性问题。ARIA 规范明确禁止为 generic 角色命名，而各屏幕阅读器的表现更是天差地别——有的只读标签、有的只读内容、有的两者都读、有的干脆忽略。这种不一致会让依赖辅助技术的用户获得错误信息，属于典型的"好心办坏事"。作者指出 section 和 popover 是例外，前者加标签会自动升级为 region 地标，后者角色会变为 group。

文章要点：
1. ARIA 规范 5.2.8.6 明确把 generic 角色列入"禁止命名"清单，div 和 span 默认就是这个角色
2. 实测 8 组屏幕阅读器+浏览器组合，对带 aria-label 的 div announcement 结果五花八门：VoiceOver 读"News, group"、TalkBack 只读"News"、JAWS/NVDA 完全忽略标签只读内容
3. 空 div 的测试结果更混乱，有的读"News, empty group"、有的完全静默，无法预测用户会听到什么
4. 这种不可预测性对屏幕阅读器用户是灾难性的——你以为在帮忙标注，实际上可能覆盖了真正有用的内容
5. 例外情况：section 元素加 aria-label 会自动从 generic 升级为 region 地标，这是规范允许的；带 popover 属性的 div 角色会变为 group，加标签也合法
6. 正确做法：需要可访问名称时，优先使用语义化标签（如 button、nav）或显式设置 role，而不是在裸 div 上硬塞 aria-label

URL：https://www.matuzo.at/blog/2026/aria-label-generic-elements

Manuel Matuzovic

Don't put aria-label on generic elements like divs

I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.