Витяг лише css, що використовується на певній сторінці


85

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

Чи є якийсь інструмент, який, можливо, працює як Firebug, який ви можете вказати на URL-адресу, і він визначить усі відповідні селектори CSS для цієї сторінки та скине їх у файл? В основному якимось чином розірвати спільні таблиці стилів на сторінці за сторінкою.


Відповіді:


17

Я раніше використовував селектори Dust-Me, що є плагіном 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-файлу з усіма невикористаними речами?
rraallvv

1
@rraallw Так. Це був єдиний інструмент, який працював і досі поважав медіа-запити. У ньому є надокучлива помилка, коли вона засипає вихідний CSS-файл словом "невизначений", але швидке знаходження замінює це виправлення. Після запуску інструменту натисніть кнопку «очистити» на вкладці «Невикористані селектори» для кожного аркуша файлів. Він створить CSS, який ви можете експортувати.
Ерік Л.

2
Сторінка надбудови більше не існує. І перше посилання перенаправляє на друге.
Маріан

56

Передає найкращий інструмент, який насправді робить саме те, що ви хочете, лише завантажуючи використаний CSS на сторінку, і дозволяє просто скопіювати його у свій буфер обміну - це розширення CSS Chrome

Приклад гарної картинки

введіть тут опис зображення


Чудовий інструмент ... Але, схоже, ігнорує медіа-запити. :(
Ерік Л.

8
Я оновив розширення до підтримуваних медіа-запитів. Крім того, використовуються ключові кадри / визначення шрифтів, навіть деякі IE-злами зараз також підтримуються.
PaintyJoy

1
Підтримка медіа-запитів.
atheaos

2
Це чудово. Ви навіть можете вибрати елемент у DOM, і він надасть CSS, що використовується для цього конкретного контейнера.
webnoob

2
Ах, так спокійно, коли ти знайдеш точний інструмент для вирішення своєї проблеми :)
sinaza


10

(Не для firefox, але, можливо, це комусь допомагає)

Якщо ви працюєте над chrome, ви можете використовувати це розширення:

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

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

Чудовий інструмент, але він ігнорує медіа-запити CSS. Після об’єднання мій сайт більше не реагує.
Jonas T

"CSS видалити та об'єднати" здається застарілим, не працює на Chrome 67
ще

4

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

UnCSS - це інструмент, який видаляє невикористаний CSS з таблиць стилів. Він працює в декількох файлах і підтримує CSS, введений Javascript. Його можна використовувати таким чином:

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

Ви можете перевірити їх сторінку Github на інші розширені способи використання цього інструменту


3

SnappySnippet

Існує реклама з відкритим вихідним кодом для хрому під назвою SnappySnippet. Я знайшов це набагато краще, ніж інші, просто розширює вже доступні інструменти для розробників у chrome. Ви навіть можете витягти лише одну частину сторінки, у якій будуть розміщені всі відповідні css. Подивіться на цей пост stackoverflow


1
так, але це змінює назви класів на деякі загальні ідентифікатори, що не дуже корисно
Shishir Arora

3

Ось моє рішення з використанням 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; }

було б чудово, якби це можна було використати для застосування css із зовнішнього сайту до моєї власної сторінки. Я не знаю, як це зробити ...
Джоні, чому


2

Перевірте PurifyCSS , і це для тих, хто може обробляти CLI або Gulp / Grunt / Webpack

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

Якщо ви можете погуглити, існує маса ресурсів, з яких ви можете дізнатись про PurifyCSS.


1

Це розширення Firefox, ймовірно, вирішить вашу проблему, Dust-Me Selectors . Існує також крихітна програма для настільних ПК, що називається CssCleaner або CssHelper, але мені не вдалося знайти посилання на неї ... (просто завантажте її тут, на моєму комп'ютері, давно завантажили для подібного завдання)


1

Якщо ви маєте справу з окремими сторінками, ви також можете використовувати мій букмарклет, щоб швидко отримати лише той 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

1

Спробуйте скористатися цим інструментом, який є простим js-сценарієм https://github.com/shashwatsahai/CSSExtractor/ Цей інструмент допомагає отримати CSS із певної сторінки із переліком усіх джерел для активних стилів та зберегти його у JSON із джерелом ключ і правила як значення. Він завантажує весь CSS із посилань href і розповідає всі стилі, застосовані до них. Ви можете зберегти вихідні дані у файлі JSON з будь-яким ім'ям.


0

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


Але чи існує існуючий інструмент для цього?
Роджер Галлібуртон,

0

Станом на вересень 2020 року цьому питанню майже 10 років. Більшість із запропонованих рішень вже не працюють, або пов'язані проекти зникли.

Однак питання все ще надзвичайно актуальне, оскільки Google зараз використовує швидкість сторінки як один із показників визначення пріоритетів.

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

Крім того, UnCSS, як видається, все ще підтримується. Він такий же потужний, як PurgeCSS, але не настільки інтегрований у процеси збірки або односторінкові програми javascript.


-1

Ви також можете використовувати http://getcssusedinapage.com, щоб отримати CSS, який використовується на сторінці. Це безкоштовно, швидко і дає вам багато деталей разом із мінімізованим та оптимізованим кодом CSS, який ви можете просто скопіювати + вставити на свій веб-сайт

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.