争取纯CSS布局有商业原因吗?
似乎每次尝试创建纯CSS布局都比使用一两个表花费更多的时间。使三列长度相等,数据量不同似乎需要特别的技巧,特别是在处理跨浏览器问题时。
我的问题:
这几张桌子会伤害谁?
在表格数据上,表格似乎表现得特别好,为什么在当今这个时代如此受嘲笑呢? Google.com的源代码中有一个表格,其他许多网站也是如此(stackoverflow.com并非如此)。
解决方案
回答
我认为CSS布局的表格越少越干净,但我同意有时我们只需要使用表格。
从业务角度来说,通常是"将以最快,最可靠的方式完成它的方法"。以我的经验,使用几个表通常属于该类别。
我发现减轻CSS浏览器中跨浏览器差异的一种非常有效的方法是使用页面顶部的" strict"文档类型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
另外,对于可怕的IE6 CSS问题,我们可以使用此技巧:
.someClass { background-color:black; /*this is for most browsers*/ _background-color:white; /*this is for IE6 only - all others will ignore it*/ }
回答
像很多东西一样,这是一个好主意,经常会被抬得太远。我喜欢div + css驱动的布局,因为通常仅通过样式表即可轻松更改外观,甚至极大地改变外观。与低级浏览器,屏幕阅读器等保持友好也很好。但是,像大多数编程方面的决定一样,在做出决定时应考虑网站的目的和开发成本。任何一方都不是100%的正确方法。
顺便说一句,我想每个人都同意表应该用于表格数据。
回答
CSS布局的商业原因:我们可以说"我们的门户网站完全可以自定义/可滑动,而无需编写代码!",这可以震撼客户。
再说一遍,在用表设计块元素时,我看不到任何邪恶。所谓的块状元素,是指在不同的设计中将所述元素分开没有任何意义。
因此,表格数据当然最好与表格一起显示。在自己的表中设计主要的构建基块(例如,菜单栏,新闻自动收录器等)也应该可以。 methink,只是不依赖表格来进行整体页面布局,这样就可以了。
回答
这个想法是设计者可以设计,而Web开发者可以实现。在动态Web应用程序中尤其如此,我们不希望设计人员在源代码中乱七八糟。
现在,虽然有模板引擎,但设计师似乎只是喜欢发疯,而CSS允许比表格产生更多的特技。
话虽这么说:作为一名开发人员,我之所以放弃CSS Layout,主要是因为我的设计反而很烂,所以至少它可以正常吸..-)但是,如果我雇用一名设计师,我将让他使用他所见即所得的编辑器吐出来的任何东西。
回答
保持布局和内容分开,使我们可以轻松地重新设计网站或者对其进行调整和更改。可能需要更长的时间,但是软件开发的最长阶段是维护。在维护过程中,最好是将CSS与CSS友好的站点,其内容与设计之间应清晰区分。
回答
使用语义HTML设计是其中的一件事,除非我们进行实践,否则我们将不知道自己缺少什么。我曾在多个站点上工作过,但事实证明,该站点在对服务器端代码几乎没有影响的情况下经过了重新样式设置。
重新设置网站的样式是一个非常普遍的要求,现在我已经注意到更多了,因为我能够对"说"表示赞成,而不是试图说出自己的出路。
而且,一旦我们学会了使用页面布局系统,它通常不会比基于表的布局更难。
回答
::在Palmsey和Jon Galloway点头::
我同意可维护性因素。完成初始布局的确花了我一点时间(因为我仍然是CSS领域的绝地徒弟),但是仅更新1个文件就对15页的网站进行全面的改进是天堂。
回答
这是一个好的做法,还有一些其他原因:
- 可访问性-理想情况下,所有人都应该可以访问网络
- 性能-节省带宽并更快地在移动设备上加载(这些设备在某种程度上缺乏带宽,因此无法快速布局复杂的表)。除了快速加载始终是一件好事...
回答
以我的经验,只有在需要100%支持可访问性时,这才真正增加业务价值。如果我们有视障用户和/或者使用屏幕阅读器查看网站,则需要确保网站符合无障碍标准。
使用屏幕阅读器的用户将倾向于拥有自己的高对比度,大字体样式表(如果网站本身不提供样式表),这使屏幕阅读器可以轻松解析页面。
当屏幕阅读器阅读页面并看到表格时,它会告诉用户这是一张表格。因此,如果我们使用表格进行布局,则会引起混乱,因为用户不知道表格的内容实际上是商品,而不是其他表格数据。菜单应该是div的列表或者集合,而不是包含菜单项的表,这同样令人困惑。我们应该确保使用blockquotes,alt-tag标题属性等使其更具可读性。
如果我们使设计由CSS驱动,则整个外观都可以被剥离,并替换为原始视图,这些用户非常容易理解。如果我们具有内联样式,基于表的布局等,那么这些用户将很难解析内容。
虽然我确实认为,仅在使用CSS进行站点布局时,某些事情的维护变得容易了,但我认为并非所有维护都是如此-尤其是在处理跨浏览器CSS时,显然是一场噩梦。
简而言之,如果我们希望所述用户可以访问该页面,则应以符合标准的方式描述其组成。如果我们不需要/不需要并且将来可能不需要,那么不要浪费太多时间尝试成为CSS纯粹主义者:)使用适合我们并能胜任工作的样式和布局技术更轻松。
干杯!
[编辑在此答案的错误或者误导部分中添加了删除线,请参阅注释]
回答
在现实世界中,采用一种设计并完全重新设计外观而不触碰标记的机会就很少了。对于像csszengarden这样的博客和混合演示来说,这是很好的选择,但实际上,在设计中等复杂的任何网站上,这都是虚假的好处。使用CMS更为重要。
DIV加上CSS!=语义。好的HTML对于SEO和可访问性总是很值得的,无论是使用表还是CSS进行布局。通过将非常简单的表与一些良好的CSS结合起来,我们将获得真正高效,快速的Web设计。
表布局比CSS布局更易于访问,反之亦然,它完全取决于内容的源顺序,仅仅是因为我们避免使用表并不意味着拥有屏幕阅读器的用户会自动在网站上度过美好的时光。布局表与屏幕阅读器的访问无关,只要线性化内容就有意义,就如同我们进行CSS布局一样。数据表是不同的;它们确实很难正确标记,即使如此,屏幕阅读器软件的用户通常也不知道他们需要使用哪些命令来理解数据。
我们不必担心使用一些布局表,而应担心正确使用了标题标签和替代文本,以及正确分配了表单标签。然后,我们将对现实世界中的可访问性有一个很好的了解。
这是基于几年来进行用户对Web可访问性的测试(专门研究可访问的站点设计)的经验,以及从为在线银行Cahoot咨询这一主题而获得的一年经验。
因此,我对发布者的回答是"否",没有商业理由更喜欢CSS而不是表格。它更优雅,更令人满意,更正确,但是作为我们构建它的人以及必须维护它的人,我们是世界上仅有的两个会问它是CSS还是表格的老鼠的人。
回答
When a screenreader reads a page and sees a table, it'll tell the user it's a table. Hence, if you use a table for layout, it gets very confusing because the user doesn't know that the content of the table is actually the article instead of some other tabular data
这实际上是不正确的。屏幕阅读器(如JAWS,Window Eyes和HAL)会忽略布局表。他们在处理真实网络方面确实表现出色。
回答
我刚刚记得的另一件事,我们可以为页面分配不同的样式表以进行打印还是显示。
除了常规的样式表定义之外,我们还可以添加以下标记
<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />
当我们将文档发送到打印机时,它将根据该样式呈现文档。这使我们可以去除背景图像,其他页眉/页脚信息,而仅打印原始信息,而无需创建单独的模块。
回答
doing a complete revamp of a 15 page web site just by updating 1 file is heaven.
这是真实的。不幸的是,让15,000个复杂且差异很大的页面使用一个CSS文件是我们梦worst以求的事情。更改某些内容会破坏一千页吗?谁知道?
在我们这样的大型网站上,CSS是一把双刃剑。
回答
如果我们拥有面向公众的网站,那么真正的商业案例就是SEO。
可访问性很重要,并且维护语义(X)HTML比维护表布局要容易得多,但是Google上的第一名将带回家。
例如:每月网络报告:7月的页面浏览量为1.27亿
Monthly web report: 127 million page views for July ... Latimes.com keeps getting better at SEO (search engine optimization), which means our stories are ranking higher in Google and other search engines. We are also performing better on sites like Digg.com. All that adds up to more exposure and more readership than ever before.
如果我们查看他们的网站,他们的CSS布局相当不错。
通常,这些天我们发现相对较少的表布局在SERP中表现良好。
回答
我认为根本没有商业原因。技术原因,也许即使如此,这在世界范围内也几乎没有什么意义,然后我们在IE中查看它,然后崩溃并哭泣。
回答
*I would let him use whatever his WYSIWYG Editor spits out I just threw-up a little... *ahh hello? You don't think the graphic designer is writing the CSS by hand do you?
有趣的是,我曾与一些设计师合作过,其中最好的设计师会手动调整CSS。我想到的那个人实际上将所有设计工作都作为带有几个CSS文件的XHTML文件进行,并根据需要动态创建图形元素。他使用Dreamweaver,但仅将其真正用作导航工具。 (我从那个人那里学到了很多东西)
一旦我们投资学习纯粹基于CSS的设计并且有一点经验(找出IE的缺点(公平地说,它变得越来越好)),它就会变得更快。我在内容管理系统上工作,几乎不需要更改应用程序,设计人员就可以得出完全不同的外观。
回答
由于这是stackoverflow,我将为我们提供程序员的答案
语义101
首先看一下这段代码,然后思考这里出了什么问题...
class car { int wheels = 4; string engine; } car mybike = new car(); mybike.wheels = 2; mybike.engine = null;
当然,问题在于自行车不是汽车。对于自行车实例,汽车类是不合适的类。该代码没有错误,但是在语义上是不正确的。它对程序员的反映很差。
语义102
现在将此应用于文档标记。如果文档需要显示表格数据,则适当的标签应为<table>。但是,如果将导航放置到表中,那么我们将滥用<table>
元素的预期用途。在第二种情况下,我们没有呈现表格数据-我们正在(mis)使用<table>
元素来实现呈现目标。
结论
这对谁有害?没有人。如果我们使用语义标记,谁会受益?我们以及专业声誉。现在去做正确的事。
回答
我实际上可以在用户页面上看到堆栈溢出中的表。
它甚至有很多内联样式...
回答
除了易于更新和合规...
我曾经设计过所有基于表格的网站,起初我很抵制,但后来我逐渐转向CSS。它不是一夜之间发生的,但是它发生了,我们也应该这样做。
有些夜晚,我想把电脑扔到窗外,因为我应用于div的样式不能满足我的要求,但是我们可以从这些障碍中学到东西。
对于企业而言,一旦我们开始使用CSS来科学地设计网站,就可以为每个网站开发流程,甚至可以使用过去的网站,而只需添加不同的标题图形,颜色等。
另外,请确保嵌入/包括网站的所有可重用部分:页眉,子页眉,页脚。
一旦克服了驼峰,它就会从那里下山了。祝你好运!
回答
我们将网页更改为基于DIV / CSS的布局的主要原因是延迟渲染基于表格的页面。
我们有一个公共网站,其大部分用户群位于印度等国家,那里的互联网带宽仍然是个问题(它的日趋完善,但仍不尽人意)。在这种情况下,当我们使用基于表格的布局时,用户不得不凝视空白页相当长的时间。然后整个页面将显示为一个整体。通过将页面转换为DIV,我们设法在用户进入我们的网站时几乎立即将一些内容带到浏览器,而这些内容足以吸引用户,直到浏览器下载页面的整个内容。
基于表的实现的主要缺陷在于,浏览器仅在下载该表的整个html之后才会显示该表的内容。当我们有一个主表来包装页面的全部内容时,以及当我们有很多嵌套表时,这个问题就会爆发。对于"灵活表格"(没有固定宽度的表格),下载整个表格标签后,浏览器必须解析到表格的最后一行以找出每一列的宽度,然后必须再次解析以显示内容。直到所有这些事情都发生了,用户必须凝视着空白屏幕,然后所有内容都会在屏幕上显示出来。
回答
肯定有。如果我们仍在为之奋斗,那我们就做对了。
在可维护性和生产率方面,DIV + CSS布局实际上比表格布局容易得多。只是继续练习,还为时过早。
表布局也很不错,它不只是用于布局,而且在进行微调时也有其他缺点。