अप्रयुक्त सीएसएस परिभाषाओं की पहचान कैसे करें


414

क्या किसी परियोजना में अप्रयुक्त सीएसएस परिभाषाओं की पहचान करने में मदद करने के लिए कोई अच्छा तरीका है? सीएसएस फाइलों का एक गुच्छा अंदर खींच लिया गया था और अब मैं चीजों को थोड़ा साफ करने की कोशिश कर रहा हूं।


जब आप "एक परियोजना में" कहते हैं - तो वास्तव में आपका क्या मतलब है? इस बात पर निर्भर करता है कि आप उत्तर का उपयोग किस पर्यावरण के आधार पर कर सकते हैं।
इयान रॉबिन्सन


मैंने एक उपकरण बनाया जो बहुत अच्छा काम करता है। यहाँ मेरा कोड पेन है
toddmo

मैंने एक स्क्रिप्ट लिखी है जो आपके लिए यह कर सकती है: github.com/kgoedecke/unused-css-parser
केविन गॉडेकेले

जवाबों:


145

Https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ पर फ़ायरफ़ॉक्स एक्सटेंशन डस्ट-मी पर एक नज़र डालें ।


14
एक्सटेंशन फ़ायरफ़ॉक्स 4 में काम नहीं करता
mvark

5
यह अपडेट कभी सामने नहीं आया और साइटप्वाइंट मंचों पर पूछने के बाद यह प्रतीत होता है कि प्लगइन मृत के रूप में अच्छा है।
माइक बी

3
ऐसा लगता है कि लेखक ने अपनी वेबसाइट पर बहुत ही हाल ही में ओपेरा के लिए एक अद्यतन संस्करण पोस्ट किया है। Check out भाईचारे.कॉम
फनका

2
दुर्भाग्य से अब काम नहीं करता है
जोनाथन

4
मैंने एक प्रतिस्थापन लिखा है, आपकी वेबसाइट पर कई पृष्ठों को क्रॉल करता है (लिंक के पुनरावर्ती रूप से): jitbit.com/unusedcss
एलेक्स

259

क्रोम डेवलपर उपकरण में एक ऑडिट टैब है जो अप्रयुक्त सीएसएस चयनकर्ताओं को दिखा सकता है।

एक लेखा परीक्षा भागो, तो, के तहत वेब पेज का प्रदर्शन देख निकालें अप्रयुक्त सीएसएस नियम

यहां छवि विवरण दर्ज करें


64
यह भयानक है, लेकिन बहुत बुरा है आप इसे पृष्ठों के एक समूह पर नहीं चला सकते हैं (अन्यथा अप्रयुक्त सीएसएस नियम अपरिहार्य हो सकते हैं)
डेमन

17
मैं ऑडिटिंग टूल चलाता हूं और यह मुझे अप्रयुक्त सीएसएस दिखाता है, लेकिन फिर इसका उपयोग कैसे करें? क्या मुझे प्रत्येक आइटम को मैन्युअल रूप से खोजना होगा और उसे निकालना होगा?
टिमोथी हेनरी

19
यह केवल वर्तमान पृष्ठ है। यह '2445 नियम (83%) CSS का वर्तमान पृष्ठ द्वारा उपयोग नहीं किया गया है', इसलिए वास्तव में मददगार नहीं है।
छन्नीलाल

8
जब आप आइटम का विस्तार करते हैं, तो आपको वास्तविक नियमों की एक सूची मिलती है जो उपयोग में नहीं होती है। हालाँकि, यह उन साइटों पर उपयोगी नहीं है जहाँ आप DOM ऑन-द-फ्लाई बदलते हैं।
होवी

10
वास्तव में इसे केवल कवरेज में ले जाया गया है - ऑडिट पर जाएं -> कंसोल के बगल में नीचे एक मेनू (3 लंबवत डॉट्स प्रकार मेनू) है और आप वहां कवरेज का चयन कर सकते हैं। बस रिकॉर्ड पर क्लिक करें और नेविगेट करें।
ग्राहम रिची

65

मुझे अभी यह साइट मिली है - http://unused-css.com/

अच्छा लग रहा है, लेकिन मुझे अपने किसी भी साइट पर अपलोड करने से पहले इसके आउटपुट 'क्लीन' सीएसएस को अच्छी तरह से जांचना होगा।

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

नीचे दी गई सामग्री http://unused-css.com/ से ली गई है, इसलिए अन्य समाधानों की सिफारिश करने के लिए उन्हें श्रेय दिया जाता है:

लतीश सहगल ने अप्रयुक्त सीएसएस कक्षाओं को खोजने और निकालने के लिए एक विंडोज़ अनुप्रयोग लिखा है। मैंने इसका परीक्षण नहीं किया है, लेकिन विवरण से, आपको अपनी html फ़ाइलों और एक CSS फ़ाइल का पथ प्रदान करना होगा। कार्यक्रम तब अप्रयुक्त सीएसएस चयनकर्ताओं को सूचीबद्ध करेगा। स्क्रीनशॉट से, ऐसा लगता है कि इस सूची को निर्यात करने या नई साफ सीएसएस फ़ाइल डाउनलोड करने का कोई तरीका नहीं है। यह भी दिखता है कि सेवा एक सीएसएस फ़ाइल तक सीमित है। यदि आपके पास कई फाइलें हैं जिन्हें आप साफ करना चाहते हैं, तो आपको उन्हें एक-एक करके साफ करना होगा।

