那个时候我尝试在没有CSS的情况下浏览网络

CSS是赋予每个网站设计的原因。没有它，网站肯定不是很有趣和友好！我已经阅读了一个星期没有JavaScript的人，以及经验如何导致更快的网站，尽管它们的某些方面无法按预期运行。

但是CSS。在浏览网络时关闭CSS并不能完全使网络少可用……对吗？或者，像JavaScript一样，某些功能是否可以正常工作？出于好奇，我决定给它一个旋转，并在浏览几个站点时将CSS的肉从HTML骨架上撕下。

为什么，您可能会问？是否有任何非宣传原因关闭CSS？ Heydon Pickering曾经在推特上发布禁用CSS是检查某些可访问性标准的好方法：

1. 标题，列表和表单控件等常见元素是语义的，而且看起来仍然不错。
2. 仍以默认样式建立视觉层次结构。
3. 内容仍然可以按逻辑顺序读取。
4. 图像仍然以标签而存在，而不是像CSS背景一样迷失。

2018年的WebAIM调查报告说，有12.5％的用户依靠任何类型的辅助技术浏览Web使用自定义样式表，其中包括取消网站上的每份CSS声明。而且，如果我们谈论的是互联网慢的连接，那么抛弃CSS可能是更快消费内容的一种方法。由于我们的直接控制之外的原因，例如服务器无法加载资产时，CSS也有可能被禁用。

作为一个实验，我使用了五个网站和一个没有CSS的网络应用程序，这篇文章将涵盖我的经验。对我个人而言，这是一次令人大开眼界的冒险，但我也希望以我的方式专业地将我作为开发人员告知我。

但是首先，这是禁用CSS的方法

您绝对欢迎您以这篇文章的形式通过我来现场直播。但是，对于那些想完成任务并想体验无风格网络的人来说，这是如何在各种浏览器中禁用CSS的方法：

• Chrome：实际上，Chrome中没有设置可以禁用CSS，因此我们必须求助于延伸，例如Disable-HTML。
• Firefox：查看>页面样式>没有样式
• Safari： Safari >首选项... >在菜单栏中显示开发菜单。然后转到开发下拉列表，然后选择“禁用样式”选项。
• 歌剧：像Chrome一样，我们需要扩展名，Web开发人员适合该法案。
• Internet Explorer 11：视图>样式>没有样式

我找不到一种记录的方法来禁用EDGE中的CSS，但是我们可以通过DevTools Console中的CSS对象模型API从其编程中删除CSS以及任何其他浏览器：

 var d =文档;

对于（s = d.StylesHeets）
    s [s] .disabled = true;

for（i = d.d.queryselectorall（“ [style]”）））
    i [i] .spyle =“”;

第一个循环禁用所有外部和内部样式（在和中），第二个循环消除了任何内联样式。但是，这里需要注意的是，元素仍然可以动态地给予新的内联样式。为了立即删除它们，最好的解决方法是添加计时器。这样的事情：

 （f = function（）{
    //删除CSS
    ...

    Settimeout（F，20）;
}）（）;

另外，还有只有文本的浏览器，例如古老的Lynx，但期望没有视频，图像（包括SVG）和JavaScript生活。

透过无样式的玻璃...

对于每个网站，我都没有CSS（亚马逊，Duckduckgo，github，stack溢出，Wikipedia和对比检查器）称为Hex Naw-称为Hex Naw-我将分享我的第一印象，并提出一些建议，这可能有助于体验。

准备好，因为事情可能会有点……令人震惊。 ？

网站1：Amazon.com

这里没有真正的介绍。亚马逊不仅是我们许多人的家用主食，而且由于其无处不在的亚马逊网络服务平台，它还为网络的很大一部分提供了动力。

这里有很多事情正在发生，所以我将探索在找到产品并假装购买产品时所吸引的无风格的东西。

