केवल एक विशिष्ट पृष्ठ में उपयोग किए गए सीएसएस को निकालना

Question

मान लें कि आपके पास एक गतिशील रूप से उत्पन्न साइट है, जिस पर बहुत से लोगों द्वारा काम किया गया है, अतीत और वर्तमान, और आपके पास अब साझा स्टाइलशीट का संग्रह है जिसमें सीएसएस की 20,000 से अधिक लाइनें शामिल हैं। यह बिल्कुल भी व्यवस्थित नहीं है, कुछ वर्ग और आईडी-आधारित चयनकर्ता हैं लेकिन कई टैग-आधारित चयनकर्ता भी हैं। और फिर कहें कि आपके पास 100 टेम्पलेट हैं जो इन शैलियों का उपयोग करते हैं, कुछ नियंत्रक के माध्यम से।

क्या कोई उपकरण है, जो शायद Firebug की तरह काम करता है, जिसे आप एक url पर इंगित कर सकते हैं और यह उस पृष्ठ के सभी लागू सीएसएस चयनकर्ताओं को निर्धारित करेगा और उन्हें एक फ़ाइल में डंप करेगा? मूल रूप से पृष्ठ आधार पर एक पृष्ठ पर साझा स्टाइलशीट को चीरने का कुछ तरीका है।

Comments

संभावित डुप्लिकेट मैं किसी दिए गए वेब पेज पर केवल इस्तेमाल किए गए सीएसएस को कैसे निकाल सकता हूं और इसे एक अलग स्टाइल शीट में जोड़ा जा सकता है?

— टोनी चैपमैन

Answer 1

मैंने पहले Dust-Me Selectors का उपयोग किया है, जो एक Firefox प्लगइन है। इसका उपयोग करना बहुत आसान है और बहुमुखी है क्योंकि यह सीएसएस मूल्यों का उपयोग करने वाले कई पृष्ठों की एक संयुक्त सूची रखता है।

नकारात्मक पक्ष यह है कि मैं इसे पूरी साइट पर फैलाने के लिए स्वचालित करने में सक्षम नहीं था, इसलिए मैंने इसे अपनी साइट के मुख्य पृष्ठों / टेम्प्लेट पर उपयोग करना समाप्त कर दिया। फिर भी यह बहुत उपयोगी है।

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

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

Dust-Me Selectors 2.2 के ऊपर टिप्पणी के विपरीत, Firefox 3.6 के साथ संगत है (मैंने इसे अभी स्थापित किया है)।

Comments

क्या इसके पास किसी अप्रयुक्त सीएसएस फ़ाइल की एक कॉपी को सभी अप्रयुक्त सामानों के साथ निर्यात करने का एक तरीका है?

— रैलवव

@ श्रलव यप। यह एकमात्र उपकरण था जो काम करेगा और अभी भी मीडिया के प्रश्नों का सम्मान करेगा। यह एक कष्टप्रद बग है जहां यह "अपरिभाषित" शब्द के साथ आउटपुट सीएसएस फ़ाइल को लिट करता है, लेकिन एक त्वरित खोज 'एन' इसे ठीक करता है। उपकरण के चलने के बाद, प्रत्येक फ़ाइल शीट के लिए "अप्रयुक्त चयनकर्ताओं" टैब पर "क्लीन" बटन दबाएं। यह सीएसएस उत्पन्न करेगा जिसे आप निर्यात कर सकते हैं।

— एरिक एल।

ऐड-ऑन पेज अब मौजूद नहीं है। और पहला लिंक दूसरे पर रीडायरेक्ट करता है।

— मैरियन

Answer 2

सबसे अच्छे उपकरण को हाथ में लें जो वास्तव में वही करता है जो आप केवल पृष्ठ पर इस्तेमाल किए गए CSS को प्राप्त करके चाहते हैं और आपको इसे केवल अपने क्लिपबोर्ड पर कॉपी करने की अनुमति देता है यह Chrome एक्सटेंशन CSS है।

सुंदर चित्र उदाहरण

Comments

महान उपकरण ... लेकिन यह मीडिया के प्रश्नों को नजरअंदाज करता है। :(

— एरिक एल।

मैंने समर्थित मीडिया क्वेरी के लिए एक्सटेंशन को अपडेट कर दिया है। इसके अलावा, इस्तेमाल किया keyframes / फ़ॉन्ट चेहरे परिभाषाएँ, यहां तक ​​कि कुछ IE हैक भी अब समर्थित हैं।

— पेन्टीजॉय

अब मीडिया के प्रश्नों का समर्थन करें।

— अथिया

यह भी खूब रही। आप DOM में एक तत्व का चयन भी कर सकते हैं और यह उस विशिष्ट कंटेनर के लिए उपयोग किया जाने वाला CSS प्रदान करेगा।

— वेबनोब

जब आप अपनी समस्या के लिए सही सही उपकरण पाते हैं तो आह आह :)

— सिनाज़ा

Answer 3

ये होनहार दिखते हैं:

• Unused-CSS.com - वह सेवा जो आपकी वेबसाइट को फैलाती है और आपको परिणाम ईमेल करती है
• सीएसएस उपयोग - फायरबग एडऑन

