HTML पूर्वावलोकन / कोड खेल का मैदान

नीचे दिए गए संपादकों में HTML, CSS और JavaScript लिखें और पूर्वावलोकन पैनल में तुरंत परिणाम देखें।

पूर्वावलोकन

यह कैसे काम करता है

  1. HTML पेस्ट या टाइप करें: संपादक में अपना HTML कोड दर्ज करें, पूर्ण दस्तावेज़, खंड, टेम्पलेट या HTML ईमेल।
  2. लाइव रेंडरिंग देखें: पूर्वावलोकन पैनल दिखाता है कि ब्राउज़र आपके HTML को वास्तविक समय में कैसे रेंडर करता है।
  3. तेज़ी से पुनरावृत्ति करें: टैब बदले या फ़ाइल सहेजे बिना संपादन और पूर्वावलोकन के कड़े लूप में।

HTML पूर्वावलोकन क्यों इस्तेमाल करें?

जब आप टेम्पलेट, ईमेल, घटकों या स्थिर पृष्ठों के लिए HTML लिखते हैं, तो आपको इस बात पर निरंतर प्रतिक्रिया चाहिए कि यह कैसा दिखता है।

विशेषताएँ

अक्सर पूछे जाने वाले प्रश्न

क्या मैं HTML ईमेल का पूर्वावलोकन कर सकता हूँ?

हाँ। इनलाइन शैलियों और तालिका लेआउट सहित अपना HTML ईमेल पेस्ट करें। पूर्वावलोकन उसी तरह रेंडर होता है जैसे ईमेल क्लाइंट करेगा।

क्या बाहरी CSS और JavaScript काम करते हैं?

<link> टैग के माध्यम से लोड किए गए बाहरी स्टाइलशीट पूर्वावलोकन iframe में CORS प्रतिबंधों के कारण लोड नहीं हो सकते।

क्या मैं इसे उत्तरदायी डिज़ाइन परीक्षण के लिए उपयोग कर सकता हूँ?

हाँ। विभिन्न स्क्रीन आकारों का अनुकरण करने के लिए पूर्वावलोकन पैनल की चौड़ाई खींचें, या व्यूपोर्ट प्रीसेट (मोबाइल, टैबलेट, डेस्कटॉप) का उपयोग करें।

लाइव प्रीव्यू कैसे काम करता है: iframe srcdoc

<iframe> तत्व को HTML 4.0 (दिसंबर 1997) में पेश किया गया था ताकि एक दस्तावेज़ को दूसरे के अंदर एम्बेड किया जा सके। दो दशकों तक iframe को आबाद करने का एकमात्र तरीका URL को इंगित करने वाले src विशेषता के माध्यम से था। srcdoc विशेषता, जो आपको iframe के HTML को इनलाइन स्ट्रिंग के रूप में पास करने की अनुमति देती है, HTML5 (W3C Rec, अक्टूबर 2014) में जोड़ी गई थी और अब हर आधुनिक ब्राउज़र द्वारा समर्थित है। srcdoc है जो सर्वर अपलोड के बिना ब्राउज़र-आधारित HTML प्रीव्यू टूल को संभव बनाता है: आप HTML लिखते हैं, टूल इसे <iframe srcdoc="..."> में लपेटता है, ब्राउज़र इसे एक पृथक संदर्भ में रेंडर करता है, और कुछ भी नेटवर्क को पार नहीं करता।

sandbox विशेषता और सेम-ओरिजिन जाल

<iframe sandbox> को HTML5 में पेश किया गया था ताकि प्रति-iframe सुरक्षा नीति लागू की जा सके। कोई मान नहीं के साथ, सबसे सख्त सैंडबॉक्स लागू होता है: सेम-ओरिजिन प्रतिबंधित (एक अद्वितीय मूल के रूप में माना जाता है), स्क्रिप्ट अक्षम, फॉर्म अक्षम, शीर्ष-स्तर नेविगेशन अक्षम, प्लगइन्स अक्षम, पॉइंटर लॉक अक्षम, पॉपअप अक्षम, ऑटो-प्ले मीडिया अक्षम। आप टोकन जोड़कर वापस ऑप्ट-इन करते हैं: sandbox="allow-scripts", allow-forms, allow-popups, allow-top-navigation आदि। प्रत्येक टोकन एक विशिष्ट क्षमता खोलता है।

कभी उपयोग न करने वाला संयोजन एक साथ sandbox="allow-scripts allow-same-origin" है: यह JavaScript को document.domain कॉल करने और मूल विंडो तक वापस चलने की अनुमति देता है, सैंडबॉक्स को पूरी तरह से हरा देता है। जब आप दोनों सेट करते हैं तो ब्राउज़र DevTools में इसके बारे में चेतावनी देते हैं। यह प्रीव्यू टूल allow-scripts सेट करता है और स्पष्ट रूप से allow-same-origin नहीं, इसलिए उपयोगकर्ता JS चलता है लेकिन मूल पृष्ठ के DOM, कुकीज, localStorage, IndexedDB, या service-worker कैश को पढ़ या लिख नहीं सकता।

