CSS का उपयोग करके अवांछित HTML तत्वों को अक्षम करें

अक्सर, जब हम किसी प्रोजेक्ट को क्लाइंट को सौंपते हैं, तो हम HTML कोड का नियंत्रण खो देते हैं। कभी-कभी एक ग्राहक सीएमएस (सामग्री प्रबंधन प्रणाली) का उपयोग करता है, जो उसे HTML कोड के कुछ हिस्सों पर पूर्ण नियंत्रण देता है। कभी-कभी एक क्लाइंट अपने कोड को एक दस्तावेज़ में आउटपुट करने के लिए बस हमारे टेम्पलेट्स का उपयोग करता है।

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



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

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

अवांछित HTML टैग और विशेषताएँ:

  <Font>
 <Basefont>
 <केंद्र>
 <हड़ताल>
 <S>
 <U>
 bgcolor
 सीमा
 संरेखित
 vspace
 hspace
 वेलिजन
 चौड़ाई
 ऊंचाई

निर्णय

आदर्श रूप से, हम समतुल्य सीएसएस संपत्ति के लिए विरासत मूल्य डालकर कुछ HTML टैग्स को समायोजित कर सकते हैं। मानक-आधारित ब्राउज़र कोड में निर्दिष्ट अवांछित विशेषताओं को अनदेखा करते हैं और इसके बजाय कैस्केड में विरासत में मिले मूल्यों का उपयोग करते हैं।

उदाहरण के लिए, यह सीएसएस:

  फ़ॉन्ट {color: inherit;  } 

इस कोड पर प्रबल होगा:

  <फ़ॉन्ट रंग = "नीला"> नीला </ font> 

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

अभिव्यक्तियाँ और मदद करने के लिए वर्तमान:

  फ़ॉन्ट {
 रंग: विरासत;  / * सामान्य ब्राउज़र * /
 रंग: अभिव्यक्ति (this.parentNode.currentStyle ['color']);  / * IE * /} 