在主页上，我立即看到该网站使用的精灵表。它确实代替了徽标的位置，因此很难知道这些图像是否旨在存在。每个精灵都包含多个版本的徽标，即使我可以看到其中的“亚马逊”单词标记，但令人惊讶的是，它不是全球家庭链接。如果您很好奇家庭链接的真正位置，就是这种跨度结构，徽标被用作背景图像……在CSS中：

 <a href="%E2%80%9C/ref" nav_logo aria-label="“" amazon tabindex="“">
  <span> </span>
  <span> </span>
  <span> </span>
</a>

出现的下一个问题是“跳到主内容”链接看起来不像典型的跳过链接，但它的工作方式像一个链接。事实证明，它是没有HREF的元素，而JavaScript（是的，我确实离开了该启用）来模仿锚点功能。

当我开始搜索时，我必须在“入门”链接下方进一步查看建议。在“您的列表”和“您的帐户”项目下，很难区分链接。它们似乎都串在一起，好像它们是一个超长的大型链接一样。我相信，在这种情况下，使用语义无序列表来保持层次结构会更有效。

但是，在所有这些搜索建议下，帐户和导航链接易于阅读，因为它们被某些空间分开。

有趣的是，页面下方的轮播仍然有效。如果我单击“上一页”或“下一页”选项，则更改图像的顺序。但是，在这些选项之间跳跃需要我滚动。

进一步跳下来，有一个广告元素。它包含一个“广告反馈”字符串，看起来像我们在“跳过到主内容”链接的“跳过到主内容”链接中所看到的那样。好吧，我无论如何都单击了它，它揭示了一种表格，以分享有关广告相关性的反馈。

您可能已经错过了它，但是两组标签上方有一个空白按钮，并且收音机按钮不合适。结构令人困惑，因为我不知道哪个标签属于哪个无线电按钮。我的意思是，我想我可以假设第一个标签与第一个无线电输入有关，但这正是这样：一个猜测。

令人困惑的是，在表单底部的“关闭窗口”，“取消”和“发送反馈”选项之间存在提交按钮。如果我按其中任何一个，我会回到广告中。现在，假设我是盲目的，即使存在CSS，也使用屏幕读取器来导航相同的部分。我会被告知两个按钮的“提交，按钮”，因此在不猜测的情况下将零知道该怎么做。这是关于语义在处理标记时的重要性的另一个好提醒（在这种情况下按钮标签），并注意在JavaScript上放置多少依赖以覆盖Web默认值。

进行搜索 - 假设“ Mac Minis” - 我仍然可以访问和理解产品评分，因为它们被显示为文本（代替了它们本来是其他工具提示）代替恒星。这是一个很好的例子，当图像用作视觉内容时，使用坚实的文本回退，但在CSS中被用作背景图像。

选择Mac Mini使用Intel Core i3选择了我选择的产品上方的其他Mac产品，并且必须超越它们以选择我要购买的数量。

向下滚动，并在带有相同内容的标签旁边显示一个“添加到购物车”按钮。这是多余的，可能是不必要的，因为元素能够持有自己的标签：

 添加到购物车

接下来，我们将提供亚马逊优势会员资格的报价。这一切都很好，但是请注意，它是在我购买的产品和“立即购买”按钮之间插入的。我很难知道单击“立即购买”是否会添加Mac mini来结帐，还是我是购买Amazon Prime。

我还想玩一些，所以一旦我弄清楚了如何添加它，我就尝试从购物车中删除Mac mini。我花了大约十秒钟的时间来找到购物车，所以我可以编辑它。事实证明，它直接在“继续结帐（1个项目）”链接旁边，但并在其旁边向上撞，因此所有这些链接看起来都像一个链接。

总体而言，找到产品并不难。另一方面，随着我的进行，结帐的道路更加头疼。有一些与语义和可访问性相关的糟糕的实践引起了混乱，重要的按钮和链接变得更加困难。

