使用该系统进行网页布局的潜在问题是什么?

What are the potential problems with using this system to layout web pages?

本文关键字：问题 问题是 是什么 布局 系统 网页      更新时间：2023-09-26

对CSS的许多限制和兼容性问题感到沮丧，并发现自己不断需要编写javascript代码来让我的网页按照我想要的方式布局，我想我可以通过完全放弃CSS来简化未来的项目。

我写了一个javascript库，它解析XML文件中指定的布局，并使用绝对定位和大小，非嵌套div将它们应用于HTML文档。因此，我们的想法是，每个页面都有一个包含所有内容的HTML文件，一个指定内容在页面上如何排列的XML文件，以及一个用于表面样式的CSS样式表。

下面是一个例子。(按下按钮使版面膨胀。在所有主流浏览器的最新版本中进行了测试。)和另一个。

这个系统优雅地降级为纯html，甚至在禁用javascript的情况下允许单独的样式。

在我看来，这种方法不仅消除了许多跨浏览器问题，而且还允许我用更少的工作实现更复杂的布局。例如，我的理解是，以下不能单独使用CSS，至少不能没有混乱的嵌套div:

  1. 设置元素填充父容器内的可用宽度或高度。(如果父容器中有其他元素，这与width/height:100%不同。)
  2. 在任何容器内对齐任何元素的上/中/下，左/中/右，即使其大小未知。
  3. 填充一个未知大小的元素，而不增加该元素的大小(例如，如果一个div被设置为窗口大小的100%，它不能填充而不溢出窗口)
  4. 自动设置父元素中的所有元素间距相等。
  5. 设置浮动元素的高度。同样，独立设置水平和垂直收缩包装行为。
  6. 设置元素在列中浮动，而不是行(CSS3似乎支持列，但浏览器兼容性不好)

尽管如此，我确信这被认为是亵渎神灵。那么，使用这个系统来布局网页的潜在问题是什么呢?

编辑:代码在github上

你基本上是在尝试重写CSS，以一种你觉得比CSS做得更好的方式。这可能很好——也许它适合您——但您将面临局限性。

世界其他地方使用CSS。通常，让一个人(你)学习和遵循一个标准比让世界上其他人学习和遵循你的标准要容易得多。如果你和其他人一起开发，他们将不得不学习你的web开发方法，而不是把他们的CSS和HTML知识带到桌面上。

如果你去其他地方工作，你要么必须说服他们能够把你的方法带到桌子上，而不是使用世界标准的CSS(这通常在公司环境中是行不通的)，要么你必须学习如何正确使用CSS。

如果你想从其他人那里得到帮助(比如这里的stackoverflow)，你将无法做到，因为其他人都使用CSS。但是如果你有CSS的问题，我们可以帮助你。

这就是为什么它可能被认为是"亵渎神明"。我相信你写这个问题是为了得到关于这种方法潜在技术问题的反馈，但我认为政治/社区问题同样重要。

您已经发明了一个更强大的页面布局系统。你应该注意到CSS已经有了其他类似系统的规范草案:

    <
  • 模板布局/gh>
  • 灵活的盒子布局(FlexBox)
  • 网格布局
    • 网格模板布局<
  • 多列布局/gh>
  • 框对齐
  • 排除
  • <
  • 定位布局/gh>

这是2013年1月对这些提案的概述，是2011年概述的后续。

这些规格只是草案。其中一些可能最终会被废弃或与其他规范合并。一些浏览器已经实现了这些规范的一部分，通常在供应商的前缀后面。

虽然你现在还不能在CSS中可靠地使用这些特性，但在编写库时应该考虑这些规范的设计。你应该复制他们设计的部分，提供强大的布局工具，或者是干净和未来的证明。

它甚至可能是最好的，而不是编写自己的JavaScript库和XML语法，只是使用现有的JavaScript填充，如这些(不是一个详尽的列表):

  • css-template-layout
    • CSS模板布局
  • Flexie
  • 网格布局填充
  • CSS3MultiColumn
  • FTColumnflow
  • CSS区域填充

你可以使用像这样的多边形与CSS结合使用草案的语法。

即使这些polyfill功能不全或不够稳定，也可以从库中调用它们，或者至少复制它们的一些代码。

"对CSS的许多限制和兼容性问题感到沮丧，并发现自己不断需要编写javascript代码来让我的网页按照我想要的方式布局"建议你要么使用CSS错误，要么没有真正投入足够的时间学习CSS的细节，使它做你想要的(设置好的，通用的CSS很难，-就像编程JS一样-有一百万种方法可以做错-就像编程JS一样)。

你的例子似乎基于100%的高度页面工作。一旦您将html和body设置为高度(例如100%)，这实际上相对容易。一旦你这样做了，对盒子进行校验就变得非常容易了。

然后，回答你的问题:使用JS调用做所有的样式将比使用CSS昂贵得多，所以我强烈怀疑你的解决方案将比一个好的CSS或CSS+JS解决方案执行得差得多。浏览器已经对执行css触发的流的代码进行了极大的优化，而在JavaScript中做同样的事情要慢几倍。使用JS来实现特定的样式，因为CSS缺乏一个功能，比如像你的例子那样做框对齐，通常是必要的，但每次运行它时，它都必须在JS代码中重新运行完整的算法，而不是使用本机编译器更快的流流库，这些库可能适用于你想要实现的部分或全部布局。

我认为这样做没有任何问题，除了您必须确保选择支持的所有浏览器的输出相同。此外，您还必须处理页面上的元素数量是可变的情况，例如图片库或评论页面。根据经验，我可以告诉你，大量的小元素绝对会严重降低页面的性能。当达到50-100个元素时，滚动和调整窗口大小就会注意到这一点。相反，做谷歌图片在这种情况下所做的;将元素设置为display: inline-block并控制其宽度，然后允许它们自然换行。

我也觉得我应该指出，第1点和第2点可以很容易地在CSS中通过在父节点上使用position: relative和在子节点上使用position: absolute来实现，第3点可以通过在子节点上设置box-sizing: border-box来解决。您可以使用padding-box，但不太支持。

你所关注的几个问题在CSS3中也得到了解决。您提到了CSS3专栏。再看一下微积分。例如，您可以这样做以动态大小

为元素居中
left: 50%;
top: 50%;
margin-left: calc(-width / 2)
margin-top: calc(-height / 2)
相关文章：