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 у фрагменті, я зробив усі вони необов’язковими. Ви можете відключити їх у меню " Налаштування" .
