css - 如何计算服务器端应用的填充量？

Question

是否可以在服务器端运行浏览器运行的相同进程，以便将 CSS 应用到 DOM？

例如，我可以使用一个 HTML 文档，应用所有 CSS 规则(链接、嵌入和内联)来计算任何元素的属性吗？我最关心的是盒子模型(即它的位置、边距、边框和填充)。

到目前为止我能想到的唯一方法是使用 Selenium RC 和 jQuery 将值传回。然而，这似乎非常消耗资源，所以我想知道是否还有其他方法。我在 Google 上搜索了一下，搜索“解析 CSS”只会带来读取单个样式的结果，而不是将所有 CSS 规则应用于整个 DOM，然后计算出结果。

任何语言都可以。

示例(不是真正的用例，但类似)

您正在构建一个 API，它允许了解 HTML 和 CSS 的人生成 Java GUI。 API 允许开发人员传入 HTML，然后返回所有代码来构造 GUI，所有元素具有相同的大小和位置。

Answer 1

首先阅读this document on how browsers work意识到计算类似的东西需要布局引擎。诸如渲染字体和图像的尺寸以及具有复杂的边距折叠规则的盒模型等因素都会影响最终的布局。

除非您可以在服务器端应用程序中托管布局引擎(如 WebKit )，否则您正在考虑实现布局引擎，减去实际的屏幕绘制，只是为了建立应用程序的布局(如果我理解的话)您的要求正确)。

话虽如此，WebKit引擎在很多元素中都有使用，但是most of them are browsers或其他客户端软件。在 Google 上快速搜索确实出现了一个有趣的结果:

• phantomjs (“带有 JavaScript API 的 headless WebKit”，因此您可以使用 JavaScript 来检查 DOM 以及所应用的 CSS 的效果)

如果您无法托管现有布局引擎，可能有一些类似 HTML (XML) UI 布局技术可用。也许那些是更好的选择？例如。 Microsoft's Silverlight/XAML , Adobe's MXML (也支持一些CSS规则)，UIML ，或Mozilla's XUL 。