Comments

मुझे लगता है कि CSS का उपयोग सबसे अच्छा काम करता है। खासकर यदि आपके पास एचटीटीपीएस है।

— Ben_Coding

Answer 4

(फ़ायरफ़ॉक्स के लिए नहीं, लेकिन शायद इससे किसी की मदद हो)

यदि आप क्रोम पर काम कर रहे हैं तो आप इस एक्सटेंशन का उपयोग कर सकते हैं:

सीएसएस हटाएं और गठबंधन करें ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolacjefhfollmphonoh )

• आपको सभी प्रयुक्त शैलियों के साथ एक संयुक्त सीएसएस डाउनलोड करने देता है
• पॉपअप विंडो में अप्रयुक्त शैलियों को दिखाता है
• शामिल शैलियों में शामिल हैं

Comments

महान उपकरण लेकिन यह मीडिया के प्रश्नों को अनदेखा करता है CSS। इसे संयोजित करने के बाद, मेरी साइट अब उत्तरदायी नहीं है।

— जोनास टी

"सीएसएस निकालें और गठबंधन" पुराना लगता है, क्रोम 67 पर काम नहीं कर

— एक और

Answer 5

मैं Uncss-Online - अनौपचारिक सर्वर, परीक्षण या वन-ऑफ़ उपयोग के लिए बहुत सुविधाजनक है! मुझे लगता है कि इसका सबसे अच्छा उपकरण जो मुझे आया है।

UnCSS एक ऐसा टूल है जो आपके स्टाइलशीट से अप्रयुक्त सीएसएस को हटा देता है। यह कई फाइलों में काम करता है और जावास्क्रिप्ट-इंजेक्ट सीएसएस का समर्थन करता है। इसे इस तरह से इस्तेमाल किया जा सकता है:

• अपने HTML और CSS को दिए गए बॉक्स में कॉपी और पेस्ट करें
• बटन पर क्लिक करें
• जादू होने की प्रतीक्षा करें
• अप्रयुक्त सीएसएस चला गया है, बाकी ले लो और इसका उपयोग करें!

आप इस उपकरण का उपयोग करने के अन्य उन्नत तरीकों के लिए उनके Github पृष्ठ की जांच कर सकते हैं

Answer 6

SnappySnippet

SnappySnippet नाम के क्रोम का एक ओपन सोर्स ऐड-ऑन है। मैंने पाया कि यह क्रोम में पहले से उपलब्ध डेवलपर टूल्स को बढ़ाता है। तुम भी पृष्ठ के केवल एक हिस्से को सभी प्रासंगिक सीएसएस निकाल सकते हैं। देखो इस stackoverflow पोस्ट

Comments

हाँ, लेकिन यह कुछ सामान्य आईडी के लिए नाम बदल देता है जो बहुत उपयोगी नहीं है

— शिशिर अरोड़ा

Answer 7

यहाँ जावास्क्रिप्ट का उपयोग कर मेरा समाधान है:

    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; }

Comments

अगर यह बाहरी साइट से सीएसएस को अपने पेज पर लागू करने के लिए इस्तेमाल किया जा सकता है तो बहुत अच्छा होगा। मुझे नहीं पता कि कैसे करना है ...

— जॉनी

Answer 8

• uncss: अप्रयुक्त सीएसएस का पता लगाएं - सीएलआई उपकरण, प्रेत का उपयोग करता है और पृष्ठ पर JS निष्पादित करता है, URL पर हो सकता है
• grunt-uncss - केवल स्थैतिक फ़ाइलों पर काम करता है
• ( महत्वपूर्ण सीएसएस - ब्राउज़र विंडो में दिखाई देने वाले तत्वों के लिए सीएसएस का अर्क)

Answer 9

PurifyCSS के लिए जांचें , और यह उन लोगों के लिए है जो CLI या गुलप / ग्रंट / वेबपैक संभाल सकते हैं

आप अप्रयुक्त शैली को एकल पृष्ठ या एकाधिक पृष्ठ या संपूर्ण प्रोजेक्ट से हटा सकते हैं, भले ही कक्षाओं को जावास्क्रिप्ट द्वारा इंजेक्ट किया जा रहा हो।

यदि आप Google कर सकते हैं, तो वहाँ से बाहर बहुत सारे संसाधन हैं जिनसे आप PurifyCSS के बारे में जान सकते हैं।

Answer 10

फ़ायरफ़ॉक्स का यह विस्तार संभवतः आपकी समस्या का समाधान करेगा, Dust-Me Selectors । CssCleaner या CssHelper नाम का एक छोटा डेस्कटॉप ऐप भी है, लेकिन मैं इसका लिंक नहीं ढूंढ पा रहा था ... (बस एक ही टास्क के लिए एक लंबे समय से पहले डाउनलोड की गई मेरी मशीन पर इसे डाउनलोड किया है)

Answer 11

यदि आप एकल पृष्ठों के साथ काम कर रहे हैं, तो आप केवल जल्दी से केवल उस CSS को हथियाने के लिए मेरे बुकमार्कलेट का उपयोग कर सकते हैं जो वास्तव में वेब पेज द्वारा उपयोग किया जाता है:

