इंटरनेट को आकार देने वाली HTML हैकिंग तकनीकें

 (tedium.co)
2 पॉइंट द्वारा GN⁺ 2023-12-03 | 1 टिप्पणियां | WhatsApp पर शेयर करें

HTML हैकिंग की चतुराई

  • HTML हैकिंग की ज़रूरत: कभी-कभी HTML कोड की विफलता या ब्राउज़र इम्प्लीमेंटेशन की कमी के कारण अपेक्षित परिणाम पाने के लिए कम सुरुचिपूर्ण कोड लिखना पड़ता है। ऐसे हैक कई बार रचनात्मक होते हैं और याद रखने लायक भी।
  • Netscape Navigator 4.0 @import हैक: इससे उन CSS styles को ब्लॉक करना संभव हुआ जिन्हें Netscape सपोर्ट नहीं करता था। Netscape CSS की बजाय JSSS का समर्थन करता था, लेकिन जब W3C ने CSS को चुना तो Netscape 4 का CSS इम्प्लीमेंटेशन जल्दबाज़ी में किया गया, और इसी वजह से बाद के ब्राउज़रों की तुलना में इसकी क्षमता कमज़ोर रही।
  • लेआउट के लिए HTML table का उपयोग: इससे अधिक प्रयोगात्मक लेआउट संभव हुए। HTML table को लेआउट टूल की तरह इस्तेमाल करना हैकिंग की परिभाषा जैसा है, और ईमेल की दुनिया में यह आज भी इस्तेमाल होता है।
  • CSS style के आगे underscore का उपयोग: इससे कुछ styles केवल IE6 पर लागू किए जा सकते थे। यह IE की special characters को parse करने की सीमा का फायदा उठाता था।
  • PNG transparency के लिए AlphaImageLoader का उपयोग: यह उन PNG फ़ाइलों की transparency render करता था जिन्हें IE6 सपोर्ट नहीं करता था। यह image को filter के ज़रिए चलाता था।
  • Conditional comments: इससे कुछ खास tricks केवल IE के विशेष versions में इस्तेमाल की जा सकती थीं। यह HTML comments फीचर को हैक करके code को execute होने लायक बना देता था।
  • Scalable Inman Flash Replacement (sIFR): इससे non-web-safe fonts का उपयोग संभव हुआ। यह एक JavaScript हैक का उपयोग करता था जो text को Flash embed से बदल देता था।
  • Preheader text हैक: यह ईमेल में अतिरिक्त text को description line में बहकर आने से रोकता था। इसके लिए non-standard या असामान्य whitespace characters के sequence का उपयोग किया जाता था।
  • Google Chrome Frame: यह IE6 को Chrome विंडो से बदल देता था। इसे browser plugin के माध्यम से लागू किया गया था।
  • Webkit-विशेष selector हैक: यह CSS code को केवल Webkit ब्राउज़रों पर लागू करता था। यह पहचानता था कि कोई विशेष browser किसी विशेष CSS code को सपोर्ट करता है या नहीं।
  • Responsive design: यह अलग-अलग settings, खासकर tablet और mobile पर, जानकारी को प्रभावी ढंग से व्यवस्थित करता है। ज़्यादातर मामलों में media queries का उपयोग करके डिवाइस के अनुसार जानकारी रखी जाती है।

GN⁺ की राय

  • सबसे महत्वपूर्ण बात यह है कि डेवलपर्स ने HTML और CSS standards की सीमाओं से बाहर जाकर रचनात्मक समाधान खोजे।
  • यह लेख दिलचस्प और आकर्षक है क्योंकि यह दिखाता है कि web developers ने ब्राउज़र की सीमाओं को पार करने और user experience बेहतर बनाने के लिए किस तरह रचनात्मक hacks का उपयोग किया।
  • ये hacks web standards के विकास और बेहतर web design के लिए डेवलपर्स की लगातार कोशिशों को दर्शाते हैं।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-12-03
