डेवलपर टूल · HTML WYSIWYG एडिटर
इनलाइन शैलियाँ बनाम कक्षाएं: एक विज़ुअल एडिटर द्वारा उत्पादित HTML को पढ़ना
· यह काम किस प्रकार करता है
HTML CAसएस संतोषप्रद
यह बताता है कि कैसे विज़ुअल फ़ॉर्मेटिंग विकल्प टैग, इनलाइन स्टाइल या कुछ भी नहीं बन जाते हैं, और उस आउटपुट को स्टाइलशीट-संचालित साइट पर कैसे अनुकूलित किया जाए।
स्निपेट तब तक सही दिखता है जब तक यह आपकी स्टाइलशीट से मेल नहीं खाता - एडिटर आउटपुट के साथ खुलता है जो साइट CSS से टकराता है
स्रोत एप्लिकेशन में एक टुकड़ा सही दिख सकता है क्योंकि इसकी शैली विशेषता स्थानीय रूप से जीतती है, फिर गंतव्य थीम से टकराती है या प्रकाशन के दौरान उस विशेषता को खो देती है। ToolAcre इनलाइन प्रेजेंटेशन न रखने का चयन करता है। इसकी अनुमति सूची शैली और वर्ग को हर जगह छोड़ देती है, और शैली के गंतव्य के लिए समर्थित संरचनात्मक और अर्थ संबंधी तत्वों को छोड़ देती है।
वह नीति पूर्वावलोकन को जानबूझकर मामूली बनाती है। एक शीर्षक, सूची या मजबूत वाक्यांश पहचानने योग्य रहता है, लेकिन रंग, फ़ॉन्ट, रिक्ति और कॉपी किए गए डिज़ाइन-सिस्टम वर्ग चले गए हैं। साफ़ किए गए स्निपेट के बारे में तर्क करना आसान है, हालाँकि यह प्रत्येक स्रोत की उपस्थिति या कार्य को एक स्व-निहित स्टाइल वाले घटक के रूप में पुन: पेश नहीं कर सकता है।
आम तौर पर तीन प्रतिनिधित्व मौजूद हैं; यह एडिटर सिमेंटिक टैग रखता है और शैली और वर्ग को हटा देता है
HTML तत्वों के साथ अर्थ व्यक्त कर सकता है, शैली विशेषताओं के साथ स्थानीय प्रस्तुति, या स्टाइलशीट द्वारा व्याख्या किए गए वर्ग नामों के साथ पुन: प्रयोज्य प्रस्तुति। ये तंत्र विनिमेय नहीं हैं। एक मजबूत तत्व महत्व के बारे में कुछ कहता है; एक लाल शैली केवल एक रंग का चयन करती है; एक क्लास का मतलब केवल वही होता है जो एक विशेष स्टाइलशीट परिभाषित करती है।
यह एडिटर एक सिमेंटिक उपसमुच्चय रखता है और दोनों प्रस्तुति चैनलों को अस्वीकार कर देता है। यहां तक कि एक हानिरहित वर्ग भी अनुमति सूची के लिए अज्ञात है, क्योंकि प्राप्तकर्ता साइट—ToolAcre नहीं—वर्ग परिभाषाओं का स्वामी है। निष्कासन रिपोर्ट खारिज की गई विशेषता का नाम देती है ताकि लेखक जानबूझकर की गई सफाई को अस्पष्टीकृत दृश्य परिवर्तन से अलग कर सके।
यह एडिटर स्व-निहित प्रस्तुति को संरक्षित करने के बजाय इनलाइन शैलियों को क्यों अस्वीकार करता है
कई एडिटर इनलाइन शैलियों को संरक्षित करते हैं क्योंकि वे घोषणाएँ बाहरी स्टाइलशीट की आवश्यकता के बिना चिपकाए गए टुकड़े के साथ चलती हैं। ToolAcre विपरीत व्यापार करता है: एक शैली विशेषता अप्रत्याशित प्रतिपादन और URL-असर CSS सतहों को बनाने के लिए पर्याप्त व्यापक है, जबकि इस प्रारूपण टूल को केवल संरचित पाठ की आवश्यकता होती है।
परीक्षणों में एक शैली मान शामिल होता है जिसमें JavaScript-आकार का URL होता है और साबित होता है कि संपूर्ण शैली विशेषता गायब हो जाती है। यह संकीर्ण फ़िल्टर का प्रमाण है, यह दावा नहीं कि प्रत्येक संभावित CSS पेलोड को स्वतंत्र रूप से वर्गीकृत किया गया है। किसी भी शैली को सूचीबद्ध न करने से इस मॉड्यूल में आंशिक CSS सैनिटाइज़र बनाए रखने से बचा जा सकता है।
व्यावहारिक उदाहरण: यह टूलबार वास्तव में जो प्रारूप प्रदान करता है
टूलबार बोल्ड, इटैलिक, दो सूची प्रकार, स्पष्ट फ़ॉर्मेटिंग, ब्लॉक विकल्प, लिंक और अनलिंकिंग प्रदान करता है। बोल्ड और इटैलिक आउटपुट स्ट्रॉन्ग और ईएम की ओर सामान्य हो जाता है। ब्लॉक विकल्पों में पैराग्राफ, h1 से h4, ब्लॉककोट और प्री शामिल हैं। कोई रंग चयनकर्ता, फ़ॉन्ट चयनकर्ता, संरेखण क्रिया या वर्ग फ़ील्ड मौजूद नहीं है।
उन नियंत्रणों को नमूना अनुच्छेद पर लागू करें और स्रोत का निरीक्षण करें। उपयोगी तुलना इच्छित अर्थ और उत्सर्जित तत्वों के बीच है: एक उद्धरण को ब्लॉककोट बनना चाहिए, कोड-जैसी रिक्ति पूर्व का उपयोग कर सकती है, और एक शीर्षक एक शीर्षक होना चाहिए। अंडरलाइन, सुपरस्क्रिप्ट या अन्य अनुमत सूचीबद्ध टैग के लिए समर्थन का अनुमान केवल इसलिए न लगाएं क्योंकि स्रोत मोड उन्हें बनाए रख सकता है।
आउटपुट को अनुकूलित करने का अर्थ है इसे गंतव्य पर स्टाइल करना; यहां कक्षाएं नहीं लिखी जा सकतीं
एक CMS अनुकूलन निर्यात के बाद शुरू होता है। उस CMS में गंतव्य कक्षाएं जोड़ें, एक घटक टेम्पलेट या एक समीक्षा परिवर्तन जहां उनकी परिभाषाएं ज्ञात हैं। ToolAcre अज्ञात इनलाइन घोषणाओं का प्रोजेक्ट-विशिष्ट टोकन में अनुवाद नहीं कर सकता है, और यह सत्यापित नहीं कर सकता है कि आपके उत्पादन स्टाइलशीट में कोई वर्ग मौजूद है या नहीं।
सिमेंटिक टैग वहां रखें जहां वे सामग्री से मेल खाते हों। प्रत्येक नोड को एक स्टाइल स्पैन बनाने के लिए मजबूत या हेडिंग संरचना को हटाना सफाई के लाभ को उलट देता है। गंतव्य परत को उपस्थिति तय करनी चाहिए, जबकि ड्राफ्ट में पैराग्राफ, पदानुक्रम, सूचियाँ, उद्धरण, कोड और लिंक होते हैं जो बिना किसी विषय के सार्थक बने रहते हैं।
इनलाइन शैलियाँ अन्य वर्कफ़्लो के अनुरूप हो सकती हैं, लेकिन वे इस टूल द्वारा आउटपुट नहीं हैं
इनलाइन शैलियाँ उन प्रणालियों में आवश्यक हो सकती हैं जो साझा स्टाइलशीट को संरक्षित या लोड नहीं करती हैं, विशेष रूप से कुछ ईमेल उत्पादन पथ। हालाँकि, यह रिपॉजिटरी कोई ईमेल संगतता प्रोसेसर प्रदान नहीं करता है और कोई शैली विशेषता उत्सर्जित नहीं करता है। एक लेखक को बाद में ईमेल-विशिष्ट, परीक्षण किए गए वर्कफ़्लो के माध्यम से साफ़ ड्राफ्ट का अनुवाद करना होगा।
एकमुश्त एंबेड में समान बाधाएं हो सकती हैं, लेकिन इससे इस एडिटर के अनुबंध का विस्तार नहीं होता है। डाउनलोड किए गए दस्तावेज़ में सेनिटाइज़्ड बॉडी मार्कअप के आसपास ToolAcre द्वारा लिखित एक निश्चित पूर्वावलोकन स्टाइलशीट शामिल है; टुकड़े की प्रतिलिपि बनाने से उस आवरण या उसके CSS की प्रतिलिपि नहीं बनती है। गंतव्य को सौंपी जा रही सटीक कलाकृतियों का निरीक्षण करें।
इसमें क्या शामिल नहीं है - CSS विशिष्टता डिबगिंग, डिज़ाइन टोकन या स्वचालित रूपांतरण टूल
यह आलेख CSS विशिष्टता, मानचित्र डिज़ाइन टोकन, इनलाइन शैलियों को स्वचालित रूप से डीबग नहीं करता है या पिक्सेल समता का वादा नहीं करता है। यह कहने से भी बचा जाता है कि सिमेंटिक टैग किसी विशेष स्क्रीन-रीडर घोषणा या खोज रैंकिंग को बाध्य करते हैं। शब्दार्थ संरचना में सुधार करता है, जबकि वास्तविक प्रस्तुति और व्याख्या उपभोक्ता परिवेश पर निर्भर रहती है।
सैंडबॉक्स्ड पूर्वावलोकन एक प्रदान की गई निरीक्षण सतह है, न कि आपकी लाइव स्टाइलशीट का मॉडल। यह एक हल्के दस्तावेज़ थीम पर पिन किया गया है और कोई स्क्रिप्ट, फॉर्म या समान-मूल पहुंच प्रदान नहीं करता है। एक साफ-सुथरा दिखने वाला पूर्वावलोकन यह स्थापित नहीं कर सकता कि प्रत्येक प्रकाशन प्रणाली में एक ही अंश सुरक्षित या दृष्टिगत रूप से सही है।
टेकअवे: आउटपुट पढ़ें, फिर निर्णय लें - विकल्प को सारांशित करें और कैसे ToolAcre का HTML WYSIWYG एडिटर आपको यह तय करने से पहले मार्कअप देखने देता है कि क्या रखना है
आउटपुट पढ़ें, फिर गंतव्य पर निर्णय लें। ToolAcre जानबूझकर चिपकाई गई स्टाइल वाली सामग्री को छोटी अर्थ शब्दावली में बदल देता है, हटाए गए तत्वों को रिकॉर्ड करता है और समीक्षा के लिए स्रोत को उजागर करता है। वह वर्कफ़्लो आकस्मिक इनलाइन प्रस्तुति को अदृश्य तकनीकी ऋण बनने से रोकता है जबकि यह स्वीकार करता है कि दृश्य निष्ठा कम हो सकती है।
संपूर्ण अप्रकाशित अभियान के बजाय प्रतिनिधि सामग्री के साथ परीक्षण करें। शीर्षकों, सूचियों, जोर और लिंक की पुष्टि करें; फिर अनुमोदित कक्षाएं लागू करें जहां सामग्री रहेगी। यदि पिक्सेल-समान स्थानांतरण की आवश्यकता है, तो इस टूल की नो-स्टाइल नीति एक बेमेल है, सक्षम होने की प्रतीक्षा में छिपी कोई सुविधा नहीं है।