अपने बनाए पेज के किसी एक सेक्शन को रीसेट करने के लिए, नियंत्रित मार्कअप पर लक्षित CSS रीसेट, सीमित कंपोनेंट स्टाइल के लिए Shadow DOM, या अलग दस्तावेज़ के लिए iframe का उपयोग करें। यह गाइड दिखाती है कि Mac पर विकल्प कैसे चुनें और नतीजे का पूर्वावलोकन कैसे देखें।

आपके सेक्शन को किस तरह के रीसेट की ज़रूरत है?

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

रीसेट घोषणा चुनने से पहले सीमा तय करें। CSS प्रॉपर्टी मान, चयनकर्ता का दायरा और दस्तावेज़ संसाधन अलग-अलग चिंताएँ हैं। यह निर्णय-सहायक CSS रीसेट, Shadow DOM और इनलाइन फ़्रेम के दस्तावेज़ीकृत व्यवहार को मिलाता है।

आपकी आवश्यकता व्यावहारिक विकल्प ध्यान रखने की शर्त
सामान्य नेस्टेड मार्कअप से चुनी हुई स्टाइल हटाना लक्षित घोषणाएँ या all बाहरी चयनकर्ता अब भी सेक्शन के तत्वों से मेल खा सकते हैं।
आंतरिक चयनकर्ताओं को पेज के चयनकर्ताओं से अलग रखना स्पष्ट आंतरिक आधार-शैली वाला Shadow DOM इनहेरिट किए गए मानों पर अब भी ध्यान देना होगा।
सेक्शन को अपना दस्तावेज़ और स्टाइलशीट सेटअप देना iframe इसके आयामों और संसाधनों को अलग से कॉन्फ़िगर करना होगा।

छोटे, स्वयं बनाए गए पूर्वावलोकन पैनल के लिए Shadow DOM एक उपयोगी शुरुआती विकल्प है। यह दूसरी HTML फ़ाइल की आवश्यकता के बिना चयनकर्ता की सीमा देता है। अगर आपको सिर्फ़ बॉर्डर हटाना या शीर्षक का फ़ॉन्ट बदलना है, तो कंपोनेंट सीमा जोड़ने के बजाय स्पष्ट घोषणाएँ सरल रहेंगी।

all: revert नेस्टेड सेक्शन को पूरी तरह रीसेट क्यों नहीं करता?

all शॉर्टहैंड उन तत्वों की प्रॉपर्टी बदलता है जिनसे वह मेल खाता है। इसमें कस्टम प्रॉपर्टीज़, direction और unicode-bidi शामिल नहीं हैं। यह अलग दस्तावेज़ नहीं बनाता और न ही अन्य चयनकर्ताओं को उन तत्वों से मेल खाने से रोकता है। MDN का all संदर्भ

रीसेट कीवर्ड अलग-अलग आधार-शैलियाँ देते हैं। initial हर प्रॉपर्टी के लिए विनिर्देश में तय शुरुआती मान का उपयोग करता है। unset सामान्यतः इनहेरिट होने वाली प्रॉपर्टीज़ को इनहेरिट करता है और बाकी को शुरुआती मान देता है। ऑथर स्टाइलशीट में revert प्रभावित प्रॉपर्टी को ऑथर स्टाइलिंग से भी पहले की स्थिति में लौटाता है; इनहेरिट किए गए मान अब भी पैरेंट से आ सकते हैं। CSS Cascading and Inheritance Level 5

उदाहरण के लिए, सेक्शन का रंग रीसेट करने से उसके भीतर के पैराग्राफ़ से सीधे मेल खाने वाली रंग घोषणा नहीं हटती। MDN इसी अंतर को दिखाता है: पैरेंट पर revert होने पर भी पैराग्राफ़ अपना सीधे निर्धारित रंग बनाए रखता है। इसलिए जब अवांछित रूप का स्रोत वंशज चयनकर्ता हों, तो रैपर पर रीसेट लगाना पर्याप्त नहीं है। MDN का पैरेंट-रीसेट उदाहरण

