يضيف "وضع المخطط التفصيلي فقط" حدودًا خارجية مرمزة لونيًا لكل عنصر HTML في صفحة الويب، مما يمنحك عرضًا بأشعة X لبنية تخطيط الصفحة على الفور. شاهد بدقة أين يقع كل div، قسم، ترويسة، فقرة، وزر — بما في ذلك المسافات البادئة (padding)، الهوامش (margins)، وعلاقات التداخل (nesting).
غالبًا ما يكون فهم تخطيط الصفحة هو الخطوة الأولى في تصحيح أخطاء CSS. هل المساحة البيضاء الإضافية ناتجة عن المسافة البادئة (padding) أم الهامش (margin)؟ هل العنصر أعرض مما هو متوقع بسبب عنصر فرعي غير مقيد؟ هل هناك عنصران متداخلان بسبب تضارب في تحديد المواقع؟ يُجيب "وضع المخطط التفصيلي فقط" عن هذه الأسئلة على الفور من خلال رسم حدود ملونة حول كل عنصر في الصفحة. على عكس أدوات مطوري المتصفحات (التي تُميز عنصرًا واحدًا فقط في كل مرة)، تُبرز هذه الأداة كل شيء في الوقت نفسه — لتعطيك الصورة الكاملة. كل نوع من أنواع عناصر HTML يحصل على لون مميز: العناوين زرقاء، عناصر التنقل صفراء، المحتوى الرئيسي أخضر، الفقرات وردية، الأزرار زرقاء سماوية، وهكذا. الترميز הלוני يجعل من السهل رصد الأنماط الهيكلية والتعرف على العناصر بنظرة واحدة دون قراءة الـ DOM.
قم بالتبديل بين المخططات التفصيلية على كل عنصر بنقرة واحدة — بدون تكوين، وبدون لوحة إعدادات. انقر مرة واحدة لرؤية كل الحدود، وانقر مجددًا لإزالتها. إنها الطريقة الأسرع لتصوّر هيكلة التخطيط في أي صفحة ويب.
تحصل عناصر HTML المُختلفة على ألوان خطوط خارجية مُختلفة للتمكن من تمييزها بصريًا وبشكل فوري. العناوين زرقاء، التنقل باللون الأصفر، المحتوى الأساسي أخضر، الفقرات وردية، الأزرار باللون السماوي، الـ divs باللون الرمادي، لتستطيع التعرف على أنواع العناصر دون قراءة شجرة العناصر (DOM).
الخطوط الخارجية تجعل أخطاء التصميم المخفية في CSS مرئية. تستطيع أن تحدد الهوامش الغير المتوقعة التي تزيد المساحات البيضاء، أو المسافات البادئة (padding) التي تجعل العناصر أعرض مما يجب، أو التجاوز الذي يتسبب في ظهور أشرطة تمرير، أو العناصر المنكمشة ذات الارتفاع الصفري. كل حدود العناصر تصبح واضحة للعين المجرّدة.
الخطوط الخارجية المتداخلة توضح البنية المترابطة للعناصر (الآباء-والأبناء) في الـ DOM. تعرف على مدى تداخل العناصر، لتعلم أي الحاويات تتضمن أيًا من المحتوى، وتعرف أين أطراف كل مستوى من التداخل تقع. الأمر ليس له قيمة تُقدر بثمن خصوصاً عند التعامل مع التخطيطات المعقدة لشبكات العرض (Grid) والتمديد الافتراضي (Flex).
فعله في أي صفحة ويب — في مشاريعك الخاصة، أو التابعة للعملاء، صفحات المنافسين، أو صفحات للتصاميم المعيارية. يتم تطبيق المخططات عبر دمج كود الـ CSS لتفادي تعديل شجرة عناصر الـ (DOM) أو التأثير على أي من وظائف الـ JavaScript.
يتم رسم المُخططات باِستخدام حواف outline فى الـ CSS (وليس الحدود border)، هذا يعني أنه لن يحدث اى تأثير او زيادة في أبعاد المساحات (box model) التابعة للعناصر، أى أن تخطيط العناصر سيبقى على حالة بالظبط — نظراً لأن الأمر يُصبح مرئي فقط ولا يؤدي الى تفاعل المُتصفح لعمل اي انكسار او ترتيب (Reflow).
وضع المخطط التفصيلي فقط covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsهذه المساحة الخالية غير المُعتادة البَيْنَ الأقسام؟ فعّل علامة "Outline Mode"، ستجعلك تُدرِك فوراً إن كانت مُسببة بتأثير الهامش من أخر قسم، أم بفعل حواف (padding) من القسم الأب، أم حتى بتواجد وسم ال div خفي بلا وظيفة كنت غير مُتأكد من تواجدة. مال سيأخذ منك أوقاتاً كثيرة عبر ال devtools, هُنا ينكشف في ثواني معدودة.
قُم بحرك تغيير حجم متصفح النافذة مع عمل ال outlines لتوضيح التخطيط المتكامل عندما ينطوي ويبرز على مناطق التقسيم. لاحظ أي العناصر تتغير في ترتيب العرض وتكدُسُها من أي تجاهه وفي أي الحواف يكون المُحتوى غير مرئي أو خارج الحدود — وكل ذلك بلمحه سريعه.
تداخل وسم div اكثر من اللزوم؟ أو غلُف لا أساس لعملهِ؟ يجعل وضع المخطط هذه التداخلات ظاهرة بوضوح— فإذا شاهدت 5 مُخططات حول مُعظم مُحتوى نصي غير معقد، هذا يُشير لحاجه ترتيب ومُخطط أقصر. يُفضل استعمال هذا للتحرى لـ (Code review / PR).
فعّل أداة המخطط لصفحه البداية وبعدها الصفحه الفرعية. وراجع مع نفسك هل كلتاهما تم بناءه بنفس الأساس والعناصر البنيويَّه؟، أو تطابق مقادير التباعد وأعراض كلاً منهما؟ المخطط سيرشدُك لبصيرة كافية تدرِك بها أي تناقض، وتتغلب عليه.
استعرض واشرح للدارس كيف تكون أشكال ال HTML صناديق، وتعمل بالأساس من المساحات (padding / margin) والتباعد والهوامش الداخليَه، ولترى بالعين تأثيرهم المُتتالى لجعله ينُصِّب من هيكلية الصحه الكلية. فالمُخطط יُحول الدرائس الصامته المٌبطنة لواقع يراه أمامه ومرشداً لتجريبِاتهم.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة "وضع المخطط التفصيلي فقط". فورًا، سيحصل كل عنصر HTML في الصفحة على إطار تخطيط ملون.
لكل عنصر لون مُتميز، الأزرق للعناصر الهيكلية (header, footer, section)، الأخضر لمناطق المُحتوى الرئيسية، البنفسجي للعناوين الرئيسيه، والوردى للفقرات، واللون السماوي لعناصر الادخال أو الأزرار، واللون الأصفر لعناصر التصفح والمُلُخص، ولون رمادي لباقي العلامات القياسية مثل divs و spans.
ابحث عن المساحات الخالية غير الطبيعية (وهي بسبب الهوامش)، أو عن العناصر التى تتجاوز حدود الحاويات التابعة لها (الطفف / overflow)، أو أي مساحات متداخله بشكل غير متماثل (أي تناقض بالتباعد)، أو أي أغطيه مُقحمة داخل مُحتويات غير ضرورية لتتواجد هناك (استخدام ال div بدون حاجة). ستصبح كل هذا مُعضِلات واضحة للغاية.
يُستخدم وضع المُخطط كأساس في البداية، ثم انتقِل بعدها مُباشرة إلى مُخطط CSS Inspector للبحث عن قِيم عناصر واضحة قُمت بالتحقق واكتشافها بالفعل، أو إستعمل "قياس الأبعاد - Measure Distance" للتحقق من مسافات و أطوال العناصر المرصودة بدقة متناهية.
انقر على أيقونه "Outline Mode" من أجل محو أى حواف للُخطط لتستعيد مظهر الصفحة المُعتاد. ولا حاجة لتنظيف الكود — حيث أن الخطية تكون بصيغة ال toggle (تفعيل/تعطيل) فحسب.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.