1. यहां जाएं (यदि यह लिंक टूट गया है, तो आप इसे पास्टबिन से भी प्राप्त कर सकते हैं )।
2. अपने बुकमार्क टूलबार पर "डाउनलोड बुकमार्कलेट" के तहत बड़ा बटन खींचें।

बस। अब आप जब भी किसी स्टैटिक पेज को एनक्रिप्ट करना चाहते हैं (यानी, इसे पोर्टेबल बनाने के लिए या यदि आप इसे अपने स्वयं के iframe से सेवा देना चाहते हैं), तो बस बुकमार्क पर क्लिक करें और यह ओवरले में वर्तमान पेज पर सभी इस्तेमाल किए गए सीएसएस को प्रदर्शित करेगा। ओवरले को बंद करने के लिए छाया पर क्लिक करें।

इस समाधान के साथ एक अच्छी बात यह है कि यह उत्तरदायी पृष्ठों का समर्थन करता है क्योंकि मीडिया के प्रश्नों को भी निकाला जाता है। एक बोनस के रूप में, मीडिया क्वेश्चन व्यूपोर्ट आकार विशिष्टता (जैसे बाद@media (max-width: 767px) आएंगे ) द्वारा सॉर्ट किए जाते हैं । @media (max-width: 1023px)

यदि कोई आवश्यकता है, तो मैं उत्पन्न सीएसएस को छोटा करने का विकल्प भी जोड़ सकता हूं। चूंकि मैंने केवल अपनी जरूरतों के लिए इस बुकमार्कलेट का उपयोग किया है, इसलिए इसका व्यापक रूप से परीक्षण नहीं किया गया है, इसलिए कृपया टिप्पणियों में किसी भी समस्या की रिपोर्ट करें।

नोट: इस बुकमार्कलेट को Chrome में स्थानीय फ़ाइलों के साथ काम --allow-file-access-from-filesकरने के लिए, Chrome शॉर्टकट लक्ष्य में जोड़ें । उदाहरण:

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

Answer 12

इस टूल का उपयोग करने का प्रयास करें, जो कि केवल एक सरल js स्क्रिप्ट है https://github.com/shashwatsahai/CSSExtractor/ यह टूल CSS को एक विशिष्ट पृष्ठ से सक्रिय शैलियों के लिए सभी स्रोतों को सूचीबद्ध करने में मदद करता है और इसे JSON स्रोत के रूप में सहेजता है। मूल्य के रूप में कुंजी और नियम। यह सभी CSS को href लिंक से लोड करता है और उनसे लागू सभी शैलियों को बताता है। आप किसी भी नाम के साथ JSON फ़ाइल में आउटपुट सहेज सकते हैं।

Answer 13

हम्म .. मैं सीएसएस फ़ाइल के एक सर्वरसाइड पार्सिंग का उपयोग करके विभिन्न सीएसएस चयनकर्ताओं को निकालकर इस पर कुछ क्रूर बल फेंक दूंगा, फिर इनमें से प्रत्येक को ब्राउज़र के भीतर एक jQuery चयनकर्ता के रूप में चलाऊंगा। बहुत सुरुचिपूर्ण नहीं है, लेकिन काम करना चाहिए?

Comments

लेकिन क्या ऐसा करने के लिए एक मौजूदा उपकरण है?

— रोजर हैलिबर्टन 19

Answer 14

सितंबर 2020 तक यह सवाल लगभग 10 साल पुराना है। अधिकांश प्रदान किए गए समाधान अब काम नहीं करते हैं या लिंक किए गए प्रोजेक्ट गायब हो गए हैं।

हालाँकि, यह सवाल अभी भी बहुत प्रासंगिक है क्योंकि Google अब अपनी प्राथमिकता वाले मेट्रिक्स के रूप में पृष्ठ गति का उपयोग करता है।

सूचीबद्ध सभी लिंक में अनुसंधान का एक गुच्छा करने के बाद, मुझे purgecss.com मिला । यह आधुनिक वेब ऐप / एसपीए में अनुपयोगी CSS को साफ करने के लिए सबसे अच्छा विकल्प लगता है / Angular, React, Vue, आदि का उपयोग करते हुए। PostCSS, Webpack, Grunt, और Gulp के साथ एकीकरण का निर्माण भी होता है।

इसके अलावा, UnCSS अभी भी बनाए रखा जा रहा है। यह PurgeCSS जितना शक्तिशाली है, लेकिन निर्माण प्रक्रियाओं या एकल-पृष्ठ जावास्क्रिप्ट ऐप्स में एकीकृत नहीं है।

Answer 15

CSS का उपयोग किसी पेज में करने के लिए आप http://getcssusedinapage.com का भी उपयोग कर सकते हैं । यह मुफ़्त है, तेज़ है और आपको कम से कम और अनुकूलित सीएसएस कोड के साथ बहुत सारे विवरण देता है जिसे आप अपनी वेबसाइट में सिर्फ पेस्ट कर सकते हैं