Как скопировать html вместе со стилями css?

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

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

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

Вручную искать все CSS-правила очень неудобно.

В этом случае отлично помогает расширение для Chrome — CSS Used.

Что такое CSS Used

CSS Used — это расширение Chrome, которое автоматически собирает:

• HTML выбранного элемента;
• все используемые CSS-стили;
• стили дочерних элементов;
• необходимые селекторы.

Это очень удобно для:

• верстки;
• копирования UI-блоков;
• анализа чужих сайтов;
• быстрого прототипирования;
• рефакторинга интерфейсов.

Установка расширения CSS Used

Устанавливаем расширение из Chrome Web Store:

CSS Used

Как пользоваться CSS Used

После установки расширения:

• открываем нужный сайт;
• запускаем DevTools;
• выделяем HTML-элемент.

В панели инструментов Chrome, рядом с вкладками инспектора, появится новый раздел:

• CSS Used.

Что делает плагин

После выбора HTML-блока расширение автоматически:

• собирает HTML элемента;
• вытаскивает все используемые CSS-стили;
• подтягивает стили дочерних элементов;
• убирает лишний CSS.

В результате можно быстро получить готовый UI-блок практически без ручного поиска стилей.

Когда это особенно полезно

• копирование элементов интерфейса;
• адаптация чужой верстки;
• изучение frontend-решений;
• работа с Bootstrap и Tailwind;
• быстрое создание прототипов;
• извлечение отдельных блоков сайта.

Плюсы CSS Used

• экономия времени;
• не нужно вручную искать CSS;
• поддержка вложенных элементов;
• работает прямо в Chrome DevTools;
• удобно для frontend-разработки.

Итог

CSS Used — очень полезное расширение для Chrome, которое помогает быстро получить HTML и CSS конкретного элемента сайта.

Особенно полезно для верстальщиков, frontend-разработчиков и всех, кто регулярно работает с интерфейсами и стилями.