क्या यह काम करता है? ठीक है, आगे चलते हैं:

  फ़ॉन्ट {
 फ़ॉन्ट-परिवार: विरासत;  / * सामान्य ब्राउज़र * /
 फॉन्ट-परिवार: एक्सप्रेशन (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 } 

सब कुछ अद्भुत है, सिवाय इसके कि ओपेरा 9 को फ़ॉन्ट-परिवार का अर्थ विरासत में नहीं मिलता है। सौभाग्य से फ़ॉन्ट भी हमारे अनुरूप होगा:

  फ़ॉन्ट {
 फ़ॉन्ट: विरासत;  / * सामान्य ब्राउज़र * /
 फॉन्ट-परिवार: एक्सप्रेशन (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 } 

हमने इसका पता लगा लिया। चलिए फ़ॉन्ट-आकार की संपत्ति पर चलते हैं। यह नाजुकता की आवश्यकता है, क्योंकि फ़ॉन्ट आकार मान गणना किए गए मूल्य के सापेक्ष विरासत में मिला है। पिछली अभिव्यक्ति यहां काम नहीं करेगी, क्योंकि यदि फ़ॉन्ट-आकार की संपत्ति शरीर के लिए 2em पर सेट है, तो फ़ॉन्ट आकार मान की गणना इस बिंदु से शुरू होगी। ब्राउज़र फ़ॉन्ट टैग के मूल तत्व के लिए फ़ॉन्ट-आकार के मूल्य की जांच करेगा, जो 2em है और 4em (2em से 2em) का परिकलित मान प्रस्तुत करेगा। और यह वह नहीं है जो हमें चाहिए। समाधान सरल है। आपको सभी ब्राउज़रों के लिए प्रारंभिक फ़ॉन्ट-आकार के 100% मूल्य का उपयोग करने की आवश्यकता है। आइए इसे शांत करने के लिए अवांछित बेसफोंट टैग में कुछ गुण जोड़ें। यहाँ फ़ॉन्ट और आधार टैग टैग करने के लिए नियमों की एक पूरी सूची है:

  फ़ॉन्ट, बेसफ़ोंट {
 रंग: विरासत;  / * सामान्य ब्राउज़र * /
 रंग: अभिव्यक्ति (this.parentNode.currentStyle ['color']);  / * IE * /
 फ़ॉन्ट: विरासत;  / * सामान्य ब्राउज़र।  ओपेरा के लिए फ़ॉन्ट-आकार के बजाय फ़ॉन्ट * /
 फॉन्ट-परिवार: एक्सप्रेशन (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 फ़ॉन्ट-आकार: 100%;  / * सभी ब्राउज़र्स।  आकार विरासत में मिले हैं * /
 } 

हम आगे बढ़ते हैं। चलो टैग केंद्र, एस, हड़ताल और यू को पूर्ववत करने के लिए मूल तकनीक का उपयोग करें:

  केंद्र {
 text-align: inherit;  / * सामान्य ब्राउज़र * /
 पाठ-संरेखित करें: अभिव्यक्ति (this.parentNode.currentStyle ['textAlign']);  / * IE * /
 }
 एस, हड़ताल, यू {
 पाठ-सजावट: विरासत;  / * सामान्य ब्राउज़र * /
 पाठ-सजावट: अभिव्यक्ति (this.parentNode.currentStyle ['textDecoration']);  / * IE * /
 } 

यह हुआ! हम केवल सीएसएस और अभिव्यक्ति का उपयोग करते हुए सबसे अवांछित टैग को "अक्षम" करते हैं।

लेकिन विशेषताओं के बारे में क्या? HTML4 में कई अवांछित विशेषताएँ शामिल हैं, जो आपकी नसों को बहुत बर्बाद कर सकती हैं। चलो उन्हें भी बंद कर दें। आइए संरेखित करें :

  * [सं-पु।] {पाठ-संरेखित: विरासत;  } / * सामान्य ब्राउज़र * / 

सब कुछ ठीक हो जाएगा, लेकिन IE6 विशेषता चयनकर्ताओं का समर्थन नहीं करता है। इसलिए, हमें अभिव्यक्ति को संशोधित करने की आवश्यकता है ताकि यह टैग के संरेखित विशेषता के लिए जांच करे। यहाँ क्या हुआ:

  * [सं-पु।] {पाठ-संरेखित: विरासत;  } / * सामान्य ब्राउज़र * /
 {{पाठ-संरेखित करें: अभिव्यक्ति (this.align? this.parentNode.currentStyle ['textAlign']: '');  } / * IE * / 

अगली पंक्ति में img टैग की विशेषताएँ हैं। संरेखित विशेषता के अतिरिक्त, हम बॉर्डर, वैस्पेस और हेसिटी विशेषताओं को अक्षम करना चाहते हैं। चूंकि मार्जिन और सीमा मूल्य विरासत में नहीं मिले हैं, एक साधारण नियम यहां लागू होता है:

  img {मार्जिन: 0;  सीमा: कोई नहीं;  } / * सभी ब्राउज़र्स * / 

यहाँ हम IE6 के लिए अघुलनशील समस्या का सामना कर रहे हैं। vspace और hspace इसमें मार्जिन प्रॉपर्टी के बराबर नहीं हैं, इसलिए IE6 उन्हें प्रदर्शित करना जारी रखेगा। मेरे पास एकमात्र समाधान एक छोटी स्क्रिप्ट लिखना था जो दस्तावेज़ लोड करते समय बस इन विशेषताओं को हटा देगा:

  window.onload = function () {
 के लिए (i = 0; i)
 document.getElementsByTagName ('img') [i] .removeAttribute ('vspace');
 document.getElementsByTagName ('img') [i] .removeAttribute ('hspace');
 }
 } 

मैं जावास्क्रिप्ट का उपयोग नहीं करना पसंद करूंगा, लेकिन इस मामले में मुझे कोई दूसरा विकल्प नहीं दिखता। तो रहने दो। अब आइए ol टैग में टाइप विशेषता समाप्त करते हैं:

  ol {सूची-शैली-प्रकार: दशमलव;  } / * सभी ब्राउज़र्स * / 

और अब शरीर के लिए bgcolor विशेषता:

  शरीर {पृष्ठभूमि-रंग: पारदर्शी;  } / * सभी ब्राउज़र्स * / 

टेबल। अंतिम चरण। तालिकाओं में, HTML4 / 4.01 में, कई अवांछित विशेषताएँ हैं जो पृष्ठ लेआउट के लिए बड़े पैमाने पर उपयोग की गई हैं। लेकिन हम नहीं चाहते कि ग्राहक लेआउट के लिए तालिकाओं का उपयोग करें? तो चलिए चौड़ाई, ऊंचाई, bgcolor, valign, और बॉर्डर विशेषताओं को बंद करते हैं:

  तालिका, tr, वीं, td {
 चौड़ाई: ऑटो;  / * सभी ब्राउज़र * /
 ऊंचाई: ऑटो;  / * सभी ब्राउज़र * /
 पृष्ठभूमि-रंग: पारदर्शी;  / * सभी ब्राउज़र * /
 ऊर्ध्वाधर-संरेखित करें: विरासत;  / * सभी ब्राउज़र (IE सहित) * /
 सीमा: कोई नहीं;  / * सभी ब्राउज़र * /
 } 

संक्षेप में:

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

सभी शैलियों को एक साथ:

  फ़ॉन्ट, बेसफ़ोंट {
 रंग: विरासत;  / * सामान्य ब्राउज़र * /
 रंग: अभिव्यक्ति (this.parentNode.currentStyle ['color']);  / * IE * /
 फ़ॉन्ट: विरासत;  / * सामान्य ब्राउज़र।  ओपेरा के लिए फ़ॉन्ट-आकार के बजाय फ़ॉन्ट * /
 फॉन्ट-परिवार: एक्सप्रेशन (this.parentNode.currentStyle ['fontFamily']);  / * IE * /
 फ़ॉन्ट-आकार: 100%;  / * सभी ब्राउज़र * /
 }
 केंद्र {
 text-align: inherit;  / * सामान्य ब्राउज़र * /
 पाठ-संरेखित करें: अभिव्यक्ति (this.parentNode.currentStyle ['textAlign']);  / * IE * /
 }
 एस, हड़ताल, यू {
 पाठ-सजावट: विरासत;  / * सामान्य ब्राउज़र * /
 पाठ-सजावट: अभिव्यक्ति (this.parentNode.currentStyle ['textDecoration']);  / * IE * /
 }
 * [सं-पु।] {पाठ-संरेखित: विरासत;  } / * सामान्य ब्राउज़र * /
 {{पाठ-संरेखित करें: अभिव्यक्ति (this.align? this.parentNode.currentStyle ['textAlign']: '');  } / * IE * /
 img {मार्जिन: 0;  सीमा: कोई नहीं;  } / * सभी ब्राउज़र्स * /
 ol {सूची-शैली-प्रकार: दशमलव;  } / * सभी ब्राउज़र्स * /
 शरीर {पृष्ठभूमि-रंग: पारदर्शी;  / * सभी ब्राउज़र * /}
 तालिका, tr, वीं, td {
 चौड़ाई: ऑटो;  / * सभी ब्राउज़र * /
 ऊंचाई: ऑटो;  / * सभी ब्राउज़र * /
 पृष्ठभूमि-रंग: पारदर्शी;  / * सभी ब्राउज़र * /
 ऊर्ध्वाधर-संरेखित करें: विरासत;  / * सभी ब्राउज़र (IE सहित) * /
 सीमा: कोई नहीं;  / * सभी ब्राउज़र * /
 } 

नि: शुल्क अनुवाद और मोनससे की सामग्री पर एक लेख की तैयारी