Hacker News टिप्पणियाँ

  • लेआउट के लिए table का इस्तेमाल करना समझ में आता है।

    जब table चलन से बाहर होने लगे, तब कुछ वर्षों तक लेआउट के लिए float का इस्तेमाल मुख्यधारा में था। हैरानी है कि यह तरीका इस सूची में नहीं है। MDN दस्तावेज़ के अनुसार, float प्रॉपर्टी मूल रूप से टेक्स्ट ब्लॉक के भीतर image को तैराने के लिए इस्तेमाल होती थी, लेकिन इसका अक्सर वेबपेज के multi-column लेआउट बनाने में उपयोग हुआ। अब flexbox और grid के आने से यह फिर अपने मूल उद्देश्य पर लौट आई है।

  • spacer.gif को कोई सम्मान नहीं मिला।

    HN में यह अब भी इस्तेमाल हो रहा है, और हर page request में शामिल होता है: s.gif

  • मेरी पसंदीदा तकनीकें:

    • sidebar को content जितना लंबा दिखाने के लिए 'Faux columns'
    • नौ patch और 9 div या 3x3 table का उपयोग करके border को hack करना, और background को कुछ axes पर repeat करना। CSS3 में इसके लिए border-image आया। लेकिन ऐसी border styles अब पसंद नहीं की जातीं।
    • rounded border बनाने के लिए नौ patch का उपयोग किया जा सकता है, लेकिन बहुत से लोग rounded border को simulate करने के लिए HTML generate करने वाले generator का उपयोग करते थे। जैसा कि लेख में बताया गया है, पारंपरिक समझ यह थी कि extra markup images से ज़्यादा bytes लेगा, लेकिन इसमें roundtrip कम थे और इसे लागू करना आसान था।

  • HN आज भी इनमें से एक तकनीक का उपयोग करता है:

    • लेआउट के लिए HTML table का उपयोग करता है
    • यह सूची दिखाती है कि बिना standards के development कैसे control information को कई स्वीकार्य side channels में encode करता है।
    • इससे पैदा होने वाला संभावित भ्रम और टकराव कभी-कभी W3C process के प्रति महसूस होने वाली अवमानना को उजागर करता है। यह process standards-based web technology evolution और browser-led innovation को जोड़ता है। कभी एक दूसरे को आगे बढ़ाते हैं, कभी साथ-साथ चलते हैं।
    • अक्सर आलोचना होने के बावजूद, इस process को पहले की तुलना में अधिक टिकाऊ और स्थिर माना जा सकता है।
    • सोचता हूँ कि नए W3C-vendor मानदंडों की आलोचना करने वालों में से कितने लोग इन 10 अजीब hacks को याद करके उस दौर में वापस जाना चाहेंगे।

  • accessibility के लिए heading को स्क्रीन पर दिखाई न देने के लिए -10000 position पर रखने का ज़िक्र नहीं है।

  • CSS से पहले HTML5 shiv लगाकर सभी browsers की quirks हटाने की बात का उल्लेख नहीं है।

    HTML5 shiv का इतिहास

  • वे अच्छे पुराने दिन याद हैं जब transparent 1×1 pixel gif का उपयोग करके table cell को control किया जाता था।

  • शुरुआती दौर में व्यापक रूप से इस्तेमाल हुए  , यानी non-breaking space character entity, पर एक और टिप्पणी:

    इसका उपयोग text को container के भीतर दाईं या बाईं ओर खिसकाने के लिए किया जाता था। या table cell को सही तरह से काम कराने के लिए 1x1 spacer gif की तरह इस्तेमाल होता था। कुछ pages में सैकड़ों   होते थे। आम तौर पर इसे margin या padding जोड़ने के तरीके के रूप में इस्तेमाल किया जाता था।

  • कभी-कभी समझ नहीं आता कि modern web developers CSS Grid और IE के अंत की वजह से बिगड़ गए हैं, या हम उस समय बिगड़े हुए थे क्योंकि हमें complex modern frameworks और build process से नहीं जूझना पड़ता था।

  • यह सवाल कि responsive design सच में hack है या नहीं:

    media queries कमाल की हैं। conditional logic को JavaScript में डालने के बजाय CSS में रखना, जब आप server-side rendering चाहते हैं, एक बड़ा फ़ायदा है।