لإعادة ضبط قسم واحد من صفحة تنشئها، استخدم إعادة ضبط CSS موجّهة للترميز الذي تتحكم فيه، أو Shadow DOM لأنماط المكوّنات المعزولة، أو إطارًا مضمّنًا لمستند منفصل. يوضح هذا الدليل كيفية الاختيار ومعاينة النتيجة على Mac.

ما نوع إعادة الضبط الذي يحتاج إليه قسمك؟

مهمة القارئ هنا محددة: منح لوحة معاينة متداخلة طباعةً وتباعدًا ورسومات تجريدية خاصة بها، مع الحفاظ على مظهر الصفحة المحيطة. تحتاج إلى الوصول إلى ملفات مصدر الصفحة والإذن بتعديلها.

اختر الحد الفاصل قبل اختيار تصريح إعادة الضبط. فقيم خصائص CSS ونطاق المحددات وموارد المستند أمور مختلفة. يجمع دليل القرار التالي السلوك الموثق لكل من إعادات ضبط CSS وShadow DOM والإطارات المضمّنة.

متطلبك الخيار العملي الشرط الذي ينبغي مراعاته
إزالة تنسيقات محددة من ترميز متداخل عادي تصريحات موجّهة أو all لا يزال بإمكان المحددات الخارجية مطابقة عناصر القسم.
إبقاء المحددات الداخلية منفصلة عن محددات الصفحة Shadow DOM مع خط أساس داخلي صريح لا تزال القيم الموروثة بحاجة إلى معالجة.
منح القسم مستندًا وإعدادًا خاصين بأوراق الأنماط إطار مضمّن يحتاج حجمه وموارده إلى إعداد منفصل.

بالنسبة إلى لوحة معاينة صغيرة تنشئها، يُعد Shadow DOM نقطة بداية مفيدة. فهو يوفر حدًا فاصلًا للمحددات دون الحاجة إلى ملف HTML ثانٍ. وإذا كنت تحتاج فقط إلى إزالة حد أو تغيير خط عنوان، فالتصريحات الصريحة أبسط من إدخال حدّ للمكوّن.

لماذا لا تعيد all: revert ضبط قسم متداخل بالكامل؟

يغيّر الاختصار all الخصائص على العناصر التي يطابقها. وهو يستثني الخصائص المخصصة وdirection وunicode-bidi. كما أنه لا ينشئ مستندًا منفصلًا ولا يمنع المحددات الأخرى من مطابقة تلك العناصر. مرجع all من MDN

وتنتج كلمات إعادة الضبط الأساسية قيمًا افتراضية مختلفة. تستخدم initial القيمة الابتدائية المحددة لكل خاصية في المواصفات. أما unset فترث الخصائص التي تُورث عادةً وتضبط الخصائص الأخرى على قيمها الابتدائية. وفي ورقة أنماط المؤلف، تعيد revert الخاصية المتأثرة إلى ما قبل تنسيقات المؤلف؛ مع ذلك، قد تظل القيم الموروثة آتية من العنصر الأب. التتالي والتوريث في CSS، المستوى 5

على سبيل المثال، لا تؤدي إعادة ضبط لون قسم إلى إزالة تصريح لون يطابق مباشرةً فقرةً داخله. توضح MDN هذا الفرق تحديدًا: تحتفظ الفقرة بلونها المعيّن مباشرةً حتى عندما يستخدم العنصر الأب revert. لذا لا تكفي إعادة الضبط على عنصر حاوٍ عندما تكون محددات العناصر المتحدرة هي مصدر المظهر غير المرغوب فيه. مثال إعادة الضبط على العنصر الأب من MDN

توسّع إعادة الضبط المطبقة على كل العناصر المتحدرة نطاق تأثيرها، لكنها تزيل أيضًا تخطيطات وتنسيقات مفيدة. مع all: initial، يُفقد حتى عرض العنصر div المعتاد في المتصفح بوصفه كتلة، ما لم تُعِد تعيينه. استخدم إعادة الضبط هذه فقط عندما تكون قادرًا على إعادة بناء العرض المطلوب عن قصد. مثال إعادة ضبط أداة في المواصفات

يؤدي revert-layer غرضًا آخر: إعادة الخاصية عبر طبقات التتالي. وهو مفيد عندما تكون المشكلة في طبقة محددة من الأنماط، لكنه لا ينشئ حدًا فاصلًا للمكوّن. التراجع عبر طبقات التتالي في CSS

أنشئ لوحة معاينة مستقلة على جهاز Mac

ينشئ هذا المثال الكامل واجهة محيطة داكنة ولوحة متداخلة فاتحة تحتوي على تسميات اصطناعية وشكلين أصليين بتنسيق CSS. كل شيء مضمّن: لا حاجة إلى تنزيلات أو حزم أو خطوط خارجية أو ملفات صور.

