Экранные страницы, которые используют CSS для разметки и форматирования ... как очистить CSS, применимый к HTML?

Question

Я работаю над приложением для скриншота небольших частей внешних веб-страниц (не всей страницы, а лишь небольшого ее подмножества).

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

Если вы знакомы с firebug, он может показать, какие стили CSS применимы к конкретному подмножеству выделенной вами страницы, поэтому, если бы я мог найти способ сделать это, то я мог бы просто использовать эти стили при отображении контента на моей новой странице. Но я понятия не имею, как это сделать ........

Answer 1

Сегодня мне нужно было очистить диалоги общего доступа Facebook, которые будут использоваться в качестве примеров динамического предварительного просмотра в нашем конструкторе приложений для приложений Facebook. Я взял кодовую базу Firebug 1.5 и добавил новую опцию контекстного меню «Копировать HTML со встроенными стилями». Я скопировал их функцию getElementHTML из lib.js и изменил ее, чтобы сделать это:

• удалить атрибуты class, id и style
• удалить onclick и аналогичные обработчики javascript
• удалить все атрибуты данных-чего-либо
• удалить явные ссылки и заменить их на "#"
• заменить все элементы уровня блока на div и встроенный элемент на span (чтобы предотвратить наследование стилей на целевой странице)
• абсолютизировать относительные URL
• встроить все примененные нестандартные атрибуты CSS в новый атрибут стиля
• уменьшить раздувание встроенного стиля с учетом стилизации наследования родительских / дочерних элементов путем перемещения дерева DOM вверх
• вывод отступа

Хорошо работает для простых страниц, но решение не на 100% надежно из-за ошибок в Firebug (или Firefox?). Но он определенно пригоден для использования веб-разработчиком, который может отлаживать и исправлять все причуды.

Проблемы, которые я нашел до сих пор:

• иногда свойство clear css не генерируется (оно довольно сильно нарушает компоновку)
• : hover и другие псевдоклассы не могут быть захвачены таким образом
• firefox сохраняет только определенные свойства / значения CSS в своей модели, например, вы теряете -webkit-border-radius, потому что это было пропущено анализатором CSS

В любом случае, это решение сэкономило мне много времени. Первоначально я вручную выбирал части их таблиц стилей и делал ручной выбор и постобработку. Это было медленно, скучно и загрязнило наше пространство имен класса. Теперь я могу удалить разметку Facebook за считанные минуты, а не часы, и экспортированная разметка не мешает остальной части страницы.

Answer 2

Быстрый взлом состоит в том, чтобы вынуть их CSS-файл и применить его к странице, которую вы используете для отображения данных. Чтобы избежать каких-либо помех, вы можете загрузить страницу в IFrame везде, где вам нужно ее отобразить. Конечно, я должен подвергнуть сомнению намерение этого кода. Вам разрешено публиковать информацию, которую вы просматриваете?

Answer 3

Хорошим началом было бы следующее: пройдите патч HTML, который вы планируете извлечь, собирая каждый элемент (и его ID / классы / встроенные стили) в массив. Немедленно возьмите стили для этих идентификаторов элементов и классов из таблиц стилей страницы.

Затем, от самого внешнего элемента (элементов) в целевом патче, проделайте свой путь вверх по остальным элементам в DOM аналогичным образом, в конечном итоге вплоть до элементов body и HTML, сравнивая их с исходный массив и сбор любых стилей, которые не были объявлены в целевом патче или его примененных стилях.

Вы также захотите проверить любые * объявления и захватить их. Затем убедитесь, что при повторном применении стилей к конечному выводу вы делаете это в правильном порядке, так как вы собрали их от низкого к высокому в иерархии DOM, и их нужно будет повторно применять к низкому уровню. .

Answer 4

Если у вас есть какой-либо способ определить «вычисляемый стиль», то вы можете эффективно отбросить таблицу стилей и, **** задыхаться, ****, применять встроенные стили, используя все свойства вычисляемых стилей.

Но я не рекомендую это. Это будет очень раздутым.