以编程方式分析CSS布局

Question

我希望能够爬取几个博客并以编程方式分析它们基于HTML和CSS的布局，例如侧边栏是否在主内容左侧或右侧，有多少列以及它们有多宽。

最佳方法是什么？是否有任何工具或库可用？

（我更喜欢使用Python或PHP解决方案。）

- Christian Davén

---

这听起来通用性很难实现。你的限制只检查博客可能会有所帮助，因为如果它们使用已知模板，可能会有一些统一性。 - thirtydot

Answer 1

这听起来像是一个非常困难的任务，需要使用纯服务端 CSS 和 HTML 解析 - 你实际上需要重新创建浏览器的渲染引擎才能得到可靠的结果。

根据你需要这个的原因，我可以想到一种类似以下步骤的方法：

- 使用类似于“wget --page-requisites”的工具获取页面和样式表。 - 然后要么： - 使用类似Selenium的工具遍历每个已下载页面，搜索元素名称并输出它们的位置（如果在 Selenium 中可能是可能的。我假设它是可能的，但我不确定）。 - 创建一个 jQuery 片段并将其注入到每个已下载页面中。jQuery 搜索名为“sidebar”、“toolbar”等的元素，获取它们的位置，将结果保存到本地 AJAX 片段中，并继续处理下一个已下载页面。你只需要在浏览器中打开第一个页面，其他操作会自动完成。这不是一个简单的实现，但是可以做到。

如果你能使用像.NET这样的客户端应用平台，那么构建一个定制应用程序会更容易，它包含了浏览器控件，你可以更自由地访问其中的DOM，而不仅是使用jQuery。

- Pekka

---

您还可以通过ChromeDevToolsProtocol与Google Chrome的实例进行通信。 - macedoine

Answer 2

看起来可以通过 PhantomJS 实现，使用类似这样的 Javascript 代码：

phantom.viewportSize = { width: 1024, height: 768 };

var page = new WebPage();

page.open("http://mashable.com/", function(status) {
    if (status === "success")
    {
        page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", function() {
            var position = page.evaluate(function() {
                return jQuery('#sidebar').position();
            });

            // Now position.left and position.top contains the
            // position of the #sidebar element. Use other
            // jQuery functions to calculate the relative position.

            phantom.exit();
        });
    }
});

- Christian Davén

Answer 3

你是在寻找这个吗？

http://cthedot.de/cssutils/

这是在Google搜索中的第一个结果。还有至少其他四个看起来很有希望。也许你应该试试Google，列出你找到的内容，并针对特定的软件包寻求具体建议。

- S.Lott

---

现在看起来不错。:) 但是这个解析器真的能够计算元素的结束位置吗？我不确定，因为那需要渲染整个文档并预测文档的流程。无论如何，对于大多数情况来说可能已经足够了。 - Pekka

你搜索了什么？我找不到。无论如何，解析CSS只是其中的一步。 - Christian Davén

@Christian Davén: "python css parser" http://www.google.com/search?client=safari&rls=en&q=python+css+parser&ie=UTF-8&oe=UTF-8。另一部分是下载网站。你可以使用`urllib2`、`curl`和http://curl.haxx.se/libcurl/python/来完成。我认为这同样很明显。 - S.Lott

我指的是渲染页面布局，而不是通过http获取数据。知道元素的css并不总是告诉我它的位置。 - Christian Davén

@Christian Davén：您将模拟哪个浏览器？请更新问题，指明您想要查看的特定渲染算法。 - S.Lott