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

Допустим, у вас был динамически сгенерированный сайт, над которым работало слишком много людей, прошлых и настоящих, и теперь у вас есть коллекция общих таблиц стилей, содержащих более 20 000 строк CSS. Он вообще не организован, есть несколько селекторов на основе классов и идентификаторов, но также слишком много селекторов на основе тегов. А затем предположим, что у вас есть 100 шаблонов, которые используют эти стили, через какой-то контроллер.

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

Раньше я использовал Dust-Me Selectors, это плагин для 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 (я только что его установил).

Самый лучший инструмент, который действительно делает именно то, что вы хотите, только получая использованный CSS на странице и позволяющий просто копировать его в буфер обмена, - это расширение Chrome CSS Used.

Пример красивой картинки

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

• Unused-CSS.com - служба, которая проверяет ваш сайт и отправляет вам результаты по электронной почте.
• Использование CSS - надстройка Firebug

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

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

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

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

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

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

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

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

SnappySnippet

Существует реклама Chrome с открытым исходным кодом под названием SnappySnippet. Я обнаружил, что она намного лучше, чем другие, просто расширяет уже доступные инструменты разработчика в Chrome. Вы даже можете извлечь только одну часть страницы со всеми соответствующими CSS. Посмотрите этот пост stackoverflow

Вот мое решение с использованием 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; }

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

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

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

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

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

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

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

Вот и все. Теперь всякий раз, когда вы хотите инкапсулировать статическую страницу (то есть сделать ее переносимой или если вы собираетесь обслуживать ее из собственного 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

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

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

По состоянию на сентябрь 2020 года этому вопросу почти 10 лет. Большинство предоставленных решений больше не работают или связанные проекты исчезли.

Тем не менее, этот вопрос по-прежнему чрезвычайно актуален, поскольку теперь Google использует скорость страницы в качестве одного из показателей приоритизации.

Проведя кучу исследований по всем перечисленным ссылкам, я нашел purgecss.com . Кажется, это лучший вариант для очистки неиспользуемого CSS в современных веб-приложениях / SPA с использованием Angular, React, Vue и т. Д. Также существует интеграция сборки с PostCSS, Webpack, Grunt и Gulp.

Кроме того, UnCSS, похоже , все еще поддерживается. Он такой же мощный, как PurgeCSS, но не так интегрирован в процессы сборки или одностраничные приложения javascript.

Вы также можете использовать http://getcssusedinapage.com, чтобы использовать CSS на странице. Это бесплатно, быстро и возвращает много деталей вместе с минимизированным и оптимизированным кодом CSS, который вы можете просто скопировать + вставить на свой веб-сайт.