关于CSS定位的一些讨论
2015-11-30
作者:轩啸网络
这篇文章其实从整体内容看的话，没有怎么提到CSS。CSS呈现的一般的特点是网页上的优点之一。每个页面应该有一个样式表。所有作者都很推崇CSS定位技术。
使用CSS定位来放一些主要的页面组件定位到屏幕中去。换句话说，试着操作一些表格能做的内容，在过去的一段时间里，这些内容已经完成。这是关于用CSS定位代替布局表格的内容。
这些都是试验了很多次，很多设计页面没有使用表格布局定位显示的主要组件的结果。
这些页面包括以下内容：
1、我第一次接触这行的时候，就重新设计了标准的HTML（以及相关的CSS），我用它在网页上显示我的照片。目标显示是一个中心的图片，有边框，图片下面有一段文字说明。一个简单的页面布局是很难想象的。
2、我想知道如何以最佳的方式进行更复杂的页面布局。网页的信息是混合的，大多是不受批判和夸大的。因此我要把注意力放到特定的布局上去，新闻服务者和全球其他很多企业都在使用5行3列的形式。我使用各种技术来开发这样的布局方法，比如表格布局，使用CSS定位的无表格方法，表格布局和使用CSS定位的无表格方法混合的方案，比如说使用内置框架，框架，对象和其组合的方法。
3、我决定开发一套使用无表格技术用于我的网站上适合无表格布局的文章部分的模板。这确实意味着“工业强度”是不需要的。 （从上面的工业强度，意思是需要布局表格的可靠的，强大的和可预测的跨平台和跨浏览器行为已经变得很明显）。
这些思考和结论远远比他们应有的难。
CSS定位的一些短暂尝试
“简单的图片页面”
我的一个设计意图是能用于照片周围的各种边框。边框一定要呈现吗？所以，或许我应该简单地把图片包含在内容里面，并使用CSS能把边界放在想放在周围的任意地方吗？我可以通过使用表格来获取简单的边界。我不知道怎么做了就只能通过使用CSS应用到基本的标记的方法。然后以HTML结束：
<div class="outer"><div class="middle"><div class="inner"> <img src="....jpg" height="..." alt="..." width="..."> </div></div></div>换句话说，为了使用CSS来呈现边界，我必须设计和提供足够的标记，和图片内容完全无关的内容，给出样式表的操作方式。这需要设计和执行适合的CSS常规的呈现标记，尤其是使用CSS定位。这是由CSS展现出的最好的演示方式，比如CSS Zen Garden。如果你在使用HTML的时候，没有足够的远见和功能，你就不能实现你想从CSS获取的呈现方式和灵活性。他们不是分开的。这个方法首次让我意识到由于缺乏足够的标记，所以不能表达我试着想获取的内容，我需要用CSS定位、标记和跟其他密不可分的样式表来演示这种方法。
上述那种方式让我意识到很多人会试着在很多平台上使用浏览器来浏览我的图片的必要性。
为了应对在主流浏览器中遇到的常见问题，我们得以CSS的browser hacks作为终结的标志。尤其IE5有黑客入侵，由于缺乏，得迫使它作为图片的中心。但是我已经解决了任何平台的所有浏览器兼容性问题了吗？我还没有线索！能确保页面在平台的浏览器上运行的唯一方法就是测试这些内容。
CSS定位是如此的不堪一击，以至于我连简单的材料都不能发布，符合多年前发布的规格，关于人们能否看到是没有线索的。这跟是否有预期颜色是没有关系的。在页面的右边是不能显示的。一点都没有显示这是不可能的！
我对CSS定位的很多声明都保持怀疑。但是我肯定我缺乏这方面的知识。因此我选择了深入探讨5行3列布局这种特定的布局。 这种实验方式是能解决冲突的唯一方式。
以一种用表格布局的强大和可靠的方式来实现这种布局是不重要的！一天要完成100000或者更多次，因为这是一种在线新闻服务的基本布局。大概10000个当中，（Google就有4500，但是的确不知道所有的）他们每天会发布10篇文章。但是现实是他们平均发布的要更多吗？现在几乎没有人不使用表格布局的。当然Wired，cjnetnews.com等等。每天都要成功发布大概10,000到1000000表格布局页面。这是网页的本质。现在，这个网页的本质已经延续了好多年。
这是一个关于用CSS定位能试图实现简单表格的领域。我转录了从我找的例子的主要技术，以确保我能明白他们的行为，然后进行比较。他们一般需要浏览器和实现的表格布局相关联，他们一般不会超过表格布局能实现的范畴。他们会变得更糟糕，特别是以线性化这种方式。他们往往要求在主要文章的前面有侧边栏。
我发现有意义的是，有太多的人会用CSS定位来做表格布局，甚至以更高的开放成本，被认为是一项成就。好像喜欢使用CSS定位的每个人，对CSS定位的缺点是很清楚的，和表格布局相比，他们会觉得是克服了这一困难，赢得了胜利。如果你能用CSS定位轻松地解决表格布局，那你就是高手了！
通过只改变一个CSS文件，有时会要求使用CSS定位使整个网页产生重大的改变。通常情况下，这是不正确的。CSS定位经常会依靠于HTML当中的右嵌套元素，和具有以正确的顺序的内容。比如，如果“漂浮”被用作布置方法是被需要的。有时候唯一显著的布局变化能单独用CSS交换左边和右边。我的经验告诉我多数的布局两种方式下都不可行。我相信我的方法能帮助到广大朋友！
当我重新设计Child Support Analysis这个网站时，因为我根据合理的，安全的，经济高效的，面向未来的工程，使用了简单的表格布局。但是我也需要一些在其他网站上的文章模板，我开发无表格。这个页面连同其他主题就是一个例子。
这个项目还发现了CSS定位的一些致命的问题。这个页面用HTML4.01作为验证方式。样式表验证没有警告或者错误。但是我不知道是否可见，除了人们在Sony Vaio笔记本电脑的Windows2000系统使用测试设置的其中一个浏览器，（在英国的白天时段）！如果能可见，我不能预测它会是什么样子！这可不仅仅是一个简单的浏览器不兼容的问题。我需要表达我对没那么简单的页面的设计意图的语言。正如我能讲到的，没有人曾经试着设计一种语言能传播网页的页面布局决定的有用的抽象化概念。CSS1和CSS2没有接近。我不相信CSS能成功。（我想这确实是有希望将被证明是错误的，）
用户想要什么？他们不想"element X wrapped in element Y"，或者"element Z floated to the right"。他们想把内部网页链接置于浏览器窗口的右边和更低的左边位置，或者内部搜索引擎置于屏幕的顶部中心位置。但是我想破坏一些控制，而不是浏览器不能执行复杂规范细节的随意的结果。如果我能传递出页面布局决定，浏览器得使类别做到最恰当才行。但是我如果只传递页面布局决定中具体的实现方式，任何浏览器都不能执行完全错误的方向，没有任何线索接近我想要的结果。不能达到最佳效果，因为没有有用的参考的东西。
显然，当开发这些模板时，我会遇到很多浏览器限制的问题。当试着用CSS定位时，那是一种常规的实践。了解规范是不够的。另外你必须知道平台运行的主流浏览器的限制性。（过去，现在和未来）
我遇到了一个IE6的问题，以往的记录没有显示。我是第一次遇到这种情况。这使显示中的重要部分消失了！这不是能因为像素问题而被撤销的！我还在努力解决一个有名的“peekaboo”漏洞问题。你现在阅读的页面的CSS给予当前框一个样式（行高:1.2），当使用IE6时，试图确保当前的框的文本内容不会随意出现。还有多少其他的问题会在这里出现呢，使有些用户的页面看不见？
当我勾勒出CSS-P的设计方案时，试着实现，在很多工作之后我不知道怎么实现。有时候CSS规范完全不够。（有那么一段时间他们曾经打算支持页面很少的主要元素的布局。聪明的人决不会以这样愚蠢的方式来设计！）有时候我后面再放的设计工具支持是错误的。我或许在十年之内会再看看他们。
我发现我必须得做出妥协，因为时间有限，我只能检查一小部分平台和浏览器的结果。你需要覆盖CSS-P！在MacIE5.2系统上的slip和你的设计分离了！我获取了发给我的屏幕截图-我不知道一个浏览器是怎样解析我提供的和以那个结果终结的CSS的！
我试着妥协和限制功能。经典的IBM风格！我不知道我想获取什么，即使是我能够获取的任何貌似有理的系统。因此我试着让它显示出我有的和我实际获取到的信息。我在想有多少舍弃的CSS-P布局对缺乏经验的有好处？
CSS定位是一个没有用的制度
这种挑衅性的标题意图在于做出一个严肃的点，确实是真实的。不能说CSS定位是完美的，只能说IE的不足确实是一个问题。对于推荐给人们的CSS定位，整个系统不仅仅是建议再加上这些浏览器，需要工作。整个制度没有工作。
大家都知道CSS定位不能正常工作。CSS不能连续工作，除非Longhorn（下一个主要的Microsoft操作系统）能足够代替IE5和IE6。Longhorn在2005年6月份发布了之后会有一段时间Longhorn的资源很丰富。
一个有用的系统应该有什么内容？
可以理解的规范（为什么要把Eric Meyer这样聪明，知识渊博的人解释成为像你我这样的凡人呢？）
工具用于生成材料。（作者工具，能提供CSS定位材料、现成的模板等的WYSIWYG编辑器）
工具用于解释材料。（浏览器，相关平台上已知的可视和非可视行为）
回答查询和解决冲突的过程。（在这里我们不用紧张。我很赞赏把有帮助的解答发给新闻组和论坛的人们。如果他们在当前缺乏的环境中求生存，我能保证如果所有的部分都有用的话，那他们会设法做得更好。 ）
根据实际经验，流程不断完善和改进系统。每个优秀的流程开发师（我希望我能具有其中的特点）确保整个系统不断提高。我个人想能够找出改进过程的每个部分。但是我看不见太多的CSS定位改进流程，可能不存在。
有时候即使你知道其实摩托车的刹车已经失灵了，那你还愿意跟某人说“这款摩托车不错”吗？要么你可能会说“不，这没有关系”，要么你会建议说“要买个刹车系统完整的摩托车”？
那是CSS定位系统的本质。要么说不，或者提供一个合格的回答“是的，”。
对。
当被引入表格时，那么极少的浏览器在平台运行了。以一个更受控制的速度发展了布局复杂性。浏览器，网页站点和查看人口，“一起成长”。新的浏览器有丰富的“测试实例”，他们必须用网页操作。表格句法提供了相对受限的组合和对他们来说，提前描述得很好的可视化格式。
但是CSS定位面对着必须匹配令人难以置信的复杂度各种布局的问题。在各种平台上的各种浏览器必须这样做，不仅需要用旧版浏览器操作，而且有这么多新浏览器不能测试其复杂多样性的组合。CSS好像必须要比表格具有更多的组合顺序大小。有很多都取决于视口宽度。多数都不能由一种来源来判断，（比如表格的标记），但是取决于该订单的详细信息和CSS规则顺序的标记嵌套。
HTML不是一种编程语言。标签不是命令。CSS也不是编程语言。这些被认为是宣示。但是……HTML的顺序和嵌套，结合级联的复杂性，意思是有时候显示器工作的唯一方式会看起来需要执行它。然后考虑如下：
<div id="sidebar"> the site navigation </div>
<div id="article"> the article </div>
#sidebar { width: 200px; float: left; }
#article { width: 400px; float: left; }
侧边栏和文章会在哪里结束？取决于视口宽度。（它是600或者更多像素宽度吗？不是呢？）这只是旨在作为一个简单的例子来表明有整个HTML和CSS的知识是不能预测显示显示器会是什么样的。但是这些元素的整个定位对于用户来说是很重要的。你不能容易地以设计意图开始，源于标记和CSS。你能轻松地以标记和CSS作为开始，派生出设计意图或者最终显示。
我还没有想出能显示和规定的设计意图一致的特定的HTML+CSS转换。即使所有浏览器都能兼容，HTML和CSS也不能显示正式证明的系统。我不认为CSS能以完整计算的主要程序语言的方式来完整呈现。CSS能显示的地方，甚至你想布局的页面理论？
多数时候这就是一个简单的事实。如果你使用了简单的表格布局，你的页面将在几乎所有情况下工作。
CSS1的确不是的。建议说：“CSS1没有提供……一个布局语言”。
所以CSS2打算成为布局语言的页面，能代替布局表格吗？我不那么认为-定时是错误的，不讨论怎样处理理论的页面布局。如果当前的CSS版本能做到这样的话，甚至从理论上讲，我表示会很惊讶。他们的确不能实践！关于CSS2建议有一个相似页面布局的发言。“9.6.1固定定位……作者可能会使用固定的定位来创建框架式的呈现方式。”因此这是对框架布局视图的代替，而不是表格布局页面的替代。它不能正常地工作！
甚至当W3C说CSS能使用而不是表格布局的时候，他们没有说明CSS是能代替表格布局的。正如我知道的，没有其他人能做到这样。因此从CSS（1和2）跳跃出的幻想可以使用吗，而不是表格布局？
我希望CSS3能代替表格布局的需求。但是我没有看到任何的证据。我希望XHTML2.0能代替表格布局的需求，和CSS3和/或XSL相结合。我没有看到什么证据。
对于整个任务，表格布局是更容易的，的确更成熟，当然，表格布局甚至不能被弃用。HTML4.01 Strict能很好地操作,XHTML1.0 Strict，甚至XHTML1.1。在十多二十年里，由受欢迎的通用用户代理支持它将继续。包括那些适用的可接近性和/或小屏幕。
当你看到一些CSS定位专家歪曲HTML给予CSS一个机会的方式的时候，呈现方式应该是在CSS，而不是在HTML！如果CSS定位人们能够采用特定的基本的标记内容，添加“class”和“id”属性，然后呈现出想要的状态。他们必须至少获取线性化顺序和文档树的嵌套，理论上不止一个是想这样添加额外的控制和包装<div>s。
CSS定位歪曲了标记！不能达到完全分离。