？该网站做得很好	？网站可以改善什么
即使没有样式，旋转木马也是实用的。	徽标依靠背景图像，掩盖了回家的路径。
内容层次结构通常仍然有助于了解我们在页面上的位置。	许多链接和锚点都依赖JavaScript，并且似乎并不互动。
元素的顺序大致保持稳定。	链接通常相互碰撞或将其放置在其相关的地方。
大量使用后备作为依赖背景图像的产品评级。	按钮标签是误导或重复的。
	形式要素无法正确对齐。
	有一个艰难的旅程要结帐。

网站2：DuckDuckgo

您以前使用过DuckDuckgo吗？我认为许多阅读CSS漫步的人都有，但是对于那些可能是第一次听到的人来说，这是Google搜索的替代方法，重点是用户隐私。

因此，开始时有点误导，因为DuckDuckgo首页非常简单。那里没有什么问题，对吗？好吧，这比这比这更重要的是，因为我们要处理搜索搜索查询后处理搜索结果，内容层次结构和相关性。

马上，我受到欢迎的内容比我对如此简单的着陆器所期望的要多得多。在扫描网站时，目前尚不清楚这是哪个网站。第一个提及产品名称是第一个无序列表中的第四项，这是“传播DuckDuckgo”的呼吁。徽标完全缺少，这显然意味着它被用作背景……在CSS中。

说到那个无序的列表，我认为我看到的属于标题中，并且没有跳过导航。我们有一个三重箭头图标（这是一个移动菜单或菜单来隐藏最不重要的项目，或其他内容？），其次是与隐私相关的内容，社交媒体链接，看起来像一个链接，但实际上是“关于DuckDuckgo”和“ Duckduckgo”和“了解更多信息”的两个链接。

最后，朝下是该网站的主要用例实际上出现的地方：搜索栏。我认为“ S”标签的意思是“搜索”，而“ X”标签是清除搜索字段的简写。

好吧，进行搜索。我仍然可以看到自动探测并使用上下箭头键突出显示每个箭头是非常酷的。但是，清除该领域，建议直到我刷新页面后才消失。

设置菜单中的所有内容均为列表中的项目，包括“设置”，“隐私必需品”，“为什么隐私”，“我们是谁”和“保持联系”。如果启用CSS，这些可能是移动男士的一部分，也许是由顶部的三重箭头链接触发的。在该菜单中，我看到“设置”和“更多主题”之间的四个空白项目符号。

作为新用户来到这里，我不知道那些空列表项目是什么，但是我在上面的屏幕截图中突出显示的子弹实际上是主题按钮。为了澄清意图，一些后备文本将有所帮助，这些文本应该是无线电或普通按钮而不是列表项目（考虑其功能）。

每个内容都没有“ X”（包括“设置”）的每个内容。但是，单击徒步旅行者映像图像上方的“ X”确实会导致大量内容清除屏幕 - 这要归功于JavaScript仍在启用。我真正发现尴尬的是“切换到Duckduckgo……”下的有序列表中的冗余计数……我们看到了：

 1。1我们不存储您的个人信息
2。2我们不要跟随您的广告
3。3我们不跟踪你。曾经。

看起来一些混合用例的语义标记案例以及其他一些显示列表项目编号的方法。

远足者图像下方有巨大数量的空白，直到第一个

元素。假设它们是链接或按钮，请单击“将DuckDuckgo添加到[浏览器]的每个实例”无济于事。每个部分的插图都会导致一些不必要的水平滚动，这是我们在其他网站中看到的常见问题。

在这些部分之后，有一个空白框，我不知道它是什么。

我破解了开放的DevTools，事实证明是

在此之后，我看到了两个重复的实例“设置为默认搜索引擎”，围绕着“设置为主页”部分。

当我单击“添加DuckDuckgo…”动作时，这些一定是弹出的说明，但它显示了隐藏的影响并显示内容时可以使用直接标记。相应的链接或按钮不用重复内容，应指向一个实例。那将减少这里的冗余。

好的，是时候最终进入搜索了。我在搜索结果中看到的第一件事是一个空盒子，其中包含指令以忽略盒子。那时。

继续前进，您看到Duckduckgo链接了吗？那一定是徽标，我想知道为什么这不在主页上。似乎是低悬垂的水果以改进。

