使用display:none隐藏任何东西都可以吗?

时间:2010-02-18 15:28:54

标签: css xhtml seo screen-readers

使用display:none暂时或永久隐藏任何内容是否可以?在动态网站,其中许多页面组件来自不同的插件等,如果客户端不想在页面上有任何东西,那么我会使用dispaly:none来隐藏页面中的内容。我不会从实际来源删除东西,因为客户端可以回来再次请求启用该东西。

那么保持隐藏显示的优点和缺点是什么:如果我永远使用Display:none隐藏任何元素,那么没有?

在搜索引擎优化,屏幕阅读器,辅助功能等方面是否有任何缺点?

6 个答案:

答案 0 :(得分:12)

如果客户希望将其删除,则创建该页面的备份,并发布实际删除该页面的页面。不要将CSS替换为实际删除项目。如果他们决定将来需要它,那么请进入并交换您的实时副本备份。如果您正在处理动态输出(在PHP或类似技术的情况下),您可以使用注释来停止该特定输出,这样它们就不会包含在响应中。

答案 1 :(得分:4)

优点:很容易做到

缺点:

  • 您仍在服务器端加载组件,客户端将下载它们。浏览器根本不会“显示”它们。
  • 使用“查看源”的任何人都可以看到“隐藏”的值。所以永远不要用它来隐藏敏感信息。

您可以简单地“评论”这些部分服务器端,以节省大量服务器上的处理,带宽等。

答案 2 :(得分:2)

这里可能还值得一提的是,一些搜索引擎(例如Google)会对隐藏内容进行评估。

使用display:none;隐藏大量文本是许多搜索引擎接收的关键字垃圾邮件之一。

:)

答案 3 :(得分:1)

当您执行客户端Ajax时,使用'display:none'隐藏/显示内容是有意义的。这样,您可以在不进行服务器往返的情况下切换视图/选项卡。

当存在安全隐患时,需要从页面标记中实际删除某些内容。如果用户无权查看某些敏感信息,则在点击“显示来源”时不应该存在。

答案 4 :(得分:1)

当人们关闭css或使用不支持css的浏览器时,

display: none可以隐藏你想要的内容。

答案 5 :(得分:0)

就可访问性而言,“display:none;”隐藏的内容很有可能。不会被屏幕阅读器阅读。如果您打算这样做,这可能是可以接受的。

隐藏屏幕阅读器/ css-offer内容的另一种可能方法是使用此类:

.offscreen {
    position: absolute;
    left: -9000px;
    width: 0;
    overflow: hidden;
}

以下HTML:

<h3 class="offscreen">Site Navigation</h3>

有关隐藏技术的完整信息: http://www.access-matters.com/2005/04/23/screen-reader-test-results/