SnappySnippet
इस उपकरण को बनाने के लिए आखिरकार मुझे कुछ समय मिला। आप Github से SnappySnippet स्थापित कर सकते हैं । यह निर्दिष्ट (अंतिम निरीक्षण) DOM नोड से आसान HTML + CSS निकासी की अनुमति देता है। इसके अतिरिक्त, आप अपना कोड सीधे CodePen या JSFiddle को भेज सकते हैं। का आनंद लें!
अन्य सुविधाओं
- HTML को साफ करता है (अनावश्यक विशेषताओं को हटाकर, इंडेंटेशन को ठीक करता है)
- सीएसएस का अनुकूलन इसे पठनीय बनाने के लिए करता है
- पूरी तरह से विन्यास योग्य (सभी फ़िल्टर बंद किए जा सकते हैं)
::before
और ::after
छद्म तत्वों के साथ काम करता है
- बूटस्ट्रैप और फ्लैट-यूआई परियोजनाओं के लिए अच्छा यूआई धन्यवाद
कोड
SnappySnippet खुला स्रोत है, और आप GitHub पर कोड पा सकते हैं ।
कार्यान्वयन
चूंकि मैंने इसे बनाते समय काफी कुछ सीखा है, इसलिए मैंने कुछ ऐसी समस्याओं को साझा करने का फैसला किया है जो मैंने अनुभव की हैं और उनके समाधान, शायद किसी को यह दिलचस्प लगेगा।
पहला प्रयास - getMatchedCSSRules ()
सबसे पहले मैंने मूल CSS नियमों (वेबसाइट पर CSS फाइलों से आने वाले) को पुनः प्राप्त करने की कोशिश की है। आश्चर्यजनक रूप से, यह बहुत ही सरल धन्यवाद हैwindow.getMatchedCSSRules()
, हालांकि, यह अच्छी तरह से काम नहीं करता है। समस्या यह थी कि हम केवल HTML और CSS चयनकर्ताओं का एक हिस्सा ले रहे थे, जो पूरे दस्तावेज़ के संदर्भ में मेल खा रहे थे, जो अब HTML स्निपेट के संदर्भ में मेल नहीं खा रहे थे। चूंकि पार्सिंग और संशोधन करने वाले चयनकर्ता एक अच्छे विचार की तरह नहीं थे, इसलिए मैंने इस प्रयास को छोड़ दिया।
दूसरा प्रयास - getComputedStyle ()
उसके बाद, मैंने कुछ ऐसा शुरू किया है जो @CollectiveCognition ने सुझाया है - getComputedStyle()
। हालाँकि, मैं वास्तव में सभी शैलियों को रेखांकित करने के बजाय CSS फॉर्म HTML को अलग करना चाहता था।
समस्या 1 - सीएसएस को HTML से अलग करना
यहाँ समाधान बहुत सुंदर नहीं था लेकिन काफी सीधा था। मैंने चयनित सबट्री में सभी नोड्स को आईडी असाइन किया है और उचित सीएसएस नियम बनाने के लिए उस आईडी का उपयोग किया है।
समस्या 2 - डिफ़ॉल्ट मान के साथ गुण हटाना
नोड्स को आईडी असाइन करना अच्छी तरह से काम करता है, हालांकि मुझे पता चला कि मेरे प्रत्येक सीएसएस नियमों में ~ 300 गुण हैं जो पूरे सीएसएस को अपठनीय बनाते हैं।
बाहर है कि बारी-बारी से getComputedStyle()
रिटर्न हर संभव सीएसएस गुणों और मूल्यों को देखते हुए तत्व के लिए गणना की। उनमें से कुछ जहां खाली हैं, कुछ में ब्राउज़र डिफ़ॉल्ट मान थे। डिफ़ॉल्ट मान निकालने के लिए मुझे उन्हें पहले ब्राउज़र से प्राप्त करना था (और प्रत्येक टैग में अलग-अलग डिफ़ॉल्ट मान हैं)। समाधान यह था कि वेबसाइट से आने वाले तत्व की शैलियों की तुलना उसी तत्व से की जाए जो खाली में डाला गया हो <iframe>
। यहाँ तर्क यह था कि एक खाली में कोई स्टाइल शीट नहीं हैं <iframe>
, इसलिए मैंने जो भी तत्व जोड़ा है उसमें केवल डिफ़ॉल्ट ब्राउज़र शैलियाँ थीं। इस तरह मैं उन अधिकांश संपत्तियों से छुटकारा पाने में सक्षम था जो महत्वहीन थीं।
समस्या 3 - केवल आशुलिपि गुणों को रखते हुए
अगली बात जो मैंने देखी है वह यह थी कि शॉर्टहैंड समतुल्य गुणों को अनावश्यक रूप से प्रिंट किया गया था (उदाहरण के लिए border: solid black 1px
और फिर border-color: black;
, border-width: 1px
इत्यादि)।
इसे हल करने के लिए मैंने बस उन संपत्तियों की एक सूची बनाई है जिनके पास शॉर्टहैंड समतुल्य हैं और उन्हें परिणामों से फ़िल्टर किया गया है।
समस्या 4 - उपसर्ग गुण हटाना
प्रत्येक नियम में प्रॉपर्टी की संख्या काफी पिछले ऑपरेशन के बाद कम था, लेकिन मैं पाया है कि मैं का एक बहुत कुछ था Sill -webkit-
उपसर्ग के गुण है कि मैं कभी नहीं सुना है ( -webkit-app-region
? -webkit-text-emphasis-position
?)।
मैं सोच रहा था कि क्या मुझे इनमें से कोई भी गुण रखना चाहिए क्योंकि उनमें से कुछ उपयोगी ( -webkit-transform-origin
, -webkit-perspective-origin
आदि) लग रहे थे । मुझे यह पता नहीं चला है कि यह कैसे सत्यापित करना है, हालांकि, और जब से मुझे पता था कि ज्यादातर समय ये गुण सिर्फ कचरा हैं, मैंने उन सभी को हटाने का फैसला किया।
समस्या 5 - समान सीएसएस नियमों का संयोजन
अगली समस्या जो मैंने देखी है वह थी कि एक ही सीएसएस नियम बार-बार दोहराया जाता है (उदाहरण के लिए प्रत्येक <li>
एक ही शैली के साथ सीएसएस उत्पादन में एक ही नियम था)।
यह सिर्फ एक-दूसरे के साथ नियमों की तुलना करने और उन्हें संयोजित करने का मामला था जिसमें गुणों और मूल्यों का एक ही सेट था। नतीजतन, बजाय #LI_1{...}, #LI_2{...}
मुझे मिल गया #LI_1, #LI_2 {...}
।
समस्या 6 - HTML की इंडेंटेशन को साफ करना और ठीक करना
चूंकि मैं परिणाम से खुश था, इसलिए मैं HTML में चला गया। यह एक गड़बड़ की तरह लग रहा था, ज्यादातर क्योंकि outerHTML
संपत्ति इसे स्वरूपित रखती है ठीक उसी तरह जैसे कि यह सर्वर से वापस आ गया था। जरूरत
से लिया गया केवल HTML कोड outerHTML
एक साधारण कोड सुधार था। चूंकि यह हर आईडीई में कुछ उपलब्ध है, मुझे यकीन था कि एक जावास्क्रिप्ट पुस्तकालय है जो वास्तव में ऐसा करता है। और यह पता चला है कि मैं सही था (jquery- साफ) । क्या अधिक है, मुझे अनावश्यक विशेषताओं को अतिरिक्त ( style
, data-ng-repeat
आदि) को हटा दिया गया है ।
समस्या 7 - फ़िल्टर सीएसएस को तोड़ना
चूंकि एक मौका है कि कुछ परिस्थितियों में ऊपर उल्लिखित फ़िल्टर स्निपेट में सीएसएस को तोड़ सकते हैं, मैंने उन सभी को वैकल्पिक बना दिया है। आप उन्हें सेटिंग मेनू से अक्षम कर सकते हैं ।