Извлечение только css, используемого на определенной странице

Ответ 1

Ранее я использовал Dust-Me Selector, который является плагином Firefox. Он очень прост в использовании и универсален, поскольку поддерживает объединенный список на нескольких страницах, на которых используются значения CSS.

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

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Вопреки комментарию выше, Dust-Me Selectors 2.2 совместим с Firefox 3.6 (я только что установил его).

Ответ 2

Руки вниз, лучший, который на самом деле делает именно то, что вы хотите, только получая использованный css на странице и позволяя вам просто скопировать его в буфер обмена и вставить его в это расширение Chrome Используется CSS

Пример приблизительного изображения

Ответ 3

Они выглядят многообещающе:

• Unused-CSS.com - Услуга, которая охватывает ваш сайт и отправляет вам ваши результаты.
• Использование CSS - Firebug addon

Ответ 4

(Не для firefox, но, возможно, это помогает кому-то)

Если вы работаете с хромом, вы можете использовать это расширение:

CSS удаляет и объединяет (https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh)

• позволяет загружать комбинированный css со всеми используемыми стилями
• показывает неиспользуемые стили во всплывающем окне
• включает сгенерированные стили

Ответ 5

SnappySnippet

Существует анонс с открытым исходным кодом хром под названием SnappySnippet Я нашел его намного лучше, чем другие, просто расширяет уже доступный разработчик инструменты из хрома. Вы даже можете извлечь только одну часть страницы со всеми соответствующими css. Посмотрите fooobar.com/questions/19858/...

Ответ 6

• uncss: Найти неиспользуемый CSS - инструмент cli, использует phantomjs и выполняет JS на странице, может использоваться по URL-адресам
• grunt-uncss - работает только с статическими файлами
• (критический css - извлекает CSS для элементов, видимых в окне браузера)

Ответ 7

Я наткнулся на Uncss-Online - неофициальный сервер, очень удобный для тестирования или одноразового использования! Я думаю, что это лучший инструмент, который я встречал.

UnCSS - это инструмент, который удаляет неиспользуемый CSS из ваших таблиц стилей. Он работает с несколькими файлами и поддерживает Javascript-внедренный CSS. Это может быть использовано следующим образом:

• Скопируйте и вставьте HTML и CSS в соответствующие поля
• Нажмите кнопку
• Ждите магии, чтобы случиться
• Неиспользованный CSS исчез, возьмите остальное и используйте его!

Вы можете проверить их Github Page для других продвинутых способов использовать этот инструмент

Ответ 8

Это расширение Firefox, вероятно, решит вашу проблему, Dust-Me Selectors. Там также крошечное настольное приложение под названием CssCleaner или CssHelper, но мне не удалось найти ссылку на него... (просто попросите его на моей машине, загруженной давно для аналогичной задачи)

Ответ 9

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

• Go здесь (если эта ссылка не работает, вы также можете получить ее из pastebin).
• Перетащите большую кнопку в "Загрузить закладку" на панель инструментов закладок.

Что это. Теперь всякий раз, когда вы хотите инкапсулировать статическую страницу (т.е. Сделать ее переносной или если вы собираетесь ее обслуживать из собственного iframe), просто щелкните по закладке и отобразите все используемые CSS на текущей странице в оверлее. Нажмите на тень, чтобы закрыть оверлей.

Одна хорошая вещь с этим решением заключается в том, что он поддерживает быстро реагирующие страницы, так как медиа-запросы также извлекаются. В качестве бонуса медиа-запросы сортируются по видовому размеру (например, @media (max-width: 767px) появится после @media (max-width: 1023px)).

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

ПРИМЕЧАНИЕ. Чтобы заставить этот букмарклет работать с локальными файлами в Chrome, добавьте --allow-file-access-from-files в целевую ссылку Chrome. Пример:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Ответ 10

Здесь мое решение с использованием JavaScript:

var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
    var sheet = document.styleSheets[i];
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
    if (rules)
    {
        css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
        for (var j=0; j<rules.length; j++)
        {
            var rule = rules[j];
            if ('cssText' in rule)
                css.push(rule.cssText);
            else
                css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
        }
    }
}
var cssInline = css.join('\n')+'\n';

В конце концов, cssInline представляет собой текстовый список всех сталей страницы и их содержимого.

Пример:

/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }

/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }

/* Stylesheet : [inline styles] */
.hidden { display: none; }

Ответ 11

Попробуйте использовать этот инструмент, который представляет собой простой js-скрипт https://github.com/shashwatsahai/CSSExtractor/. Этот инструмент помогает получить CSS с определенной страницы, содержащей список всех источников для активных стилей, и сохранить его в JSON с источником как Ключ и правила как ценность. Он загружает весь CSS из ссылок href и сообщает все стили, примененные к ним. Вы можете сохранить вывод в файл JSON с любым именем.

Ответ 12

Хм.. Я бы бросил на это какую-то грубую силу, извлекая различные селектора CSS, используя синтаксический анализ файла CSS, а затем запустил каждый из них как селектор jQuery в браузере. Не очень элегантный, но должен работать?

Ответ 13

Проверьте PurifyCSS, и это для тех, кто может обрабатывать CLI или Gulp/Grunt/Webpack

Вы можете удалить неиспользуемый стиль с одной страницы или нескольких страниц или всего проекта, даже подумав, что классы вводятся javascript.

Если вы можете использовать Google, есть масса ресурсов, из которых вы можете узнать о PurifyCSS.