我是一名 Winforms 和业务引擎开发人员,两年多来第一次使用 asp.net,在那段时间里我注意到了一些约定的变化。
反“布局表格”运动背后的逻辑是什么?
是否允许使用 css 类来处理布局,如果是这样,这是否真的是页面上的一个问题,你相当肯定会保持静态,或者它只是被认为是“丑陋的”?
我是一名 Winforms 和业务引擎开发人员,两年多来第一次使用 asp.net,在那段时间里我注意到了一些约定的变化。
反“布局表格”运动背后的逻辑是什么?
是否允许使用 css 类来处理布局,如果是这样,这是否真的是页面上的一个问题,你相当肯定会保持静态,或者它只是被认为是“丑陋的”?
补充几点:
不要对此狂热。CSS 并不完美,有些事情可以通过表格更轻松地完成。因此,如果需要,请在其中放一张小桌子。它不会杀了你。
基于表格的布局的主要“邪恶”是那种深度嵌套的混乱,它曾经是精确控制页面的唯一方法。您将在表格中的表格中放置表格,并策略性地放置透明图像以控制间距。我认为这在当今非常罕见,而 CSS 会让你清理 90% 的混乱。
“语义网”是一个很好的目标,其中的标签是为了给页面赋予意义,而不是描述布局。然而,当前版本的 HTML 并没有走得太远。因此,您的页面中总是会有大量标签用于布局,没有其他意义。这并不意味着您不应该尝试尽可能地分离内容和布局;这只是意味着你不会 100% 到达那里。
它使可访问性变得困难。想象一下,您是一个文本浏览器,您想向盲人大声朗读网站的内容。大多数基于表格的布局往往很难抓取和“理解”机器。
在这些关于表格与 CSS 的讨论中存在很多精英主义/政治/狂热主义,但在很大程度上,CSS 布局比基于表格的布局更干净。
从理论上讲,它们也更容易维护。比如说,你想把导航从左边移到右边吗?当然,只需更改一个 CSS 文件就可以了。但是话又说回来,这通常在更复杂的网站上表现平平,在这些网站上,CSS 通常是深度嵌套的,并且非常复杂以至于更改不容易,而模板系统使基于表格的布局并非完全不可维护。
值得一提的是,在显示表格数据时仍然可以合法使用 <table> 标签。我使用的经验法则是,如果我要显示的东西可以很容易地存在于电子表格中,那么表格标签就是要走的路。
有一篇关于 sitepoint 的非常好的文章,它将在表格中设计页面与 css 并肩作战。这是一本非常有趣的读物,并突出了设计人员/开发人员在使用表格时的一些主要陷阱,例如带有表格的源代码错位,通常需要额外的源代码,并且未来的更改不可避免地会变得复杂。
对基于表格的布局的主要批评之一是它们是死板的。它们用于在所有浏览器中创建像素完美的页面。这样做的代价是僵化,这会损害可访问性。800x600 像素屏幕的布局设计可能会导致拥有宽屏高清显示器的人不得不真正眯着眼睛阅读所有内容。当访问者在浏览器中强制增加字体大小时,它会破坏布局,有时会非常糟糕。
CSS 驱动的布局很灵活,可用于创建在任何屏幕/字体大小下看起来都不错(并且相似,但不一样)的布局。改进的内部结构还有助于屏幕阅读器和其他可访问性工具,以及移动平台/设备。
表格标签没有被弃用,并且仍然在 CSS 驱动的布局中发挥作用:它应该在显示表格数据时使用(如在电子表格中)。为此,它是完美的——但它不应再用于页面布局。
我强烈推荐阅读Designing with Web Standards一书。它适合设计师、开发人员和具有更多业务导向角色的人员。
这个想法是标记页面的内容/含义是一件更好的事情,不仅因为它使它易于修改和样式化,而且(可能更重要的是)因为它提高了可访问性,对于那些使用屏幕阅读器等的人来说(和搜索引擎!)。有时阅读深入了解可访问性。[如果你有表格数据,你当然应该使用表格。]
虽然“尽量使用 CSS,而不是表格来布局”是一个非常重要的规则,你应该尽可能地遵循,但最终,“做正确的事”是有一定成本的,当它变得太高时,你应该重新考虑你的优先事项。看http://giveupandusetables.com/
这可能不是正确的主题,但我对 CSS 布局最常见的问题是它们可能难以设置,因此它们总是拉伸父节点而不是溢出它。当您遇到 IE 做一些与 FF 完全不同的事情时,这会变得更加痛苦。使用表格修复这种混乱通常比您被迫使用的各种 JS 变通方法更容易且更合规。
老实说,反餐桌的人群常常因为只是标准的纳粹分子而感到内疚。事实是,自从“引导”涉及使用实际引导以来,人类一直在使用表格进行布局。
反对表格的主要论据是可访问性。这是一个重要的话题。然而,对于真正的罪魁祸首,CSS 只是一个创可贴的解决方案:HTML 是一种可怕的标记语言!
如果 HTML 不应该用于布局,那么为什么我们有 <center>、<b>、<u> 或 <i>?为什么我们没有一个 <story> 标签来对段落进行语义分组?为什么我们有 6 个标题标签?
我们需要停止假装 HTML 是严格语义的,而显然它不是。虽然 CSS 擅长实现表示,但定义它并不是那么好。如果是这样,我们就不需要 div soup 来进行 3 列布局。HTML5 真正应该发生的事情(当然不是)是让布局标签具有明确的角色,并使用 CSS 来阐明这些标签的作用。
老实说,不要太担心使用表格。如果文档流更容易,即使是一些最好的、语义上最正确的人也建议使用表格。只需使用有用的东西 - 使用表格的缺点并不是那么好。
随着 IE8 支持更新的 CSS 显示属性,关于表格与 CSS 的争论可能很快就会结束。由于以网格/表格格式考虑布局更容易和明智,因此表格、表格行、表格单元格、表格标题、表格列、表格行组等的可用性,因为 CSS 属性将轻松布局实现显着。
这篇文章有一个详细的概述。