Content Security Policy, रक्षा की दूसरी पंक्ति

एक अलग लेकिन संबंधित रक्षा Content-Security-Policy है, एक HTTP प्रतिक्रिया हेडर जो W3C CSP Level 1 (उम्मीदवार सिफारिश, नवंबर 2012) में पेश किया गया था। CSP Level 3 वर्तमान मानक है। प्रीव्यू टूल के लिए मुख्य निर्देश: frame-src (कौन से iframe लोड किए जा सकते हैं) और script-src (कौन सी इनलाइन/बाहरी स्क्रिप्ट चल सकती हैं)। भले ही एक दुर्भावनापूर्ण पेलोड सैंडबॉक्स से बच गया हो, होस्ट पेज का CSP अभी भी लागू होगा और अधिकांश एक्सफिल्ट्रेशन पथों को मना कर देगा। गहराई में रक्षा: सैंडबॉक्स iframe के कोड को अलग करता है, और होस्ट का CSP सीमित करता है कि होस्ट पेज क्या कर सकता है यदि iframe ने इसे किसी तरह से प्रभावित किया हो।

ईमेल-क्लाइंट HTML अपनी ही दुनिया है

एक प्रीव्यू जो आधुनिक ब्राउज़र HTML रेंडर करता है, ईमेल HTML को नहीं रेंडर करता है। प्रमुख ईमेल क्लाइंट बहुत अलग इंजनों का उपयोग करते हैं: Gmail web क्लास-स्ट्रिपिंग और सीमित <style>-टैग समर्थन (2016 में जोड़ा गया) के साथ WebKit-आधारित रेंडरर का उपयोग करता है। Apple Mail / iOS Mail WebKit का उपयोग करते हैं, सबसे अनुमेय रेंडरर। Outlook डेस्कटॉप (2007 से 2019) HTML ईमेल को Microsoft Word रेंडरिंग इंजन के माध्यम से रेंडर करता है: कोई <style> ब्लॉक समर्थन नहीं, कोई flex/grid नहीं, कोई स्थित तत्व नहीं, कोई एनिमेशन नहीं; पृष्ठभूमि छवियों को VML सशर्त टिप्पणियों की आवश्यकता होती है। यह Outlook विशिष्टता ईमेल विकास में सबसे बड़ा मुद्दा है। Outlook 365 web आधुनिक WebKit है। 2023-2024 में रोल आउट किया गया «नया Outlook» Edge WebView2 का उपयोग करता है। वास्तविक ईमेल-क्लाइंट प्रीव्यू के लिए, Litmus या Email on Acid जैसी सशुल्क सेवा का उपयोग करें।

परीक्षण के लिए प्रतिक्रियाशील ब्रेकपॉइंट

CSS मीडिया-क्वेरी ब्रेकपॉइंट सम्मेलन Ethan Marcotte के मई 2010 के «Responsive Web Design» लेख को A List Apart में वापस ले जाते हैं। दो प्रमुख फ्रेमवर्क ने अलग-अलग कटऑफ चुने:

HTML की मानक वंशावली

उन मानकों के लिए त्वरित संदर्भ जिनके खिलाफ आपकी प्रीव्यू रेंडर हो रही है: HTML 2.0 (RFC 1866, नवंबर 1995), Tim Berners-Lee की पहली आधिकारिक विशिष्टता, ने मूल टैग सेट स्थापित किया। HTML 4.01 (W3C Rec, दिसंबर 1999) ने <script>, <style>, <table>, frames जोड़े। XHTML 1.0 (W3C Rec, जनवरी 2000) ने सख्त XML क्रमबद्धीकरण का प्रयास किया, ज्यादातर 2010 तक छोड़ दिया गया। HTML5 (W3C Rec, अक्टूबर 2014) ने अर्थपूर्ण तत्व (<article>, <section>, <nav>), canvas, video/audio, web storage जोड़े। मई 2019 में, WHATWG ने W3C से प्रशासन ले लिया, और HTML अब html.spec.whatwg.org पर Living Standard के रूप में बनाए रखा जाता है, लगातार अद्यतन।

सामान्य उपयोग के मामले

