That Time I Tried Browsing the Web Without CSS

动机：不只是好奇

作者从"禁用 JavaScript 一周"的实验获得灵感，转而思考：如果剥离 CSS，Web 还能用吗？Heydon Pickking 曾指出，关闭 CSS 是一种低成本的可访问性自检手段——语义化元素、默认视觉层级、内容逻辑顺序、<img> 标签是否独立于背景图，都会在无样式状态下暴露真相。WebAIM 2018 年的调查也显示，12.5% 的辅助技术用户会使用自定义样式表，甚至完全移除站点 CSS。除了无障碍场景，弱网环境和服务器故障也可能导致样式加载失败。因此"无 CSS 可用性"并非边缘案例，而是健壮性的必要组成。

如何禁用 CSS

Chrome：原生无此设置，需借助 disable-HTML 等扩展
Firefox：View > Page Style > No Style
Safari：先在偏好设置中开启 Develop 菜单，再 Develop > Disable Styles
Opera：同样依赖扩展，如 Web Developer
IE 11：View > Style > No style

Edge 缺乏文档化的禁用入口，但可以通过 CSSOM API 在 DevTools 控制台用代码强制移除：

var d = document;
for (var s in S = d.styleSheets)
    S[s].disabled = true;
for (var i in I = d.querySelectorAll("[style]"))
    I[i].style = "";

第一段循环禁用所有外部与内联样式表（<link> 和 <style>），第二段清除行内样式。需要注意的是，JS 仍可能动态注入新的行内样式，因此需要加一个 setTimeout 轮询来持续擦除。纯文本浏览器如 Lynx 则更为彻底，连图片、SVG、JS 一并剥离。

六站实测：无 CSS 的真实体验

作者依次体验了六个站点，每个站点都用截图记录了"有/无 CSS"的对比。核心观察如下：

Amazon — 首页轮播在失去 CSS 后把前后页内容堆叠在同一视口，广告反馈链接与正常导航混在一起，搜索结果页的赞助商品与自然结果完全交织，购物车页面的 "Cart" 与 "Proceed to Checkout" 链接挤成一行难以区分。

Amazon 首页有无 CSS 对比

DuckDuckGo — 首页尚可，但搜索框附近的链接连写在一起（run-on links），关闭按钮（X）只有第三个真正有功能，自动建议下拉失去定位。搜索结果页反而暴露了原本隐藏在 CSS 里的额外文本（如域名前缀），信息密度更高但也更杂乱。

DuckDuckGo 首页有无 CSS 对比

GitHub — 首页 "Why GitHub?" 下拉菜单展开后留下巨大空白，搜索结果中的仓库截图（大图）溢出浏览器窗口，需要大量横向滚动。仓库单页的侧栏与主内容完全失去分隔。

GitHub 首页有无 CSS 对比

Hex Naw — 作为一个小型对比度检查工具，它的表现反而最好：缺失 skip link、导航上方留白过大，但核心功能（输入颜色、查看通过/失败结果）仍然可用。这也是文章中唯一被正面评价的站点。值得注意的是，它的菜单和关闭图标 SVG 在被加上 width="44" height="44" 属性后，即使在无 CSS 下也保持了合理尺寸——这直接引出了后文的"为 SVG 设置宽高属性"这一建议。

Hex Naw 工具有无 CSS 对比

Stack Overflow — "提问"页面的"已有答案的问题"列表出现空白项目符号（<li> 无文本），回答页的接受标记（对勾）在无 CSS 下仍有黑色对勾可辨，但整体结构层级消失。

Stack Overflow 首页有无 CSS 对比

Wikipedia — 文章正文本身得益于 MediaWiki 的强语义化结构，可读性尚可；但导航菜单出现了"搁浅的 checkbox"（stranded checkboxes，即 CSS 隐藏的表单控件裸露在外），语言切换按钮变成空白，轮播控件变成不可辨识的空白按钮。

Wikipedia 首页有无 CSS 对比

归纳：让无 CSS 体验更好的五条实践

基于六站实测，作者总结出以下工程建议：

在文档顶部加入 skip navigation link — 让键盘和屏幕阅读器用户能跳过重复的导航区，直接进入主内容。这在不依赖 CSS 隐藏的情况下尤为重要。
在合理处保留空白字符 — 源码中过度压缩空白（如 </a><a> 紧贴）会导致无 CSS 时链接连写、无法区分。保留必要的空格或换行，是零成本的可读性保险。
慷慨使用 width 和 height 属性 — 尤其是 SVG 图标。Hex Naw 给菜单图标设置 width="44" height="44" 属性后，无 CSS 下仍保持可点击尺寸。这比依赖 CSS 的 width/height 更可靠，因为属性值是 HTML 层面的默认尺寸。
为 SVG 预备白色背景 — 许多 SVG 图标默认透明，在白色背景上不可见。可以加一个白色 <rect> 或在容器上预设背景。
给按钮加文字标签 — 空白的 <button> 在无 CSS（及无图标字体）时完全无法辨识。应始终提供文字内容，用 CSS 视觉隐藏（sr-only 技巧）而非从 DOM 中移除。

结论：CSS 作为渐进增强层

作者的最终观点是：CSS 本质上是渐进增强的一层。HTML 的语义层级、表单控件、其他元素在 User Agent 默认样式下应保持功能完整。视觉与交互的"锦上添花"固然重要，但应排在"功能可用"之后。过度依赖 CSS 来承载功能与行为（如用 CSS 隐藏内容而非用 hidden 属性、用背景图承载关键信息而非 <img>），会在样式不可用时导致体验崩塌。这与"过度依赖 JavaScript"的教训同构——工具不是防弹的，需要合理的 fallback。

Zero 的看法

这篇文章写于 2019 年，所观察的问题在今天（2026 年）仍然普遍存在，甚至在 SPA 时代更加严重。原因很简单：React/Vue 等组件框架默认输出的 HTML 往往是 <div> 山，语义化标签被当作"可选优化"而非基线。当 CSS 失效时，<div role="button"> 这类 ARIA 补丁也不可靠——屏幕阅读器或许能识别，但无样式视觉浏览器（或弱网降级场景）看到的是一堆无法点击的纯文本块。

几个值得前端工程师深化的点：

skip link 不要用 CSS display:none 隐藏后又在 :focus 时显示——这种模式在无 CSS 时会永久可见（这其实是期望行为），但很多实现用了 visibility:hidden 导致完全失效。推荐用 clip 技巧或 sr-only 类。
SVG 宽高属性的建议在今天依然成立，而且有额外收益：现代浏览器会根据 width/height 属性预留空间，减少布局偏移（CLS）。这是一个"无障碍 + 性能"双赢的实践。
空白字符保留这条建议在 minify 工具普及后常被忽视。CSS Gap 的 inline 元素间距问题在无 CSS 时会退化为字符粘连。合理使用 <ul>/<li> 或在 flex 容器中加 gap，比依赖源码空格更稳健。
文章没有深入讨论的盲区：CSS-in-JS 方案在样式加载失败时的表现。Styled-components、Emotion 等在 JS 未执行时根本不会注入任何样式，这意味着"无 CSS"和"无 JS"对这类站点是同一件事。对于追求健壮性的工程，应评估关键路径是否能在无 JS 时用静态 CSS 渲染。

总体而言，这篇文章的价值不在于列出的五条实践本身（它们都是 Web 基础常识），而在于用"实地浏览"这种可感的方式证明了：无样式可用性不是理论议题，而是真实存在的降级路径。把"关掉 CSS 看看"纳入 QA 流程，成本极低，收益可观。