डस्ट-मी चयनकर्ता फ़ायरफ़ॉक्स एक्सटेंशन (v1.5 या बाद के लिए) है जो अप्रयुक्त सीएसएस चयनकर्ताओं को ढूंढता है। यह आपके द्वारा देखे जा रहे पृष्ठ पर सभी स्टाइलशीट से सभी चयनकर्ताओं को निकालता है, फिर उस पृष्ठ का विश्लेषण करके यह देखता है कि उन चयनकर्ताओं में से किसका उपयोग नहीं किया गया है। डेटा को तब संग्रहीत किया जाता है ताकि बाद के पृष्ठों का परीक्षण करते समय, चयनकर्ताओं को सूची से पार किया जा सके, क्योंकि वे सामना कर चुके हैं। यह उपकरण एक पूरी वेबसाइट को मकड़ी के रूप में सक्षम करने वाला है, लेकिन मैं दुर्भाग्य से इसे काम कर सकता हूं। इसके अलावा, मुझे नहीं लगता कि आप सीएसएस फ़ाइल को हटाए गए शैलियों के साथ कॉन्फ़िगर और डाउनलोड कर सकते हैं।

टॉपस्टाइल सीएसएस को संपादित करने के लिए टूल्स का एक गुच्छा सहित एक विंडोज़ अनुप्रयोग है। मैंने इसका बहुत परीक्षण नहीं किया है, लेकिन ऐसा लगता है कि इसमें अप्रयुक्त सीएसएस चयनकर्ताओं को हटाने की क्षमता है। इस सॉफ्टवेयर की कीमत 80 USD है।

लिक्विडिटी सीएसएस क्लीनर एक php स्क्रिप्ट है जो एक पृष्ठ की शैलियों की जांच करने के लिए नियमित अभिव्यक्ति का उपयोग करती है। यह आपको उन कक्षाओं को बताएगा जो HTML कोड में उपलब्ध नहीं हैं। मैंने इस समाधान का परीक्षण नहीं किया है।

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

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

UnusedCSS.com इंटरफ़ेस का उपयोग करने के लिए आसान के साथ वेब अनुप्रयोग है। किसी साइट का url टाइप करें और आपको CSS चयनकर्ताओं की एक सूची मिलेगी। प्रत्येक चयनकर्ता के लिए, एक संख्या इंगित करती है कि चयनकर्ता कितनी बार उपयोग किया जाता है। इस सेवा की कुछ सीमाएँ हैं। @Import स्टेटमेंट समर्थित नहीं है। आप नई साफ CSS फ़ाइल को कॉन्फ़िगर और डाउनलोड नहीं कर सकते।

CSS एक बुकमार्कलेट है जो किसी भी साइट पर अप्रयुक्त CSS चयनकर्ताओं को खोजने में आपकी सहायता करता है। यह उपकरण उपयोग करना बहुत आसान है, लेकिन यह आपको सीएसएस फ़ाइलों को कॉन्फ़िगर और डाउनलोड करने की अनुमति नहीं देगा। यह केवल अप्रयुक्त CSS फाइलों को सूचीबद्ध करेगा।


5
सिर्फ एक नोट जो अप्रयुक्त-css.com आपको सीएसएस को डाउनलोड करने की अनुमति नहीं देता है जब तक कि आप एक भुगतान किए गए सदस्य नहीं हैं और सबसे कम योजना $ 29 प्रति माह से शुरू होती है! मेरे लिए सेवा के लिए थोड़ा महंगा लगता है
georgiecasey

1
मैं मिश्रण में purifycss github.com/purifycss/purifycss जोड़ूंगा । यह मुफ़्त है, काफी लोकप्रिय है (जीथब में सितारों के अनुसार) और एकल-पृष्ठ एप्लिकेशन के साथ काम करता है।
दिमित्री

21

Google पृष्ठ गति आपके लिए ऐसा कर सकती है (यह वास्तव में पूरी तरह से केवल आपको बताने से अधिक है कि सीएसएस अप्रयुक्त है)। फ़ायरफ़ॉक्स पर, यह एक फायरबग ऐड-ऑन के रूप में उपलब्ध है। फिर एक ऑनलाइन संस्करण भी है।


8

सी # में एक बेहतर सीएसएस मिनिफायर निरर्थक शैलियों को डंप करता है;

आप इसके साथ डस्ट-मी का भी इस्तेमाल करना चाहेंगे।

ध्यान रखें, यदि कोई ऐसी सामग्री है जो वर्तमान में धूल-मुझे दिखाई नहीं दे रही है, तो आप अपनी ज़रूरत की शैलियों को फेंक सकते हैं।

संपादित करें: लिंक टूट गया था, लेकिन आर्काइव.ऑर्ग में पेज और कोड दोनों हैं।


7

सीएसएस उपयोग

फायरबग विस्तार जो देखने के लिए कि सीएसएस नियम वास्तव में उपयोग किए जाते हैं।

CSS का उपयोग Firebug के लिए एक विस्तार है (इस प्रकार Firebug स्थापित होना आवश्यक है) जो आपको अप्रयुक्त CSS शैली नियमों को जानने की अनुमति देता है। यह आपके द्वारा उपयोग किए जाने वाले CSS की पहचान करता है और उपयोग नहीं करता है। यह आपको यह इंगित करने में सक्षम करता है कि अनावश्यक भागों को क्या हटाया जा सकता है। आपको अपनी CSS फाइलों को जितना संभव हो उतना हल्का रखने के लिए इस ऐड का उपयोग जरूर करना चाहिए।


6

ऐसा लगता है कि किसी ने अपडेट किए गए DustMe Selectors को फिर से नए नाम के तहत फ़ायरफ़ॉक्स के साथ काम करने के लिए - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198


लेखक का अपनी वेबसाइट www.brothercake.com पर कुछ हफ़्ते पहले एक नया संस्करण पोस्ट किया गया है
फनका

यह प्लगइन अब उपलब्ध नहीं है और डाउनलोड करने के लिए लिंक भाईचारे पर मृत है
एंड्रिया मौरो


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.