सामान्य गलतियाँ

  1. पैरेंट से iframe की सामग्री पढ़ने का प्रयास। sandbox सेट होने के साथ, क्रॉस-ओरिजिन प्रतिबंध इसे ब्लॉक करते हैं। iframe postMessage आउट कर सकता है, लेकिन पैरेंट अंदर नहीं पहुँच सकता।
  2. body को लक्षित करने वाला CSS पेस्ट करना और आश्चर्यचकित होना कि टूल के अपने body स्टाइल प्रभावित नहीं हैं। iframe अपने स्वयं के DOM के साथ एक अलग दस्तावेज़ है।
  3. CSP द्वारा अवरुद्ध बाहरी संसाधन। एक <img src="https://example.com/x.png"> आपकी प्रीव्यू में ठीक से लोड हो सकता है लेकिन जब आप वही कोड CSP-लॉक उत्पादन साइट पर कॉपी करते हैं तो अवरुद्ध हो जाता है।
  4. भूल जाना कि DOMContentLoaded iframe में फायर होता है, पैरेंट में नहीं। iframe के अंदर स्क्रिप्ट अपना document देखती हैं, टूल का नहीं।
  5. सैंडबॉक्स टूल में allow-scripts और allow-same-origin दोनों सेट करना, पूरी तरह से उद्देश्य को हराना। ब्राउज़र DevTools में इस संयोजन के बारे में चेतावनी देते हैं।

अधिक अक्सर पूछे जाने वाले प्रश्न

मेरा localStorage प्रीव्यू में काम क्यों नहीं करता?

localStorage और sessionStorage को सैंडबॉक्स विशेषता में allow-same-origin की आवश्यकता होती है। चूंकि इसे allow-scripts के साथ संयोजित करना सैंडबॉक्स को हरा देगा, यह प्रीव्यू डिज़ाइन द्वारा स्टोरेज को ब्लॉक करता है। आपका कोड पहले localStorage.setItem पर SecurityError फेंकेगा। स्टोरेज-निर्भर कोड का परीक्षण करने के लिए, इसे वास्तविक मूल पर चलाएँ (उदाहरण के लिए, स्थानीय देव सर्वर)।

प्रीव्यू कौन सा JavaScript संस्करण समर्थित करता है?

जो भी आपका ब्राउज़र समर्थन करता है। iframe मूल पृष्ठ के समान JS इंजन चलाता है, इसलिए Chrome उपयोगकर्ता को V8, Firefox उपयोगकर्ता को SpiderMonkey, Safari उपयोगकर्ता को JavaScriptCore मिलता है। आधुनिक सुविधाएँ (वैकल्पिक चेनिंग, टॉप-लेवल await, क्लासेज, async/await, ES2024 सिंटैक्स) यदि आपका ब्राउज़र समर्थन करता है तो काम करती हैं। पुराने-ब्राउज़र-लक्ष्य परीक्षण के लिए, Babel या swc से ट्रांसपाइल किया गया आउटपुट पेस्ट करें।

क्या मैं बाहरी स्क्रिप्ट और स्टाइलशीट लोड कर सकता हूँ?

अधिकांश सार्वजनिक CDN के लिए हाँ। <script src="https://cdn.jsdelivr.net/..."> और <link href="https://cdn.tailwindcss.com" rel="stylesheet"> आमतौर पर काम करते हैं क्योंकि वे CDN अनुमेय CORS हेडर सेट करते हैं। ऐसे संसाधन जिन्हें क्रेडेंशियल्स की आवश्यकता है या मूल-लॉक हैं, विफल होंगे। आपके ब्राउज़र के DevTools में Network पैनल ठीक से दिखाता है कि कौन से संसाधन लोड हुए और कौन से ब्लॉक हुए।

यह CodePen / JSFiddle / StackBlitz से कैसे अलग है?

वे सेव / शेयर / फोर्क / सहयोग सुविधाओं वाली पूर्ण कोड-होस्टिंग सेवाएँ हैं और खातों की आवश्यकता होती है। यह टूल एक एकल-पृष्ठ स्क्रैचपैड है: कोई खाता नहीं, कोई सेविंग नहीं, कोई शेयरिंग नहीं, कोई एनालिटिक्स नहीं। पेस्ट, प्रीव्यू, इटरेट, टैब बंद करें। कुछ ऐसा जिसे आप रखना या साझा करना चाहते हैं, CodePen अभी भी बेहतर विकल्प है।

क्या मेरा कोड कहीं अपलोड होता है?

नहीं। आपके द्वारा पेस्ट किया गया HTML / CSS / JS उसी पृष्ठ पर <iframe srcdoc="..."> में लपेटा जाता है और आपके ब्राउज़र में सैंडबॉक्स्ड अद्वितीय मूल में रेंडर होता है। कोई नेटवर्क कॉल आपकी सामग्री ले जाती नहीं है। आपके HTML द्वारा संदर्भित बाहरी संसाधन (छवियाँ, स्क्रिप्ट, स्टाइलशीट) आपके ब्राउज़र द्वारा उसी तरह प्राप्त की जाती हैं जैसे किसी भी वेबपेज पर होंगी, लेकिन स्रोत कोड स्वयं कभी पृष्ठ नहीं छोड़ता।

संबंधित टूल

कोड से इमेज HTML मिनिफायर मुफ़्त Markdown प्रीव्यूअर ऑनलाइन HTML तालिका बिल्डर