← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 2 of 20

HTML ब्राउज़र सपोर्ट

फ़र्ज़ करें आप एक futuristic electric car बना रहे हैं जिसे special high-tech charging ports चाहिए। अगर आप उस car को किसी छोटे, दूर के town में ले जाते हैं, तो हो सकता है वहाँ सिर्फ standard power outlets ही हों, जिससे आप charge ही न कर पाएं। आपको एक fallback adaptor चाहिए ताकि आपकी car कहीं भी charge हो सके। Web browsers वे अलग-अलग towns हैं। modern browsers सभी latest HTML5 features support करते हैं, लेकिन पुराने browsers उन्हें render करने में असफल हो सकते हैं, जिससे blank areas या broken layouts दिख सकते हैं। browser support समझने का मतलब है अपने HTML code में smart fallback adaptors बनाना, ताकि आपकी website किसी भी device पर, चाहे वह कितनी भी पुरानी हो, functional, साफ-सुथरी, और usable बनी रहे।

In this page:

  1. HTML फीचर सपोर्ट चेक करना
  2. Tag Level Fallbacks देना
  3. Legacy सपोर्ट के लिए Polyfills इस्तेमाल करना
  4. क्रॉस-ब्राउज़र लेआउट टेस्टिंग
  5. ग्रेसफुल डिग्रेडेशन डिज़ाइन करना

HTML फीचर सपोर्ट चेक करना

आधुनिक HTML5 features अक्सर introduce होते रहते हैं, लेकिन support अलग-अलग browser versions में अलग हो सकता है। आप कोई specific API चलाने से पहले यह चेक करने के लिए सरल JavaScript scripts लिख सकते हैं कि browser उसे support करता है या नहीं।

Note: अपनी scripts के अंदर complex feature detection साफ-सुथरे तरीके से handle करने के लिए Modernizr जैसी लोकप्रिय library का इस्तेमाल करें।
Warning: features detect करने के लिए browser-sniffing scripts पर निर्भर न रहें, क्योंकि user-agent strings को आसानी से fake किया जा सकता है।

उदाहरण: Checking HTML Feature Support

markup 
<script>
  if ('geolocation' in navigator) {
    console.log('Geolocation supported');
  }
</script>

Tag Level Fallbacks देना

कई आधुनिक HTML5 tags (जैसे canvas, video, और audio) आपको tags के अंदर सीधे fallback text या markup लिखने देते हैं। जो पुराने browsers इस tag को support नहीं करते, वे इसे ignore करके इसकी जगह fallback text दिखाते हैं।

Note: legacy users को files सीधे save करने देने के लिए media tags के अंदर fallback text के तौर पर download links इस्तेमाल करें।
Warning: अपने tags के अंदर हमेशा साफ, मददगार fallback text लिखें, क्योंकि पुराने browsers इन tags को पूरी तरह ignore कर देंगे।

उदाहरण: Providing Tag Level Fallbacks

markup 
<video src="movie.mp4" controls>
  Your browser does not support the video tag.
</video>

Legacy सपोर्ट के लिए Polyfills इस्तेमाल करना

polyfill JavaScript कोड का एक छोटा टुकड़ा है जो पुराने browsers पर आधुनिक HTML5 APIs को replicate करता है जो उन्हें natively support नहीं करते, ताकि आपके features हर device पर consistent तरीके से चलें।

Note: modern devices पर bandwidth बर्बाद होने से बचाने के लिए polyfill scripts सिर्फ पुराने browsers पर ही लोड करें।
Warning: कुछ complex features (जैसे native video playing) को आसानी से polyfill नहीं किया जा सकता, इसलिए हमेशा simple fallbacks दें।

उदाहरण: Using Polyfills for Legacy Support

markup 
<script src="polyfill.js"></script>

क्रॉस-ब्राउज़र लेआउट टेस्टिंग

web engines (जैसे Chrome में Blink, Safari में WebKit, और Firefox में Gecko) styles को अलग-अलग तरीके से parse और render करते हैं। सभी platforms पर अपने layouts को consistent दिखाने के लिए, standard, widely supported properties का इस्तेमाल करें।

Note: browser-specific default spacing और margins हटाने के लिए अपने projects में एक CSS reset file इस्तेमाल करें।
Warning: सिर्फ browser default styles पर निर्भर रहने से आपकी website के layouts अलग-अलग devices पर inconsistent दिख सकते हैं।

उदाहरण: Cross-Browser Layout Testing

markup 
<link rel="stylesheet" href="reset.css">

ग्रेसफुल डिग्रेडेशन डिज़ाइन करना

graceful degradation एक design strategy है जिसमें आप अपनी site को सभी नए, आधुनिक features के साथ बनाते हैं, लेकिन यह सुनिश्चित करते हैं कि layout पुराने browsers पर crash होने के बजाय एक सरल, functional version में degrade हो जाए।

Note: अपने fallback designs में core content की legibility और basic navigation को प्राथमिकता दें।
Warning: सिर्फ इसलिए users को अपनी site access करने से न रोकें कि वे किसी पुराने browser version पर हैं; content को accessible रखें।

उदाहरण: Designing Graceful Degradation

markup 
<video src="movie.mp4" controls>
  <a href="movie.mp4">Download the video</a> if playback is not supported.
</video>
Live Example
Related Topics

HTML ब्राउज़र DevTools · HTML कीबोर्ड शॉर्टकट्स · HTML कैरेक्टर सेट्स · HTML डॉकटाइप्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Keyboard Shortcuts Next Lesson → HTML Character Sets

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.