除了“ S”和“ X”按钮外，搜索栏仍然正常运行，这些按钮已将其在主页上的位置交换。

在搜索结果上。我可以很容易地将一个结果与另一个结果区分开。我发现不必要的，但有趣的是，“您的浏览器表示您是否访问了此链接”消息，该消息位于每个页面的末尾。从屏幕阅读的角度来看，这将非常烦人。想象一下，在每个页面标题的末尾都重复听到。该消息传递与包含包含该消息传递的工具提示的选拔标记一起显示。但是，由于禁用CSS，没有任何检查标记，也没有工具提示。结果，我所得到的只是一个长时间的标题。

通常以不同类型的结果（例如图像）过滤的标签显示的导航栏似乎在这一点上无能为力，因为很难说它们是过滤器而无需样式的过滤器。但是，如果我单击映像过滤器，则图像结果实际上将下部下方加载到页面上，直接堆放在Web结果的顶部，因此页面变长了。哦，您可能会认为，滚动一直返回（这是很长的路），然后单击另一个过滤器，例如视频，可以替换图像，但这只是在下面插入视频缩略图图像，这使已经成为超级巨型长页的图像成为超级巨型长页。想象所有这些资产的页面重量！

好吧，你不必。根据DevTools的说法，仅图像占831个请求，总重量为23.7 MB。 hefty！

最后几个物品值得注意。单击“发送反馈”链接显然没有任何作用。也许触发了CSS的模态？而且，尽管“所有区域”链接不像一个链接，但我很容易忽略它，但我很好奇地单击它，并被带到了一个国家列表的锚点。最后两个链接刚刚使其相应的内容出现在列表国家选项下。

这里有很多事情发生，显然有改进的机会。例如，有些呼叫作为正常文本显示为链接或按钮。另外，我们认为CSS禁用的网站的性能会变得更好，但是搜索结果中的所有加载资产都令人难以置信。也就是说，搜索体验一点也不痛苦……也就是说，除非您在执行图像或视频中挖掘图像或视频。

？该网站做得很好	？网站可以改善什么
搜索是一致的，并且在有或没有CSS的情况下使用。	一个“跳过”链接将有助于浏览键盘。
内容层次结构使内容易于阅读和搜索结果是干净的体验。	“设置”菜单中的非链接项目应该是单独的无序列表的标题，因此对于如何将选项分组有一个明确的层次结构。
在搜索结果页面的顶部充分利用主页链接。	某些内容要么重复或重复，因为该站点依赖于有条件地显示和隐藏内容。
	确保所有采取行动渲染的呼叫都作为链接而不是纯文本。
	使用后备解决方案过滤搜索结果的类型，以防止项目堆叠并帮助控制大量页面重量。

网站3：Github

嘿，这是我们许多人非常熟悉的网站！好吧，我们许多人都习惯了一直登录它，但是我将在登录时冲浪。

已经有一个跳过链接（是的）。我希望还有一个移动导航图标无能为力，并且在我尝试时被证明是正确的。

在某些导航项目之间，存在不必要的巨大差距。如果单击这些，它们仍然充当下拉菜单。它们是和

元素……但是在语义上有些错误。菜单项实际上是未排序的列表项目，并且本机浏览器功能仍然可以通过使用语义扩展内容来进行，这真是太好了。但是，那个SVG偶像使我感到困惑。

在将任何内容键入现场之前，我会看到三个“搜索所有github”和“跳到”链接的实例。我不知道要单击哪个，但是如果我进行搜索，则关键字显示在第三组中。

主页上的其他所有内容似乎都很好，除了许多过大的图像水平溢出窗口。

让我们回到搜索栏，导航到我们可以找到的任何回购。就在搜索按钮下，我们有两个几乎相同的辅助导航栏，它们返回存储库计数，代码，提交和其他meta。没有查看来源，我不知道拥有两个目的是什么。