في TextEdit، اختر File > New، ثم Format > Make Plain Text. الصق المثال الكامل أدناه، واحفظه باسم section-reset.html، واختر Use .html إذا ظهرت مطالبة بذلك. هذه هي الخطوات التي توثقها Apple لإنشاء ملف HTML. العمل مع مستندات HTML في TextEdit على Mac

<!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. النتيجة المتوقعة لوحة فاتحة بعنوان بحروف كبيرة وصغيرة وفق نمط الكتابة المعتاد وفقرة بلا حد. خارجها، يظل العنوان بأحرف كبيرة ولون أزرق، وتحتفظ الفقرات بحدودها اليسرى. هذه نتائج متوقعة من المثال، وليست قياسات مُبلّغًا عنها لاختبارات المتصفح.

يربط النص البرمجي جذر ظل بعنصر مضيف مخصص لهذا الغرض، وينشئ اللوحة داخل ذلك الجذر. تنتمي ورقة الأنماط إلى شجرة الظل، لذا تنطبق محددات العناوين والفقرات العادية فيها داخليًا. ولا تصل محددات العناوين والفقرات العادية في المستند إلى تلك العناصر الداخلية. وهذا يتبع نمط تنسيق Shadow DOM الموثق من MDN.

يوفر .panel الداخلي الجزء الثاني من الحل: خط أساس صريح. تفصل حدود الظل بين مطابقة المحددات، بينما يظل التوريث ساريًا عبر شجرة العناصر المعروضة. وتمنع إعادة ضبط العنصر الحاوي الداخلي الخط المحيط ذا الزوائد وتباعد الأحرف من أن يصبحا خط الأساس الموروث المعتاد له. تصف مسودة مواصفات CSS Shadow الحالية نموذج التوريث هذا، لكنها تظل مسودة للمحررين. وحدة CSS Shadow، المستوى 1

ما الذي يظل عابرًا للحد الفاصل أو مؤثرًا فيه؟

يظل العنصر المضيف عنصرًا في المستند المحيط. ويمكن لقواعد الصفحة تغيير هامشه أو عرضه أو طريقة عرضه، كما يظل أحد الأسلاف محددًا لمقدار المساحة المتاحة للوحة. اجعل ورقة أنماط الصفحة مسؤولة عن موضع العنصر المضيف، وورقة أنماط الظل مسؤولة عن المظهر الداخلي للوحة. يتبع هذا التقسيم الفرق الموثق بين مضيف الظل وشجرته الداخلية. دليل نطاق CSS

تحتاج الخصائص المخصصة أيضًا إلى اتفاق واضح. لا يمسحها all. يتجنب هذا المثال استخدام الخصائص المخصصة الموروثة، لذا لا يمكن لمتغير خارجي تغيير الألوان المختارة عبر مرجع var(). إذا أضفت متغيرات للسمات لاحقًا، فحدّد الأسماء التي يقبلها المكوّن ووفر قيمًا افتراضية داخلية. استثناءات إعادة الضبط من MDN

أبقِ محتوى اللوحة الجديد داخل جذر الظل عندما تريد الحد نفسه لمطابقة المحددات. فالمحتوى المُدرج عبر الفتحات له علاقات تنسيق مختلفة لأنه ينشأ في شجرة الضوء؛ وإضافة الفتحات تغيّر افتراضات هذا المثال. شرح CSS Shadow للفتحات والعلاقات بين الأشجار

كما أن Shadow DOM ليس أمرًا لإعادة ضبط الموارد. يتجنب المثال الاعتماد على الموارد بالكامل. إذا كان المطلوب مستند HTML منفصلًا بمراجع أوراق أنماط خاصة به، فاستخدم أسلوب الإطار أدناه.

متى ينبغي استخدام إطار مضمّن؟

يضمّن الإطار المضمّن مستندًا آخر. لذا فهو مناسب لمعاينة ذات تنسيق مستقل، ينبغي أن يكون إعداد مستندها منفصلًا عن الصفحة المحيطة. يعرّف معيار HTML src لمورد مرجعي وsrcdoc لمستند مضمّن. معيار HTML: عنصر iframe

لترتيب محلي من ملفين، أنشئ ملف HTML كاملًا ثانيًا باسم panel.html يحتوي على اللوحة وورقة أنماطها. استبدل العنصر المضيف ونصه البرمجي بإطار مضمّن يشير إلى ذلك الملف. ما يلي مقتطف دمج، وليس مستندًا مستقلًا:

<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. مرجع سمات iframe من MDN

تحقّق من التوافق وشخّص التنسيق غير المتوقع

تشير 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 مع خط أساس محدد للوحة معزولة، أو إطار مضمّن لمستند منفصل. اجعل الموضع والتنسيق الداخلي ومراجع الموارد صريحة حتى يتسنى تغيير القسم دون الحاجة إلى إعادة تصميم ما يحيط به.

المصادر