Программный анализ макета CSS

Question

Я хотел бы сделать несколько блогов и программно проанализировать их HTML и CSS-макеты, чтобы увидеть, например, если боковая панель находится слева или справа от основного содержимого, сколько столбцов и насколько они широки.

Как бы я сделал это наилучшим образом? Могу ли я использовать какие-либо инструменты или библиотеки?

(Я бы предпочел решение на Python или PHP.)

Answer 1

Это звучит как чрезвычайно сложная задача, используя чистый серверный CSS и парсинг HTML - вам фактически придется заново создать движок рендеринга браузера, чтобы получить надежные результаты.

В зависимости от того, что вам нужно для этогоЯ мог бы придумать способ где-то в этом направлении:

• Извлечение страниц и таблиц стилей с использованием чего-то вроде wget с --page-requisites

• Затем либо:

  • Пройдите по каждой загруженной странице с помощью инструмента, подобного Selenium , найдите имена элементов и выведите их позиции (если это возможно в Selenium. Iпредположим, что это так, но я точно не знаю)

  • Создайте фрагмент jQuery, который вы вставляете в каждую из загруженных страниц.JQuery выполняет поиск элементов с именами «боковая панель», «панель инструментов» и т. Д., Получает их позиции, сохраняет результаты в локальном фрагменте AJAX и переходит на следующую загруженную страницу.Вам нужно только открыть первую страницу в браузере, остальное произойдет автоматически.Не просто реализовать, но возможно.

Если вы можете использовать платформу приложений на стороне клиента, такую ​​как .NET, вам может быть проще создать собственное приложение, которое включает в себяуправление браузером, доступ к DOM которого вы можете получить более свободно, чем при использовании только jQuery.

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();
        });
    }
});

Answer 3

Вы ищете это?

http://cthedot.de/cssutils/

Это был первый хит в поиске Google. Было по крайней мере четыре других, которые выглядели многообещающими. Возможно, вам следует попробовать Google, перечислить то, что вы нашли, и попросить конкретные советы по конкретным пакетам.