存储库页面仍然具有易于遵循的结构和逻辑层次结构。在登录并在到达之前清除我的缓存时，“ JOIN GITHUB TODAY”块的“解散”按钮仍然可以按照我的期望。就像我们早些时候在亚马逊上看到的一样，标签链接很难分开，因为它们是一行。

接下来的两个按钮 - “ JavaScript”和“ New Pull请求” - 当我单击它们时，似乎没有做任何事情。我想像拉动请求按钮应在视为客人时被禁用，除非它打算让用户先登录屏幕……但即使那感觉也不正确。事实证明，当CSS处于活动状态时，该按钮确实被禁用。然后，页面的其余部分非常容易理解。

如果您在这里主要是为了管理，贡献或检查存储库，那么由于层次结构表现良好，您将不会面临很多摩擦。无论您是查看拉的请求，问题还是单个文件，您都会在其他地方体验几乎相同的情况。大多数障碍生活在网站上不太突出的页面中。

？该网站做得很好	？网站可以改善什么
许多页面的层次结构和结构确实很容易遵循，并使逻辑意义化。	使用元素和SVG上的高度和宽度属性来防止它们炸毁。
页面上嵌入的大多数SVG图标都是适当尺寸的。	注意空列表项目。
很好地利用了标题中的跳过链接。	确保按钮标签使用完整单词。
	确保链接之间有空白或线路断裂，以防止跑步。

网站4：十六进制

下一个网站是我经常使用的在线工具检查颜色对比度以供访问。对于一个颜色如此之大的网站，CSS可能会发生很多事情，因此它应该变得有趣。

在导航上方有大量空间，没有跳过链接。用于测试的每种颜色旁边的移动布局和“ X”按钮的汉堡包和关闭按钮超大。

哦，然后查看“测试颜色”按钮和下一部分内容之间的巨大差距。

该网站的许多不错的功能之一是一个复选框，它使您只能看到通过测试的颜色，而不是查看所有经过测试的颜色。不幸的是，该按钮对禁用CSS无能为力。但是，我仍然可以看到直接在结果表中的对比度，大文本和小文本的定义有效，并获得定义。

隐藏和显示术语可能是该按钮对CSS所做的。令人沮丧的是，我不知道桌子标题后那些单个字母（例如S和R）的目的。看到表之后的所有失败颜色的消息也是讽刺和令人困惑的，因为，此列表中有传递颜色。可以做的是默认将其隐藏，但是如果单个测试中的所有颜色失败，则有条件地将其注入。

拔出DevTools，事实证明，顶部的一些空白是Hex Naw徽标作为SVG文件。与该页面使用的其他SVG符号相关联的空间。通过为徽标使用默认的黑色颜色，这将有助于减少一些空间。我对DevTools进行了快速的更改，这有很大的变化。

空间的第二个间隙是由SVG加载器引起的，该SVG装载机在计算颜色对比度时出现。可以通过指定更小但比例的，宽度和高度与移动菜单和“ X”图标的高度来帮助这一点。

在每个SVG中添加初始宽度和高度肯定会减少滚动的需求。这也是我们也可以采取的措施来解决Github导航中看到的空白。

最终，没有CSS，HEX NAW仍然非常有用。我仍然可以测试颜色，通过和失败的颜色结果，并在页面周围导航。太糟糕了，我无法使用实际的颜色，不得不围绕那些超大的SVG图标工作。

？该网站做得很好	？网站可以改善什么
该站点在整个网站中保持良好的内容层次结构。	SVG应使用后备填充颜色并使用高度和宽度属性。
所有元素都是用语义写的。	可以动态添加和删除所有失败颜色的反馈，以防止尴尬的消息传递。
测试本身正常运行，除了能够显示或隐藏信息。	考虑一种显示颜色的替代方法，例如所测试的值，例如具有背景颜色属性的表单元格。

网站5：堆栈溢出

像GitHub一样，Stack Overflow是我们许多人（如果不是大多数人）保留在我们的后袋中的资源之一，因为它有助于找到某人是否已经问了一个开发问题和对它们的答案。

