SnappySnippet
Я наконец нашел время для создания этого инструмента. Вы можете установить SnappySnippet из Github. Это позволяет легко извлекать HTML + CSS из указанного (последнего проверенного) узла DOM. Кроме того, вы можете отправить свой код прямо в CodePen или JSFiddle. Наслаждайтесь!
Другие особенности
- очищает HTML (удаляет ненужные атрибуты, исправляет отступы)
- оптимизирует CSS, чтобы сделать его читабельным
- полностью настраивается (все фильтры можно отключить)
- работы с
::before
и ::after
псевдо-элементы
- хороший интерфейс благодаря проектам Bootstrap & Flat-UI
Код
SnappySnippet с открытым исходным кодом, и вы можете найти код на GitHub .
Реализация
Поскольку я многому научился, делая это, я решил поделиться некоторыми проблемами, с которыми я столкнулся, и своими решениями для них, возможно, кому-то будет интересно.
Первая попытка - getMatchedCSSRules ()
Сначала я попытался восстановить исходные правила CSS (из файлов CSS на веб-сайте). Удивительно, но это очень просто благодаря window.getMatchedCSSRules()
, однако, это не сработало. Проблема заключалась в том, что мы брали только часть селекторов HTML и CSS, которые совпадали в контексте всего документа, которые больше не совпадали в контексте фрагмента HTML. Поскольку синтаксический анализ и изменение селекторов не казались хорошей идеей, я отказался от этой попытки.
Вторая попытка - getComputedStyle ()
Затем я начал с того, что предложил @CollectiveCognition - getComputedStyle()
. Тем не менее, я действительно хотел отделить CSS-форму от HTML, а не вставлять все стили.
Проблема 1 - отделение CSS от HTML
Решение здесь было не очень красивым, но довольно простым. Я назначил идентификаторы всем узлам в выбранном поддереве и использовал этот идентификатор для создания соответствующих правил CSS.
Проблема 2 - удаление свойств со значениями по умолчанию
Присвоение идентификаторов узлам работало хорошо, однако я обнаружил, что каждое из моих правил CSS имеет ~ 300 свойств, делающих весь CSS нечитаемым.
Получается, что getComputedStyle()
возвращает все возможные CSS-свойства и значения, рассчитанные для данного элемента. Некоторые из них были пустыми, некоторые имели значения по умолчанию для браузера. Чтобы удалить значения по умолчанию, мне пришлось сначала получить их из браузера (и у каждого тега есть разные значения по умолчанию). Решением было сравнить стили элемента, поступающего с веб-сайта, с тем же элементом, вставленным в пустую строку <iframe>
. Логика заключалась в том, что в пустой таблице нет таблиц стилей <iframe>
, поэтому каждый добавленный элемент имел только стили браузера по умолчанию. Таким образом, я смог избавиться от большинства свойств, которые были незначительными.
Задача 3 - сохранение только сокращенных свойств
Следующее, что я заметил, было то, что свойства, имеющие сокращенный эквивалент, были излишне распечатаны (например, было border: solid black 1px
и то border-color: black;
, border-width: 1px
итд.).
Чтобы решить эту проблему, я просто создал список свойств, которые имеют сокращенные эквиваленты, и отфильтровал их по результатам.
Проблема 4 - удаление префиксных свойств
Число свойств в каждом правиле было значительно ниже после предыдущей операции, но я обнаружил , что у меня подоконник было много -webkit-
приставочных свойства , которые я не слышал от ( -webkit-app-region
? -webkit-text-emphasis-position
?).
Мне было интересно, стоит ли мне сохранять какое-либо из этих свойств, потому что некоторые из них кажутся полезными ( -webkit-transform-origin
и -webkit-perspective-origin
т. Д.). Однако я не выяснил, как это проверить, и, поскольку я знал, что большую часть времени эти свойства являются просто мусором, я решил удалить их все.
Проблема 5 - объединение тех же правил CSS
Следующая проблема, которую я обнаружил, заключалась в том, что одни и те же правила CSS повторяются снова и снова (например, для каждого <li>
с одинаковыми стилями в создаваемом выводе CSS было одно и то же правило).
Это был просто вопрос сравнения правил друг с другом и объединения их, которые имели точно такой же набор свойств и значений. В итоге вместо #LI_1{...}, #LI_2{...}
меня попал #LI_1, #LI_2 {...}
.
Проблема 6 - очистка и исправление отступа HTML
Поскольку я был доволен результатом, я перешел на HTML. Это выглядело как беспорядок, главным образом потому, что outerHTML
свойство сохраняет его в том формате, в котором оно было возвращено с сервера.
Единственное, что HTML-код был взят из outerHTML
необходимого, - это простое переформатирование кода. Поскольку это доступно в каждой IDE, я был уверен, что есть библиотека JavaScript, которая делает именно это. И получается, что я был прав (jquery-clean) . Более того, у меня есть дополнительные ненужные атрибуты ( style
и data-ng-repeat
т. Д.).
Проблема 7 - фильтры, нарушающие CSS
Поскольку существует вероятность того, что в некоторых случаях упомянутые выше фильтры могут нарушить CSS во фрагменте кода, я сделал их все необязательными. Вы можете отключить их из меню настроек .