我们已经多次介绍过在 CSS 中隐藏内容 的想法，最近的一篇文章是 Marko Ilic 的“比较在 CSS 中隐藏内容的各种方法”，它很好地比较了在不同情况下使用的不同技巧。Kitty Giraudel 在“负责任地隐藏内容” 中做了类似的事情，其中探讨了10 种方法——即使是这些方法，也可以说并不完全全面。
这是否意味着 CSS 混乱且难以理解？不。我觉得所有方法都是合乎逻辑的，都有良好的用例，并能带来良好的结果。请允许我进行一次假想的对话，来贯穿我的思考过程。
我需要完全隐藏这个东西。对所有人隐藏。
没问题，使用 display: none;。
我需要隐藏这个东西，但仅对屏幕阅读器隐藏，而不是视觉上隐藏。（例如，对屏幕阅读器没有额外意义的图标，因为附近有一个可访问的标签。）
没问题，这就是 aria-hidden 属性的作用。
我需要隐藏这个东西，但仅视觉上隐藏，而不是对屏幕阅读器隐藏。（例如，非活动选项卡的内容。）
没问题，使用 .sr-only 类。这使得它可以访问，但视觉上隐藏它，直到您删除该类。
糟糕，我实际上想视觉上隐藏这个东西，但我仍然希望它占用物理空间，而不是折叠。（例如，假设一个按钮有一个加载微调器图标，该图标仅在执行操作时才需要。按钮的大小应始终考虑该图标的大小，而不仅仅是在该图标可见时。这样，当该图标出现和消失时，就不会出现布局偏移。）
没问题，使用 transform: scale(0)，这将视觉上折叠它，但原始空间将保留，并且会使它对屏幕阅读器可访问。
哦，不错，我想我也可以对转换进行 transition。但实际上，那个 transition 不适合我的网站。我只是想要一些可以淡出和淡入的东西。
opacity 属性是可转换的，因此在淡入淡出时转换 0 到 1 之间的值。好消息是 visibility 也是可转换的。在淡出时，使用 visibility: hidden，在淡入时，使用 visibility: visible 来隐藏和显示屏幕阅读器中的内容。
这并不完全全面，但我发现它涵盖了 95% 的隐藏情况。
不错！奇怪的是，
visibility: hidden;不是隐藏元素的“负责任”方式（它不是，部分原因是人为的可访问性限制，也包括浏览器行为）。但在某些情况下，如果 aria-label 或其他内容已经服务于该目的，则这确实应该只是一行 CSS，无需考虑可访问性。不要忘记在淡出转换中添加延迟。只有这样，它才能淡出到 opactiy: 0，然后将 visibility 设置为 hidden。
我认为您不必这样做。
visibility在转换时会神奇地知道该做什么。使用display，您肯定必须这样做。问题是，这些活动对 SEO 有什么影响？
我想知道屏幕阅读器的所有问题最终是否都会消失，就像 IE 成为错误的问题一样。
有多少开发人员只是为了解决例如百万分之一的情况的可读性问题而继续修复？
当我的客户要求他们的网站在 IE < 7 中可见时，我直接忽略此类请求。阅读 SOF 可以看出，这是一个全球趋势。浪费编码时间来解决一些小问题有时是不值得的，尽管这听起来可能不那么政治正确。
聪明的人可以解决问题，明智的人更愿意选择哪些问题值得解决。
哇，真是及时。我有一个问题，部分与之相关。如果有人可以插话并回答，那就太好了。
我正在开发我的网站，到目前为止，它一直采用全宽布局。我喜欢居中的内容方法，有助于集中注意力（有点）。
无论如何，我现在需要一个侧边栏，但内容仍然居中。我不确定我是否可以使用“内容-侧边栏”方法，因为内容会向左移动而不是居中。
所以，我想出了这个方法。创建神圣的三杯布局（侧边栏-内容-侧边栏），并使用“visibility: hidden”隐藏第一个侧边栏（应该在左侧）。这个隐藏的侧边栏除了占用空间以保持内容居中之外，没有其他用途。
这样，我的主要内容仍然居中，右侧有一个我想要的侧边栏，左侧除了空白空间什么也没有。
这是一种正确的方法吗？抱歉，我对 Web 开发还很陌生（自学）。如果有人（也许是 @Chris？）可以分享他们的意见并指引我正确的方向，那就太好了。
感谢这篇有用的文章。但对我而言，隐藏内容有时会损害网站的 SEO，但肯定取决于具体情况。
出于某种原因，我无法理解这一点。如果我使用 display:none，这意味着我想对所有人隐藏它，即使是使用屏幕阅读器的人。那么这不是隐藏内容的正确方法吗？为什么我不应该使用 display:none？
假设您想“隐藏”悬停时打开的菜单中的内容。这是否意味着您希望屏幕阅读器用户永远无法访问该导航？不，屏幕阅读器用户应该能够访问该导航，因此，您使用不同的技术而不是
display: none来隐藏它，以便导航仍然可用。caj 的说法完全正确！正如文章所说，
display: none将对所有人隐藏，包括屏幕阅读器，如果这是您需要的。但是，如果您只想视觉上隐藏一个元素，但仍然希望屏幕阅读器支持，那么某种“屏幕阅读器专用”类 将元素剪裁出视图将起到作用。等等……
所以底线是：使用
display: none隐藏内容完全没问题。但是，如果您需要以一种仍然可以访问辅助技术或占用物理空间的方式选择性地隐藏元素，那么还有其他技巧。我一直在思考与 caj 相同的问题。
如果隐藏的侧边栏菜单不是由悬停打开，而是由标题中的菜单按钮打开，而屏幕阅读器可以看到该按钮。那么 display: hidden 可以吗？