在页面上要提出问题，我在主元素上方看到了一堆空白子弹点。我不知道为什么那些空列表项目在那里。我也看不到任何格式的按钮，但是在弄乱了一点之后，我发现它们恰好只是空白列表项目。也许每个项目的后备文字或SVG图标都会有助于确定这些内容和做什么。它们也应该变成真实的按钮。

在将文本输入标题字段时，仍然可以找到类似问题的列表。这里的每件事都是预期的，这很好。虽然，奇怪的是，每个建议的问题的投票都算过两次，一旦以链接而高于标题，并且在标题旁边又不受链接。

降落在堆栈溢出问题页面时，我们所有人都寻找的关键元素之一是，大绿色检查标记，可以在所有提交的答案中指示正确的答案。但是，随着CSS关闭，很难说出哪个答案被接受，因为列表中的每个答案都有一个黑色检查标记。即使接受的答案始终处于顶部，仍然没有其他选择或后备指示，而无需与页面互动。此外，没有迹象表明您是否已经投票或投票给了问题或任何答案。

为了总结我在Stack Overflow上的经验，我能够完成我通常来到网站的内容：找到编程问题的答案。也就是说，确实有一些改进的机会，这个网站是设计通常依赖颜色来指示页面上的层次结构或价值的一个典型例子，在本实验的问题页面上，这在页面上非常缺少。

？该网站做得很好	？网站可以改善什么
几乎每个元素都是用语义编写的。	在询问或回答问题时使用明确的控件来识别编辑工具。
SVG图标使用宽度和高度属性。	考虑一个视觉图标，以将所接受的答案与问题的其他答案区分开。
答案列表清晰易于扫描。	考虑一种不同的方法来表示投票或单独颜色以外的投票。

网站6：维基百科

Wikipedia，网络的主要参考点！这是一个在线主食，其吸引人的品质之一是缺乏设计。这应该可以进行有趣的测试。

一些链接向下，我们有一个用于实际导航和搜索的Skip Navigation选项。包含全球图像的主页标头保持其两个列布局，您可能已经猜到了原因：这是表布局。尽管这可能不是一个可用性问题，但我们知道依靠表创建布局不是语义。当我们没有浮子，弹性箱，网格或其他任何处理内容放置的方式时，那是过去的遗物。也就是说，页面上没有明显的可用性问题或令人困惑的元素。

让我们继续了解我们许多人在Wikipedia中花费最多的时间：文章条目。这通常是Wikipedia的切入点，尤其是对于我们这些开始的人，从搜索引擎中键入某些内容，然后单击Wikipedia搜索结果。

最重要的是，此页面仍然非常有用，并且在禁用CSS的情况下是非常可用的。布局归结为单列，但是内容仍然以逻辑顺序流动，甚至保持造型位，再次感谢对表和内线表属性的依赖。

我遇到的一个问题是导航。标题中有一个“跳到导航”链接，当我单击它时，确实会使我转到导航。如果您想知道，导航包含在页脚中，这是需要跳到它的原因。

在几个导航标题上方似乎有随机的复选框（专门针对“变体”和“更多”），它们似乎没有目的，尽管上面的复选框“更多”在启用CSS时以某个视口宽度显示。

导航中实际上有一件奇怪的事情，它是“在其他项目”和“语言”标题之间的无标签按钮。

单击该按钮，我仍然可以访问语言设置，并且它大多是按预期工作的。例如，布局维护一个超级功能的选项卡式布局。

但是，在“显示”选项卡中，“语言”和“字体”按钮无能为力。它们可能也是标签，但至少我可以看到他们提供的东西。除了这些按钮是两个空的选择菜单，这些菜单绝对什么都不做（第一个按钮在选中复选框时确实填充了漫画，OpenDyslexic和System Font选项）。查看“输入”选项卡，写作语言按钮仍然恰好功能为选项卡。除了英语，西班牙语和中文之外，我仍然可以选择其他选项。

