<分区>
对 CSS 的许多限制和兼容性问题感到沮丧,并且发现自己经常需要编写 javascript 代码以使我的网页按照我想要的方式布局,我认为我可以通过完全放弃 CSS 来构建页面结构来简化 future 的元素.
我编写了一个 javascript 库,它解析 XML 文件中指定的布局,并使用绝对定位和大小的非嵌套 div 将它们应用于 HTML 文档。所以这个想法是每个页面都有一个包含所有内容的 HTML 文件,一个指定内容在页面上的排列方式的 XML 文件,以及一个用于表面样式的 CSS 样式表。
Here is an example. (按下按钮使布局膨胀。已在所有主流浏览器的最新版本中进行测试。) And another.
这个系统优雅地降级为纯 html,甚至允许在禁用 javascript 的情况下使用单独的样式。
在我看来,这种方法不仅消除了很多跨浏览器的问题,而且让我能够用更少的工作实现更复杂的布局。例如,我的理解是,仅靠 CSS 无法完成以下操作,至少在没有乱七八糟的嵌套 div 的情况下无法完成:
- 设置元素以填充其父容器内的可用宽度或高度。 (这与 width/height:100% 不同,如果父容器中还有其他元素。)
- 在任何容器内将任何元素顶部/中心/底部、左/中心/右对齐,即使其大小未知。
- 填充一个未知大小的元素,而不增加该元素的大小(例如,如果一个 div 设置为窗口大小的 100%,则在不溢出窗口的情况下无法填充它。)
- 自动将父元素中的所有元素设置为等间距。
- 设置 float 元素的高度。同样,独立设置水平和垂直收缩包装行为。
- 设置元素 float 在列而不是行(CSS3似乎支持列但浏览器兼容性不好)
尽管如此,我确信这被认为是亵渎神明的。那么,使用该系统布局网页有哪些潜在的问题呢?