हर वंशज पर रीसेट लगाने से उसका दायरा बढ़ता है, लेकिन उपयोगी लेआउट और फ़ॉर्मैटिंग भी हट जाती है। all: initial के साथ, किसी div तत्व का ब्राउज़र का सामान्य ब्लॉक डिस्प्ले भी हट जाता है, जब तक कि आप उसे वापस न जोड़ें। ऐसा रीसेट तभी उपयोग करें जब आप ज़रूरी प्रस्तुति को सोच-समझकर फिर से बना सकते हों। विनिर्देश का विजेट-रीसेट उदाहरण

revert-layer का उद्देश्य अलग है: यह कैस्केड लेयरों के ज़रिए किसी प्रॉपर्टी को पीछे की स्थिति में लौटाता है। जब समस्या स्टाइल की किसी खास लेयर में हो, तब यह उपयोगी है, लेकिन इससे कंपोनेंट सीमा नहीं बनती। CSS कैस्केड-लेयर रोलबैक

अपने Mac पर एक स्व-निहित पूर्वावलोकन पैनल बनाएँ

यह पूरा उदाहरण गहरे रंग का बाहरी इंटरफ़ेस और हल्के रंग का नेस्टेड पैनल बनाता है, जिसमें नमूना लेबल और CSS से बने दो मौलिक आकार हैं। सब कुछ इनलाइन है: डाउनलोड, पैकेज, बाहरी फ़ॉन्ट या इमेज फ़ाइलों की ज़रूरत नहीं है।

