CSS 是赋予每个网站设计的东西。没有它，网站肯定不会很有趣和友好！我读过关于 有人整整一周没有使用 JavaScript 的经历，以及这种体验如何导致网站速度更快，尽管某些方面无法按预期工作。
但 CSS。在浏览网页时关闭 CSS 不会使网页变得不那么可用……对吗？或者，像 JavaScript 一样，某些功能会无法按预期工作？出于好奇，我决定尝试一下，在浏览几个网站时从 HTML 骨架上剥离 CSS 皮肤。
你可能会问，为什么？关闭 CSS 有什么非虐待狂的原因吗？Heydon Pickering 曾经 发推 说，禁用 CSS 是检查某些无障碍标准的好方法
- 标题、列表和表单控件等常见元素是语义化的，并且看起来仍然很好。
- 默认样式仍然建立了视觉层次结构。
- 内容仍然可以以逻辑顺序阅读。
- 图像仍然存在为
<img>标签，而不是像 CSS 背景那样丢失。
2018 年 WebAIM 的一项调查 报告称，12.5% 的依靠任何辅助技术的用户使用自定义样式表浏览网页，这可能包括在整个网站上消除每个 CSS 声明。而且，如果我们谈论的是缓慢的互联网连接，放弃 CSS 可能是更快地消费内容的一种方式。还有一种可能性是 CSS 被禁用，原因超出了我们的直接控制范围，例如当服务器出现故障或无法加载资产时。
作为一项实验，我在没有 CSS 的情况下使用了五个网站和一个网络应用程序，这篇文章将涵盖我的体验。对我个人来说，这是一次相当开阔视野的冒险，但也从专业角度为我提供了开发者方面的见解，我希望你也能看到这些见解。
但首先，以下是禁用 CSS 的方法
您绝对欢迎以这篇文章的形式间接体验我的经历。但对于那些敢于尝试并希望体验无样式网页的人来说，以下是如何在各种浏览器中禁用 CSS
- Chrome： Chrome 中实际上没有禁用 CSS 的设置，因此我们必须求助于扩展程序，例如 disable-HTML。
- Firefox： 查看 > 页面样式 > 无样式
- Safari： Safari > 偏好设置... > 在菜单栏中显示“开发”菜单。然后转到 开发 下拉菜单并选择“禁用样式”选项。
- Opera： 与 Chrome 类似，我们需要一个扩展程序，而 Web 开发人员 正合所需。
- Internet Explorer 11： 查看 > 样式 > 无样式
我找不到在 Edge 中禁用 CSS 的记录方法，但我们可以通过 CSS 对象模型 API 在 DevTools 控制台中以编程方式从 Edge 和任何其他浏览器中删除 CSS
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> 中），第二个循环消除任何内联样式。但是，这里需要注意的是，元素仍然可以动态地获得新的内联样式。为了立即擦除它们，最好的解决方法是添加一个计时器。类似这样
(f = function(){
// Remove CSS
...
setTimeout(f, 20);
})();或者，还有纯文本浏览器——比如古老的 Lynx——但要做好没有视频、图像（包括 SVG）和 JavaScript 的准备。
穿过无样式的镜面…
对于我浏览过的每个没有 CSS 的网站——亚马逊、DuckDuckGo、GitHub、Stack Overflow、维基百科和名为 Hex Naw 的对比检查器——我将分享我的第一印象，并提出一些可能对体验有帮助的建议。
准备好，因为事情可能会变得有点……令人不寒而栗。😱
网站 1：Amazon.com
这里没有必要进行介绍。亚马逊不仅是许多人的家庭必备品，而且凭借其无处不在的亚马逊云服务平台，它也为很大一部分网络提供支持。
这里有许多事情正在发生，因此，在寻找产品并假装购买时，我会探索阻碍我的无样式内容。
在主页上，我立即看到该网站使用了一个精灵图。它实际上是在徽标应该存在的位置，因此很难知道这些图像是否应该存在。每个精灵包含徽标的多个版本，即使我能看到其中的“Amazon”字标，但令人惊讶的是，它不是全局主页链接。如果您好奇主页链接到底在哪里，它的结构是这样的跨度，其中徽标作为背景图像提供…在 CSS 中。
<a href="/ref=nav_logo" class="nav-logo-link" aria-label="Amazon" tabindex="6">
<span class="nav-sprite nav-logo-base"></span>
<span class="nav-sprite nav-logo-ext"></span>
<span class="nav-sprite nav-logo-locale"></span>
</a>出现的下一个问题是，“跳至主要内容”链接看起来不像典型的跳过链接，但它像一个跳过链接一样工作。事实证明它是一个没有 href 属性的 <a> 元素，并且 JavaScript（是的，我确实启用了它）用于模拟锚点功能。
当我开始搜索时，我必须查看“入门”链接下方才能看到建议。在“您的列表”和“您的账户”项下，很难区分链接。它们看起来像连接在一起的超级长超链接。我认为，在这种情况下使用语义无序列表更有效，可以保持层次感。
然而，在所有这些搜索建议下方，账户和导航链接更容易阅读，因为它们之间有一些空间。
有趣的是，页面下方的轮播仍然有些功能。如果我点击“上一页”或“下一页”选项，图像的顺序会改变。但是，在这些选项之间跳转需要我滚动。
再往下跳一点，有一个广告元素。它包含一个“广告反馈”字符串，看起来很静态，就像我们之前看到的“跳至主要内容”链接一样。好吧，无论如何我点击了它，它显示了一个用于分享广告相关性反馈的表单。
您可能错过了，在两组表单标签上方有一个空白按钮，并且单选按钮的位置不对。结构令人困惑，因为我不知道哪些标签属于哪些单选按钮。我的意思是，我猜可以假设第一个标签与第一个单选输入相对应，但这仅仅是一种猜测。
同样令人困惑的是，在表单底部的“关闭窗口”、“取消”和“发送反馈”选项之间，有两个提交按钮。如果我按下其中任何一个，我都会被带回广告。现在，假设我失明了，并且使用屏幕阅读器导航相同的部位，即使有 CSS 的存在。我会听到两个按钮的“提交，按钮”，因此，如果没有猜测，我将完全不知道该怎么做。这是关于在处理标记（在这种情况下是按钮标签）时语义的重要性以及注意对 JavaScript 的依赖程度以覆盖 Web 默认设置的另一个很好的提醒。
进行搜索——比如搜索“Mac Minis”——我仍然可以访问和理解产品评级，因为它们显示为文本（而不是它们通常的工具提示）而不是星级。当图像用作视觉内容时，这是一个使用可靠文本回退的好例子，但在 CSS 中作为背景图像提供。
选择了带有英特尔酷睿 i3 的 Mac Mini 后，我遇到了我选择的产品上方其他 Mac 产品，并且必须导航到它们之外才能选择我想要购买的数量。
向下滚动，在“添加到购物车”按钮旁边显示了一个带有相同内容的标签。那是多余的，可能没有必要，因为一个 <button> 元素能够拥有自己的标签
<button>Add to Cart</button>接下来，我们有一个亚马逊 Prime 会员优惠。一切都很好，但请注意，它被插入到我购买的产品和我正在购买的“立即购买”按钮之间。我很难知道点击“立即购买”是将 Mac Mini 添加到结账，还是购买亚马逊 Prime。
我还想玩一下，所以尝试在我的购物车中删除 Mac Mini，一旦我弄清楚如何添加它。我花了大约 10 秒钟才找到购物车以便编辑它。事实证明它就在“继续结账（1 件商品）”链接旁边，但与它紧挨在一起，因此看起来就像一个链接。
总的来说，找到产品并不难。另一方面，随着我的继续，结账的过程变得越来越令人头疼。有一些糟糕的语义和无障碍实践导致了混乱，重要的按钮和链接变得更难找到。
| 👍 网站做得好的地方 | 💡 网站可以改进的地方 |
|---|---|
| 即使没有样式，轮播也是可以正常使用的。 | 徽标依赖于背景图像，遮挡了回主页的路径。 |
| 内容层次结构对于了解我们在页面上的位置仍然很有帮助。 | 许多链接和锚点依赖于 JavaScript，并且似乎不可交互。 |
| 元素的顺序大体上保持不变。 | 链接经常彼此碰撞，或者放置在不相关的地方。 |
| 产品评级使用背景图片的回退功能非常棒。 | 按钮标签要么误导性，要么重复。 |
| 表单元素无法正确对齐。 | |
| 结账流程很麻烦。 |
网站 2：DuckDuckGo
你之前使用过 DuckDuckGo 吗？我假设很多阅读 CSS-Tricks 的人使用过，但对于那些第一次听说它的人来说，它是一个注重用户隐私的 Google 搜索替代品。
因此，从这里开始有点误导性，因为 DuckDuckGo 主页超级简单。没什么会出错，对吧？嗯，这有点复杂，因为我们正在处理搜索结果、内容层次结构和相关性，一旦我们开始进行搜索查询，就会出现这些问题。
从一开始，我就看到比我预期要多得多的内容，对于这样一个简单的着陆页来说。通过扫描网站，并不完全清楚这是哪个网站。第一次提到产品名称是在第一个无序列表中的第四项，它是一个号召性用语，要求“传播 DuckDuckGo”。该徽标完全缺失，这显然意味着它是作为背景使用的……在 CSS 中。
说到那个无序列表，我假设我看到的内容属于标题，并且没有跳过导航。我们有一个三箭头图标（这是一个移动菜单，还是隐藏不重要项目的菜单，或者其他什么？），然后是与隐私相关的內容、社交媒体链接，看起来像一个链接，但实际上是“关于 DuckDuckGo”和“了解更多”的两个链接。
最后，在最底部，是该网站的主要用例真正出现的：搜索栏。我假设“S”标签代表“搜索”，而“X”标签是清除搜索字段的缩写。
好了，开始进行搜索。我很酷，我仍然可以看到自动建议，并使用向上和向下箭头键突出显示每个建议。但是，清除该字段后，建议不会消失，直到我刷新页面。
设置菜单中的所有内容都是列表中的项目，包括应该是标题的内容——“设置”、“隐私要点”、“为什么隐私”、“我们是谁”和“保持联系”。这些很可能是在启用了 CSS 的情况下移动菜单的一部分，可能由顶部那个三箭头链接触发。在该菜单中，我在“设置”和“更多主题”之间看到四个空项目符号。
作为新用户来到这里，我不知道这些空列表项是什么，但我上面截图中突出显示的项目符号实际上是主题按钮。为了阐明意图，一些回退文本会很有帮助，这些应该改为单选按钮或普通按钮，而不是列表项（考虑到它们的功能）。
每个带有“X”的内容块——包括“设置”——都不能关闭；但是，点击登山者图片上方的“X”，会导致一部分内容从屏幕上清除——因为 JavaScript 仍然处于启用状态。我真正觉得奇怪的是，在“切换到 DuckDuckGo...”下的有序列表中存在冗余的编号。我们看到这个
1. 1We don’t store your personal info
2. 2We don’t follow you around with ads
3. 3We don’t track you. Ever.看起来语义标记与其他一些显示列表项编号的方式混合使用了。
登山者图片下面到第一个<h1>元素之间有大量的空白。假设它们要么是链接，要么是按钮，点击每个“将 DuckDuckGo 添加到 [浏览器]”实例都不会有任何反应。每个部分的插图都会导致一些不必要的水平滚动，这是我们在查看的其他网站中会遇到的一个常见问题。
在这些部分之后，有一个空白框，我不知道它是什么。
我打开了 DevTools，结果发现它是一个<body>元素，在一个<iframe>中，该元素只包含与POST请求相关的 JavaScript。它可能也是那些我们应该放手的元素之一。
接下来，我看到两次重复的“设置为默认搜索引擎”，包装在一个“设置为主页”部分中。
这些一定是当我点击“添加 DuckDuckGo...”操作时弹出的说明，但这表明隐藏和显示内容在处理纯标记时会产生什么影响。与其重复内容，相应的链接或按钮应该指向一个实例。这将减少这里的冗余。
好的，终于可以开始搜索了。我在搜索结果中看到的第一件事是一个空框，其中有忽略该框的说明。好的，就这么办吧。
继续，你看到那个 DuckDuckGo 链接了吗？那一定是徽标，我想知道为什么它不在主页上。看起来是改进的低垂果实。
搜索栏仍然可以正常工作，除了“S”和“X”按钮，它们的位置与主页上的位置互换了。
进入搜索结果。我可以轻松地区分一个结果和另一个结果。我发现相当不必要，但有趣的是，位于每个页面标题末尾的“您的浏览器指示您是否访问过此链接”消息。从屏幕阅读的角度来看，这会非常令人讨厌。想象一下，在每个页面标题的末尾重复听到这句话。该消息是为了与包含工具提示的复选标记一起显示，这些工具提示包含该消息。但是，如果禁用了 CSS，那么就没有复选标记，也没有工具提示。结果，我只得到一个很长的标题。
通常显示为选项卡以按不同类型的结果（例如图片）进行过滤的导航栏，此时似乎没有作用，因为如果没有样式，很难判断它们是过滤器。但是，如果我点击图片过滤器，图片结果实际上会加载到页面下方，堆叠在网页结果之上，页面因此变得超级长。哦，你可能认为向上滚动到底部（这很远），然后点击另一个过滤器，比如视频，会替换图片，但实际上只是在图片下面插入了视频缩略图，使已经超级长的页面变得超级超级长。想象一下所有这些资产的页面权重！
好吧，你不必这样做。根据 DevTools 的数据，仅图片就占用了 831 个请求，总重量为 23.7 MB。太大了！
最后几项值得注意。点击“发送反馈”链接显然没有反应。也许它在 CSS 的情况下触发了一个模态窗口？并且，虽然“所有地区”链接不像链接，而且我很容易忽略它，但我还是很好奇，点击了它，并被带到一个国家列表的锚点。最后两个链接只是使相应的内容出现在国家选项列表下方。
这里有很多东西，显然有改进的空间。例如，有一些号召性用语以普通文本的形式显示，这些应该改为链接或按钮。此外，我们认为禁用 CSS 后，网站的性能会变得更好，但搜索结果中加载的所有这些资产都是一种阻碍。也就是说，搜索体验并不痛苦……除非你在进行搜索时深入研究图片或视频。
| 👍 网站做得好的地方 | 💡 网站可以改进的地方 |
|---|---|
| 搜索前后一致，无论是否启用 CSS 都可以正常工作。 | 一个“跳过”链接将有助于键盘浏览。 |
| 内容层次结构使内容易于阅读，搜索结果体验干净。 | “设置”菜单中的非链接项目应该是单独无序列表的标题，这样就可以清晰地了解选项的分组方式。 |
| 在搜索结果页面的顶部很好地使用了主页链接。 | 一些内容重复或重复，因为网站依赖于条件显示和隐藏内容。 |
| 确保所有号召性用语都以链接形式呈现，而不是普通文本。 | |
| 使用回退解决方案来过滤搜索结果的类型，以防止项目堆叠并帮助控制沉重的页面权重。 |
网站 3：GitHub
嘿，这是一个我们很多人都很熟悉的网站！嗯，我们很多人都习惯了始终登录它，但我将在注销状态下浏览它。
已经有了一个跳过链接（耶）。还有一个移动导航图标，我希望它不会有任何反应，当我尝试时，事实证明我没错。
在一些导航项目之间，存在不必要的巨大间隙。如果你点击这些项目，它们仍然可以作为下拉菜单。它们是<details>和<summary>元素……但感觉在语义上有点不对劲。很好的是，菜单项目实际上是无序列表项目，并且可以使用语义方式扩展内容来执行本机浏览器功能。但是，那个 SVG 图标让我很头疼。
在输入任何内容到字段之前，我看到了三个“搜索所有 GitHub”和“跳转到”链接。我不知道该点击哪个，但如果我进行搜索，关键字就会出现在第三组中。
主页上的其他一切似乎都很好，除了几个水平溢出窗口的大图片。
让我们回到搜索栏，并导航到我们可以找到的任何仓库。在搜索按钮下方，我们有两个几乎相同的辅助导航栏，返回仓库计数、代码、提交和其他元数据。不看源代码，我完全不知道为什么有两个这样的导航栏。
仓库页面仍然有一个易于理解的结构和逻辑层次结构，在大多数情况下是如此。在注销状态下，并且在访问之前已清除缓存的情况下，“加入 GitHub 今天”块的“关闭”按钮仍然按预期执行。就像我们之前在亚马逊上看到的那样，标签链接很难区分，因为它们并排显示在一行中。
接下来两个按钮 - “JavaScript” 和 “New Pull Request” - 点击后没有任何反应。我想拉取请求按钮在以访客身份查看时应该被禁用，除非它旨在先将用户带到登录屏幕……但即使那样也不对。事实证明，当 CSS 处于活动状态时，按钮确实被禁用了。然后页面其余部分就很容易理解了。
如果您主要是在管理、贡献或查看代码库，您不会遇到太多阻碍，因为层级结构运行良好。无论您是在查看拉取请求、问题还是单个文件，您都会在其他地方体验到几乎相同的内容。大多数障碍都存在于网站上不太突出的页面中。
| 👍 网站做得好的地方 | 💡 网站可以改进的地方 |
|---|---|
| 许多页面的层级结构和组织非常易于理解，并且具有逻辑意义。 | 在 `<img>` 元素和 SVG 上使用高度和宽度属性来防止它们爆炸。 |
| 页面上嵌入的大多数 SVG 图标都已按适当尺寸调整。 | 注意空列表项。 |
| 在标题中很好地使用了跳过链接。 | 确保按钮标签使用完整的单词。 |
| 确保链接之间有空格或换行符，以防止连字符。 |
网站 4: Hex Naw
下一个网站是一个我经常使用的在线工具，用于检查辅助功能的颜色对比度。对于一个如此重视 *颜色* 的网站，这里可能有很多 CSS，所以应该会很有趣。
导航栏上方立即出现大量空白，并且没有跳过链接。移动布局的汉堡包和关闭按钮以及每个颜色旁边的“X”按钮都过大。
哦，看看“测试颜色”按钮和下一部分内容之间的巨大间隙。
该网站的许多出色功能之一是一个复选框，允许您仅查看通过测试的颜色，而不是查看所有测试的颜色。不幸的是，禁用 CSS 后该按钮没有任何作用。但是，我仍然可以看到哪些颜色有效，并可以直接在结果表中获得对比度比率、大文本和小文本的定义。
隐藏和显示术语可能是按钮在使用 CSS 时的作用。令人沮丧的是，在表格之后，我将不知道这些单个字母（例如 S 和 R）在表格标题之后的用途。看到针对所有失败颜色的信息也很讽刺，也很令人困惑，因为，好吧，此列表中存在通过的颜色。可以做的是默认情况下隐藏它，但如果单个测试中的所有颜色都失败，则在以后有条件地注入它。
使用 DevTools，事实证明顶部的一些空白是 Hex Naw 徽标，它是一个 SVG 文件。上面的空白与页面使用的其他 SVG 符号相关联。通过使用黑色作为徽标的默认颜色，这将有助于减少一些空白。我在 DevTools 中快速进行了更改，它带来了明显的差异。
第二个空白是由计算颜色对比度时出现的 SVG 加载器引起的。可以通过指定更小但成比例的宽度和高度来解决此问题，就像移动菜单和“X”图标一样。
向每个 SVG 添加初始宽度和高度肯定会减少滚动需求。这也是我们用来修复在 GitHub 导航中看到的间隙的方法。
最终，Hex Naw 在没有 CSS 的情况下仍然非常有用。我仍然可以测试颜色，获得通过和失败的颜色结果，并在页面上导航。只是很可惜我无法使用实际颜色，不得不绕过那些超大型 SVG 图标。
| 👍 网站做得好的地方 | 💡 网站可以改进的地方 |
|---|---|
| 该网站在整个网站中都保持了良好的内容层次结构。 | SVG 应该使用备用填充颜色并使用高度和宽度属性。 |
| 所有元素都以语义方式编写。 | 可以动态添加和删除针对所有失败颜色的反馈，以防止出现尴尬的消息。 |
| 测试本身功能正常，但无法显示或隐藏信息。 | 考虑使用其他方法显示正在测试的值的颜色，例如使用背景颜色属性的表格单元格。 |
网站 5: Stack Overflow
与 GitHub 一样，Stack Overflow 也是我们许多人（如果不是大多数人）都随身携带的资源之一，因为它有助于找到是否有人已经提出过开发问题以及问题的答案。
在提问页面上，我在主 `<textarea>` 元素上方看到一堆空白项目符号。我不知道为什么这些空列表项在那里。我也没有看到任何格式化按钮，但经过一番折腾，我发现它们不过是空列表项而已。也许每个项目使用备用文本或 SVG 图标可以帮助识别它们是什么以及作用。它们也应该被转换为真正的按钮。
在标题字段中输入文本时，仍然可以获得类似问题的列表。这里的一切按预期工作，这很好。虽然，奇怪的是，每个建议问题的投票次数出现了两次，一次在标题上方作为链接，另一次在标题旁边，但没有链接。
我们登陆 Stack Overflow 问题页面时都会寻找的关键元素之一是那个大大的绿色复选标记，它表明了所有提交的答案中正确的答案。但是，禁用 CSS 后，很难判断哪个答案被接受了，因为列表中的每个答案都带有一个黑色复选标记。即使被接受的答案始终在顶部，如果没有与页面交互，仍然没有替代或备用指示。此外，如果您已经赞成或反对问题或任何答案，没有任何指示。
总结我在 Stack Overflow 上的体验，我能够完成我通常来这个网站的目的：找到编程问题的答案。也就是说，确实有一些改进的机会，并且该网站是设计如何经常依赖于颜色来指示页面上的层次结构或价值的一个典型例子，这在本次实验中的问题页面中严重缺失。
| 👍 网站做得好的地方 | 💡 网站可以改进的地方 |
|---|---|
| 几乎所有元素都以语义方式编写。 | 使用清晰的控件来识别提问或回答问题时的编辑工具。 |
| SVG 图标使用宽度和高度属性。 | 考虑使用视觉图标来区分已接受的答案与问题中的任何其他答案。 |
| 答案列表清晰易于浏览。 | 考虑使用除颜色以外的其他方法来指示赞成或反对投票。 |
网站 6: 维基百科
维基百科，网络的主要参考点！它是一个在线主食，其吸引人的特性之一是 *缺乏* 设计。这应该会带来有趣的测试。
向下几个链接，我们有一个跳过导航选项，用于真正的导航和搜索。包含地球仪图像的首页标题保留了它的两列布局，你可能已经猜到原因：这是一个表格布局。虽然可能不是可用性问题，但我们知道依赖表格来创建布局不是语义的。那是过去我们没有浮动、flexbox、网格或任何其他处理内容放置方式的遗留物。也就是说，页面上没有明显的使用性问题或令人困惑的元素。
让我们继续我们许多人在维基百科中花费最多时间的内容：文章条目。这通常是维基百科的入口点，特别是对于那些先在搜索引擎中输入内容，然后点击维基百科搜索结果的人来说。
底线是，即使禁用 CSS，此页面仍然非常易于使用且具有层次结构。布局变成了一列，但内容仍然以逻辑顺序流动，甚至保留了一些样式，再次感谢对表格和内联表格属性的依赖。
我遇到的一个问题是导航。标题中有一个“跳至导航”链接，当我点击它时，它确实将我下拉到导航。如果您想知道，导航位于页脚中，这就是需要跳转到它的原因。
在几个导航标题上方（特别是“变体”和“更多”）似乎有随机复选框，它们似乎没有用，尽管当 CSS 启用时，在某个视口宽度下，“更多”上方的复选框会显示出来。
导航中确实有一件奇怪的事情，它是一个在“其他项目”和“语言”标题之间的无标签按钮。
点击该按钮，我仍然可以访问语言设置，并且它大部分按预期工作。例如，布局保留了选项卡式布局，这非常实用。
但是，在“显示”选项卡中，“语言”和“字体”按钮没有任何作用。它们可能也是选项卡，但我至少可以看到它们提供的内容。在这些按钮旁边是两个没有任何作用的空选择菜单（第一个菜单在您选中复选框时会填充 ComicNeue、OpenDyslexic 和系统字体选项）。查看“输入”选项卡，书写语言按钮仍然恰好充当选项卡。我仍然可以选择除英语、西班牙语和中文以外的选项。
![Blue arrow pointing out the jump to a list of languages at the top of the page when pressing the [...] button](https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/04/s_071AECC15C6EB5F429B89D008BC0081AA5693F96DD2911AF4BC7C24CC0BB7965_1551730969400_wikipedia4.png?ssl=1)
在没有 CSS 的情况下，文章一点也不难读，这是因为几乎所有元素都具有语义正确性，并且遵循一致的文档层次结构。我很好奇的一件事是，通常在目录中的“显示/隐藏”按钮在哪里。事实证明它是一个单独的复选框，而且标签是假的——它使用 CSS 中伪元素的 `content` 属性来显示标签。
文章中的另一个问题是，在预览图像时，您需要花费时间寻找图像。通常，点击文章侧边栏中的图像会触发一个包含图像轮播的全屏模态框。如果没有 CSS，轮播就会消失，取而代之的是一张图片，图片上面有一排没有标签的按钮。这很糟糕，但如果轮播不是在页面的最底部，与点击的图像在页面顶部相反的位置，而且没有跳转到轮播的按钮，那就完全没问题了。
如果我不提维基百科的标志在文章中找不到，我会很粗心！它甚至不是白色背景上的白色 SVG。链接实际上没有任何内容。
<a class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"></a>谢天谢地，“导航”下的“主页”链接是返回主页的另一种方式，不用按浏览器的“后退”按钮。但是，当主页做得很好时，页面上没有品牌标识还是感觉很奇怪。
维基百科的 HTML 问题主要存在于我认为不太常用的功能中，而不是文章中。从长远来看，它们从未影响我的阅读体验。
| 👍 网站做得好的地方 | 💡 网站可以改进的地方 |
|---|---|
| 该网站保持着干净的结构和层次结构。 | 徽标位置可以移动（或者在某些情况下添加）到页面的顶部，而无需 CSS 背景图像。 |
| 跳过链接用于搜索和导航。 | 按钮应该包含标签。 |
| 文章内容是语义化的，易于阅读。 | 页面上的图像轮播可以加载到触发位置，并使用正确的按钮标签来控制。 |
如何让无 CSS 体验更好
CSS 是现代网络的关键组成部分。正如我们迄今为止所见，有很多网站在没有 CSS 的情况下几乎无法使用——我们正在统计其中一些最知名和最常用的网站。我们已经看到，在最好的情况下，网站的主要目的仍然可以实现，但在过程中会遇到一些障碍。例如
- 缺少或语义错误的跳过链接
- 链接连在一起
- 过大的图片，需要额外滚动才能查看
- 空的元素，例如列表项和按钮标签
让我们看看是否可以将这些内容整理成一个清单，列出一些在 CSS 可能被禁用或甚至不可用时的最佳实践。
在文档顶部包含一个跳过导航链接
必须有一个隐藏的链接来跳过导航。请注意，我们查看的大多数网站都在标题中直接包含了导航链接。当 CSS 被关闭时，这些导航变成了很长的链接列表，对于任何用户来说，用 Tab 键或滚动条滚动浏览这些链接都非常困难。有一个跳过导航的链接会让这种体验好很多。
我见过的最基本的 HTML 示例是一个锚点链接，它指向主内容开始处的 ID。
<a href="#main">Skip to main content</a>
<!-- etc. -->
<main id="main"></main>当然，我们可以在这个链接上添加一个类名，以便在视觉上隐藏它，这样它就不会在 UI 中显示，但仍然可以被键盘用户和在 CSS 关闭时使用。
.skip-navigation {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
padding: 0;
position: absolute;
height: 1px;
width: 1px;
}
/* Bonus points for adding :focus styles */在有意义的地方保留空格
我们在一些案例中遇到的另一个痛点是文本链接连在一起。无论是在导航、标签还是其他链接起来的元数据中，我们经常看到链接以一种“粘在一起”的方式出现，以至于多个单独的链接看起来像一个巨大的链接。这要么是手动编码链接导致的结果，要么是自动构建任务在压缩 HTML 时删除了空格。无论哪种方式，HTML 最终都会变成这样
<a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>即使 CSS 被禁用，我们也可以保留使用空格或换行符的自由。一种方法是当 CSS 被启用时依靠 flexbox 来定位列表元素。当 CSS 被禁用时，列表项应该垂直堆叠，并默认显示为列表项。
如果这些项目是标签，并且应该保持分离，那么传统的间距方法，例如边距和填充，仍然非常棒，我们可以依靠 HTML 中的自然换行符来帮助完成无样式的格式化。例如，以下是在 HTML 中使用换行符来分隔项目，使用 flexbox 来移除空格，然后在 CSS 中进行样式化以重新分隔项目的示例
查看
处理由空格或换行符分隔的 HTML 中的链接 by Jon Kantner (@jkantner)
on CodePen.
尽可能地使用 width 和 height 属性
在这个实验中，最大的麻烦可能是图片在屏幕上膨胀到占据了所有内容，占用了过多的空间，导致所有用户需要大量滚动才能查看。
这里的解决方法相当简单，因为我们有 HTML 属性在等待我们定义它们。图片和 SVG 都有方法可以显式地定义它们的宽度和高度。
<img src="/path/to-image.jpg" width="40" height="40" />
<svg width="40px" height="40px" viewBox="0 0 200 200">
<polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80" />
</svg>为白色背景准备 SVG
我们在查看的网站上，许多大间隙看起来像空白空间，但实际上是白色 SVG，它们膨胀到全尺寸，并与白色背景融为一体。
因此，是的，使用正确的 width 和 height 属性是一个好主意，可以防止出现巨大的图标，但我们也可以对白色背景上的白色情况做一些事情。使用诸如 fill 和 fill-rule 之类的属性作为属性在这里会起作用。
<!-- Icon will be red by default -->
<svg viewBox="-241 243 16 16" width="100px" fill="#ff0000">
<path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"/>
</svg>/* ...and it’s still red when CSS is enabled */
svg {
fill: #ff0000;
}
查看
定义 SVG 宽度属性 by Geoff Graham (@geoffgraham)
on CodePen.
标记那些按钮！
最后，如果按钮最初为空，则需要具有可见的回退内容。如果它们使用背景图片和标题来描述它们的作用，则使用包含标题文本的 span，然后添加 aria-hidden="true"，这样屏幕阅读器就不会读两次按钮标签（例如，VoiceOver 会说，“添加按钮添加”）。
<button class="btn-icon" title="Add">
<span class="btn-label" aria-hidden="true">Add</span>
</button>然后 CSS 可以是这样的
.btn-icon {
background: url(path/to/icon.svg) 0 0 / 100% 100%;
height: 40px;
width: 40px;
}
.btn-label {
display: block;
overflow: hidden;
height: 0;
}如果有 <li> 元素充当按钮，它们可以保留，但它们应该是静态的，内容应该放在按钮中。
现在，如果图标是 SVG，我们可以确保标题提示仍然可见，方法是使用 aria-labelledby 并将 id 分配给标题。
<button>
<svg width="40px" height="40px" viewBox="0 0 200 200" aria-labelledby="btn-title">
<title id="btn-title">Add</title>
<polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80" />
</svg>
</button>结论
很容易忘记或害怕检查一个网站在 CSS 不可用时是什么样子，无法让 UI 看起来像预期的那样好。在简要浏览了无 CSS 网络后，我们看到了 CSS 对网站整体设计和体验的重要性，无论大小。
而且，就像我们工具箱中的任何工具一样，过度依赖 CSS 来处理元素的功能和行为，会导致在 CSS 不在时出现糟糕的体验。我们已经看到，对于那些过度依赖 JavaScript 的网站来说，情况也是如此。这并不是说我们不应该使用它们或依赖它们，而是要记住，它们本身并不牢不可破，需要适当的回退，以确保无论是否使用我们的工具，都能获得最佳体验。
从这个角度来看，CSS 实际上是渐进增强的一层。层次结构、表单控件和其他元素也应该在它们的浏览器样式下保持完整。外观和感觉虽然重要，但在确保元素核心功能完好无损时，则是其次要的。
很棒的文章！我很高兴看到人们开始关注结构良好的标记的重要性。
如果你感兴趣，我和一个朋友一起构建了一个小代理，它可以剥离样式，完全是为了检查你所概述的内容：https://structure.exposed/
有用
太棒了！
谢谢工具！
这很有趣。我们越来越依赖工具来做布局、设计等等，但我们永远不应该忘记查看基础知识。始终要有结构良好的 HTML，然后是精心设计的 CSS，最后添加一些 JS 行为。
事实上，我正在评估一些使用 Bootstrap 作为 CSS 框架快速进行设计的工具，结果发现我自己编码会更好。虽然我最终使用了 Bootstrap，但我始终遵循结构，所以我从 Bootstrap 提供的所有内容开始来布局内容，然后在这些内容之上添加我的样式。
当你开始在 DevTools 中禁用东西时，看到完整的布局，然后禁用自定义样式时，看到默认布局，然后禁用所有 CSS 时，看到结构良好的 HTML，这真是太美妙了。
好文章，伙计！
几年前，在 Naked CSS day 流行之前，我也做过类似的浏览体验。
我得出的结论是我构建网站时使用水平线的部分原因，将它们放在主部分之间，然后用 CSS 隐藏它们。
如果样式被禁用，
将为用户提供清晰的内容块分离。
单选按钮、标签和内容之间缺乏关联令人尴尬（选项卡式内容也是这种情况，它们不相关）。
如果这些网站开发人员没有在禁用 CSS 的情况下进行用户测试，那么他们需要开始这样做！
我首先以纯文本形式规划网站结构，就好像它要被打印出来并像小说一样阅读——如果它没有按照内容优先级的逻辑顺序排列，并且在文本中不可读，那么它就不适合进行视觉布局。
高分辨率 SVG 图标在没有 CSS 的情况下默认外观总是很糟糕，没有定义与文本大小一样大的
viewBox。字体图标没问题，因为它们会消失。此外，这可能是一个剧透，但即使完全没有 CSS，我们仍然会默认将用户代理样式表加载到浏览器中，以设置段落、列表和标题边距，以及标题文本大小、默认表格布局等。
FTR DuckDuckGo 确实有一个“精简”视图，它使用很少的 CSS，并且在禁用样式的情况下运行良好：https://start.duckduckgo.com/lite?q=CSS&kp=-1&k1=-1&kl=us-en
它还有一个名为“html”的中间视图，但该视图在很大程度上依赖于 CSS，并且在禁用样式的情况下运行得不太好。
为什么？为什么你的网站在没有 CSS 的情况下必须完全功能？如果你担心你的 CDN 宕机……好吧，你会遇到比 CSS 更严重的问题。你的网站还不如直接宕机。但是主要的 CDN 不会宕机，除非互联网骨干网出现了重大问题。
这与无障碍性无关……即使你的网站在没有 CSS 的情况下无法运行，你也可以拥有一个无障碍的网站。
如果所有这些大公司都认为它不值得（而且我不知道有任何证据表明它是值得的），那我为什么要费心确保我的网站在没有 CSS 的情况下能够运行？
CWSpear，这是一个合法的、切中要点的提问！除了你的假设并不准确。事实上，CSS 网格和 flex 的“有效”使用实际上会导致无障碍性灾难，当内容以仅视觉呈现方式定位时，内容是有意义的，但对依赖于 DOM 顺序的辅助技术来说就不是这样。
使用 uMatrix 移除 CSS 只需点击一下即可！;
没有 CSS 的https://css-tricks.org.cn怎么样？