没有CSS，这些文章根本不难阅读，这是因为几乎每个元素在语义上都是正确的，并且遵循一致的文档层次结构。我想知道的一件事是通常在目录中通常在哪里进行的“显示/隐藏”按钮。事实证明这是一个孤独的复选框，标签是假的 - 它使用CSS中的伪元素上的内容属性显示标签。

文章中的另一个问题是，您必须在预览图像时花费时间来寻找图像。通常，单击文章侧边栏中的图像将触发包含图像轮播的全屏模式。没有CSS，旋转木马就消失了，取而代之的是上面有一排未标记按钮的图像。这是一个令人讨厌的人，但是如果旋转木马并不完全在页面上，与点击图像在页面顶部的位置相反，没有能力跳到它的地方，那将是完全可以的。

如果我没有提到文章中找不到Wikipedia徽标，我会很粗心！它甚至不是白色的白色SVG。该链接实际上一无所有：

 <a href="%E2%80%9C/wiki/main_page%E2%80%9D" title="“访问主页”"> </a>

值得庆幸的是，“导航”下的“主页”链接是回家的另一种方式，而无需按下浏览器后退按钮。但是，当在主页上做得如此出色时，在页面上没有品牌的品牌仍然很奇怪。

Wikipedia的HTML问题主要存在于我期望的频率较少而不是文章的功能中。从长远来看，他们从未阻碍我的阅读经历。

？该网站做得很好	？网站可以改善什么
该站点保持干净的结构和层次结构。	没有CSS背景图像，可以将徽标位置移至页面顶部。
跳过链接有效地用于搜索和导航。	按钮应包括标签。
文章内容是语义且易于阅读的。	页面上的图像轮播可以在扳机发生的地方加载并使用适当的按钮标签进行控件。

使CSS不再获得更好的体验的方法

CSS是现代网络的关键组成部分。正如我们所看到的那样，没有它，许多站点几乎是无法使用的 - 我们正在计算该组合中一些最可识别的和使用的网站。我们看到的是，充其量仍然可以实现站点的主要目的，但是一路上有障碍。诸如：

• 缺失或语义上不正确的跳过链接
• 一起运行的链接
• 超大图像需要额外的滚动
• 空元素，例如列表项目和按钮标签

让我们看看是否可以将它们编译为可能会禁用甚至不可用的情况的情况下考虑的最佳实践列表。

在文档顶部包括一个跳过导航链接

Having a hidden link to skip the navigation is a must. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  溢出：隐藏；
  padding: 0;
  position: absolute;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Leave whitespaces where they make sense

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

Use width and height attributes liberally

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghwm/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="那个时候我尝试在没有CSS的情况下浏览网络" >

<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"></polygon>
</svg>

Prepare SVGs for a white background

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- 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"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Label those buttons!

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
</button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  显示：块;
  溢出：隐藏；
  height: 0;
}

If there are

elements acting as buttons, they can remain, but they should be static, and the contents should be placed in a button.

Now, if the icon is an SVG, we can ensure the title tooltip can still be seen by using aria-labelledby and assigning the id to the title.

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <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"></polygon>
  </svg>
</button>

结论

It can be easy to either forget or be afraid to check how a site appears when CSS isn't available to make the UI look as good as intended. After a brief tour of the Non-CSS Web™, we saw just how important CSS is to the overall design and experience of sites, both small and large.

And, like any tool we have in our set, leaning too heavily on CSS to handle the functionality and behavior of elements can lead to poor experiences when it's not around to do its magic. We've seen the same be true of sites that lean too heavily on JavaScript. This isn't to say that we should not use them and rely on them, but to remember that they are not bulletproof on their own and need proper fallbacks to ensure an optimal experience is still available with or without our tooling.

Seen in that light, CSS is really a layer of progressive enhancement. The hierarchy, form controls, and other elements should also remain intact under their user agent styles. The look and feel, while important, is second when it comes to making sure elements are functional at their core.

以上是那个时候我尝试在没有CSS的情况下浏览网络的详细内容。更多信息请关注PHP中文网其他相关文章！