TextEdit में File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया पूरा उदाहरण पेस्ट करें, इसे section-reset.html नाम से सेव करें और संकेत मिलने पर Use .html चुनें। HTML फ़ाइल बनाने के लिए Apple के दस्तावेज़ीकृत चरण यही हैं। Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करें

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Section reset demonstration</title>
  <style>
    body {
      margin: 0;
      padding: 32px;
      background: #202a36;
      color: #f2f5f8;
      font: 18px/1.6 Georgia, serif;
      letter-spacing: 1px;
    }
    main { max-width: 720px; margin: auto; }
    h2 { color: #bce8ff; text-transform: uppercase; }
    p { border-left: 4px solid #7db5cf; padding-left: 12px; }
    #panel-host { display: block; margin: 24px 0; }
  </style>
</head>
<body>
  <main>
    <h1>Shape workspace</h1>
    <p>Outer label Alpha</p>
    <div id="panel-host">
      <p>Preview unavailable. Use a browser supporting Shadow DOM.</p>
    </div>
    <h2>Outer label Beta</h2>
    <p>This paragraph belongs to the surrounding interface.</p>
  </main>
  <script>
    const host = document.getElementById("panel-host");
    if (typeof host.attachShadow === "function") {
      const root = host.attachShadow({ mode: "open" });
      const style = document.createElement("style");
      style.textContent = `
        .panel {
          all: initial;
          display: block;
          box-sizing: border-box;
          direction: ltr;
          unicode-bidi: normal;
          font: 16px/1.5 system-ui, sans-serif;
          color: #233344;
          background: #f4f7fa;
          padding: 24px;
          border: 2px solid #9db0c1;
          border-radius: 12px;
        }
        h2 { margin: 0 0 12px; font-size: 22px; }
        p { margin: 0 0 16px; }
        .shapes { display: flex; gap: 16px; flex-wrap: wrap; }
        .circle {
          width: 56px; height: 56px;
          border-radius: 50%; background: #386f91;
        }
        .bar {
          width: 104px; height: 56px;
          border-radius: 8px; background: #c98252;
        }
      `;
      const panel = document.createElement("section");
      panel.className = "panel";
      const heading = document.createElement("h2");
      heading.textContent = "Panel Delta";
      const text = document.createElement("p");
      text.textContent = "Circle and rounded bar";
      const shapes = document.createElement("div");
      shapes.className = "shapes";
      shapes.setAttribute("aria-hidden", "true");
      for (const name of ["circle", "bar"]) {
        const shape = document.createElement("div");
        shape.className = name;
        shapes.append(shape);
      }
      panel.append(heading, text, shapes);
      root.append(style, panel);
    }
  </script>
</body>
</html>

सेव की गई फ़ाइल अपने Mac के ब्राउज़र में खोलें। अपेक्षित नतीजा है: मिश्रित बड़े और छोटे अक्षरों वाला शीर्षक तथा बिना बॉर्डर वाला पैराग्राफ़, दोनों हल्के पैनल में। पैनल के बाहर शीर्षक बड़े अक्षरों में और नीला बना रहता है, और पैराग्राफ़ अपनी बाईं बॉर्डर बनाए रखते हैं। ये उदाहरण के अपेक्षित नतीजे हैं, ब्राउज़र परीक्षण से दर्ज किए गए माप नहीं।

स्क्रिप्ट खाली होस्ट पर एक शैडो रूट जोड़ती है और उस रूट के भीतर पैनल बनाती है। इसकी स्टाइलशीट शैडो ट्री से जुड़ी है, इसलिए शीर्षक और पैराग्राफ़ के सामान्य चयनकर्ता अंदर लागू होते हैं। दस्तावेज़ के सामान्य शीर्षक और पैराग्राफ़ चयनकर्ता उन आंतरिक तत्वों तक नहीं पहुँचते। यह MDN के दस्तावेज़ीकृत Shadow DOM स्टाइलिंग पैटर्न के अनुरूप है।

आंतरिक .panel समाधान का दूसरा हिस्सा देता है: एक स्पष्ट आधार-शैली। शैडो सीमाएँ चयनकर्ता के मेल को अलग करती हैं, जबकि इनहेरिटेंस रेंडर किए गए तत्व ट्री के ज़रिए काम करता रहता है। आंतरिक रैपर को रीसेट करने से आसपास का serif फ़ॉन्ट और अक्षरों के बीच की दूरी उसकी सामान्य इनहेरिट की गई आधार-शैली नहीं बनते। मौजूदा CSS Shadow विनिर्देश इनहेरिटेंस के इस मॉडल का वर्णन करता है; यह अब भी संपादक का मसौदा है। CSS Shadow Module Level 1

सीमा के पार अब भी क्या पहुँचता है या उसे प्रभावित करता है?

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

कस्टम प्रॉपर्टीज़ के लिए भी स्पष्ट अनुबंध ज़रूरी है। all उन्हें साफ़ नहीं करता। यह उदाहरण इनहेरिट की गई कस्टम प्रॉपर्टीज़ का उपयोग नहीं करता, इसलिए बाहरी वेरिएबल var() संदर्भ के ज़रिए चुने गए रंग नहीं बदल सकता। अगर बाद में आप थीम वेरिएबल जोड़ें, तो तय करें कि कंपोनेंट किन नामों को स्वीकार करता है और उनके लिए आंतरिक डिफ़ॉल्ट दें। MDN के रीसेट अपवाद

जब आप वही चयनकर्ता सीमा चाहते हों, तो नई पैनल सामग्री को शैडो रूट के भीतर रखें। स्लॉट की गई सामग्री के स्टाइलिंग संबंध अलग होते हैं, क्योंकि वह लाइट ट्री से आती है; स्लॉट जोड़ने से इस उदाहरण की मान्यताएँ बदल जाती हैं। स्लॉट और ट्री संबंधों पर CSS Shadow की व्याख्या

Shadow DOM संसाधनों को रीसेट करने का निर्देश भी नहीं है। उदाहरण में संसाधन निर्भरताएँ पूरी तरह टाली गई हैं। अगर ज़रूरी अनुबंध में अपनी स्टाइलशीट संदर्भों वाला अलग HTML दस्तावेज़ चाहिए, तो नीचे दिया फ़्रेम वाला तरीका अपनाएँ।

इसके बजाय iframe का उपयोग कब करना चाहिए?

iframe एक दूसरा दस्तावेज़ एम्बेड करता है। इसलिए यह ऐसे स्वतंत्र रूप से स्टाइल किए गए पूर्वावलोकन के लिए उपयुक्त है जिसका दस्तावेज़ सेटअप आसपास के पेज से अलग होना चाहिए। HTML Standard, संदर्भित संसाधन के लिए src और इनलाइन दस्तावेज़ के लिए srcdoc निर्धारित करता है। HTML Standard: iframe तत्व

स्थानीय दो-फ़ाइल व्यवस्था के लिए panel.html नाम की दूसरी पूरी HTML फ़ाइल बनाएँ, जिसमें पैनल और उसकी स्टाइलशीट हो। होस्ट और उसकी स्क्रिप्ट को हटाकर उनकी जगह उस फ़ाइल का संदर्भ देने वाला iframe रखें। नीचे दिया अंश एकीकरण के लिए है, अपने आप में पूरा दस्तावेज़ नहीं:

<iframe
  title="Shape panel preview"
  src="panel.html"
  style="display:block;width:100%;height:280px;border:0">
</iframe>

यहाँ फ़ाइल नाम स्थानीय उदाहरणों के हैं। इस अंश का उपयोग करने से पहले दूसरी असली फ़ाइल दें। फ़्रेम का बाहरी आकार कंटेनिंग पेज के अधीन है; एम्बेड किया गया पेज अपनी आंतरिक प्रस्तुति देता है। 280px को शुरुआती उदाहरण मानें और यह मानने के बजाय कि लंबी सामग्री उसमें समा जाएगी, उसे जाँचें।

अगर आप इसके बजाय srcdoc चुनते हैं, तो याद रखें कि सापेक्ष संसाधन URL एम्बेड करने वाले पेज के URL के आधार पर हल होते हैं। इसलिए इनलाइन दस्तावेज़ को अपने आप स्वतंत्र संसाधन आधार नहीं मिलता। MDN यह भी बताता है कि असमर्थित srcdoc की जगह src अपनाया जाता है। MDN का iframe एट्रिब्यूट संदर्भ

संगतता जाँचें और अप्रत्याशित स्टाइलिंग की समस्या खोजें

MDN के अनुसार, मूल attachShadow() और all प्रॉपर्टी दोनों जनवरी 2020 से सभी ब्राउज़र में व्यापक रूप से उपलब्ध हैं। इसका अर्थ यह नहीं कि इन सुविधाओं के हर नए विकल्प की भी यही उपलब्धता है। यह उदाहरण मूल open मोड का उपयोग करता है और Shadow DOM उपलब्ध न होने पर दिखाई देने वाला फ़ॉलबैक संदेश रखता है। MDN: attachShadow(), MDN: all

@scope चयनकर्ताओं के एक समूह को लागू करने की जगह सीमित करने का एक अन्य समर्थित तरीका है, लेकिन यह इनहेरिटेंस को नहीं रोकता और न ही असंबंधित वैश्विक नियमों को सबट्री में आने से रोकता है। MDN बताता है कि यह मार्च 2026 से मौजूदा ब्राउज़र में व्यापक रूप से उपलब्ध हुआ है, जबकि पुराने ब्राउज़र में सीमाएँ हैं। जब चयनकर्ताओं का संगठन ही आवश्यकता पूरी करता हो, तब इसका उपयोग करें; संबंधित सीमाएँ ज़रूरी हों तो Shadow DOM या फ़्रेम का उपयोग करें। MDN: @scope

उदाहरण संपादित करने के बाद समस्या खोजने के लिए यह क्रम अपनाएँ:

  1. अगर फ़ाइल में स्रोत टेक्स्ट दिख रहा है, तो पुष्टि करें कि सेव किया गया एक्सटेंशन .html है और फ़ाइल ब्राउज़र में खोलें।
  2. अगर फ़ॉलबैक संदेश अब भी दिख रहा है, तो पुष्टि करें कि JavaScript चल रहा है और ब्राउज़र attachShadow() का समर्थन करता है।
  3. अगर पैनल का रूप गलत है, तो पुष्टि करें कि उसकी सामग्री शैडो रूट में जोड़ी गई है, फिर उसकी आंतरिक आधार-शैली और स्टाइलशीट जाँचें।
  4. अगर आसपास का इंटरफ़ेस बदलता है, तो दस्तावेज़ स्टाइलशीट और होस्ट नियमों में हुए बदलाव देखें।
  5. अगर सामग्री अब समाती नहीं है, तो टाइपोग्राफी बदलने से पहले होस्ट या फ़्रेम के आयाम जाँचें।

काम पूरा करने वाली सबसे छोटी सीमा चुनें: नियंत्रित सुधार के लिए लक्षित CSS, सीमित पैनल के लिए परिभाषित आधार-शैली वाला Shadow DOM, या अलग दस्तावेज़ के लिए iframe। स्थिति, आंतरिक स्टाइलिंग और संसाधन संदर्भ स्पष्ट रखें, ताकि आसपास के डिज़ाइन को फिर से बनाए बिना सेक्शन बदला जा सके।

स्रोत