Как извлечь HTML CSS JS для определенных элементов DOM:

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

SnappySnippet: практическое решение

Я разработал SnappySnippet, чтобы заняться этим вопросом. Этот инструмент с открытым исходным кодом, доступный на GitHub, облегчает извлечение HTML-кода CSS из последнего проверенного узла DOM. Он также предоставляет возможности для прямого совместного использования кода с помощью CodePen или JSFiddle.

Функции SnappySnippet:

• Очистка HTML: Удаляет ненужные атрибуты и улучшает отступы.
• Оптимизация CSS: Повышает читаемость за счет оптимизации структуры кода.
• Полная настройка: Пользователи могут отключать или включать различные фильтры по мере необходимости.
• Поддержка псевдоэлементов: Поддерживается извлечение содержимого из псевдоэлементов ::before и ::after.
• Дружественный интерфейс: Создано с использованием Bootstrap и Flat-UI для интуитивно понятного пользовательского интерфейса.

Проблемы реализации и решения:

При создании SnappySnippet возникло несколько проблем. Вот как я их преодолел:

Получение совпадающих правил CSS:

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

Используя getComputedStyle():

Я переключил фокус на getComputedStyle() , но желаемая изоляция CSS оставалась неуловимой.

Проблема 1: Отделение CSS от HTML

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

Проблема 2. Удаление значений по умолчанию

getComputedStyle() возвращает все свойства и значения CSS для элемента, включая пустые значения и значения по умолчанию браузера. Я создал пустой iframe, чтобы извлечь стили по умолчанию и удалить несущественные свойства из фрагмента HTML.

Проблема 3: сохранение только сокращенных свойств

Я удалил свойства с сокращенными эквивалентами улучшить читаемость кода.

Проблема 4: Удаление префиксных свойств

Чрезмерное использование префиксных свойств (-webkit- и т. д.) представляло проблему. Я решил исключить эти свойства, поскольку их актуальность была неопределенной и чаще всего ненужной.

Проблема 5: объединение идентичных правил CSS

Повторяющиеся правила CSS были оптимизированы путем объединения правил с идентичные свойства и значения, что приводит к более компактному коду.

Проблема 6. Очистка и отступы HTML

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

Проблема 7. Гибкость фильтров

Пользователи имеют возможность отключать фильтры в меню «Настройки», обеспечивая гибкость для конкретных случаев использования.