حالت Outline به هر عنصر HTML در یک صفحه وب حاشیه رنگی اضافه میکند و نمای X-ray فوری از ساختار چیدمان صفحه به شما میدهد. دقیقاً ببینید هر div، section، header، پاراگراف و دکمه کجا قرار دارد — شامل padding، margin و روابط تودرتوی آنها.
درک چیدمان یک صفحه اغلب اولین قدم در اشکالزدایی مسائل CSS است. آیا آن فضای سفید اضافه از padding است یا margin؟ آیا عنصری به دلیل فرزند بدون محدودیت از حد انتظار عریضتر است؟ حالت Outline این سوالات را فوراً با کشیدن حاشیه رنگی دور هر عنصر پاسخ میدهد. برخلاف DevTools مرورگر که فقط یک عنصر را همزمان برجسته میکند، این ابزار همه چیز را بهطور همزمان outline میکند.
با یک کلیک outline روی هر عنصر را فعال کنید — بدون تنظیمات. یک بار کلیک کنید تا همه حاشیهها را ببینید، دوباره کلیک کنید تا حذف شوند.
عناصر مختلف HTML رنگهای outline متفاوتی دارند. header آبی، ناوبری زرد، محتوای اصلی سبز، عناوین بنفش، پاراگرافها صورتی، دکمهها فیروزهای، div ها خاکستری.
Outlineها مشکلات نامرئی CSS را مرئی میکنند. margin های غیرمنتظره که فضای سفید ایجاد میکنند، padding که عناصر را عریضتر از حد انتظار میکند، یا overflow که scrollbar افقی ایجاد میکند.
Outlineهای تودرتو ساختار parent-child از DOM را آشکار میکنند. ببینید عناصر تا چه عمقی تودرتو هستند، کدام container چه محتوایی را میپوشاند.
روی هر صفحه وب فعال کنید — پروژههای خودتان، سایتهای مشتری، صفحات رقیب یا مراجع طراحی. Outlineها از طریق تزریق CSS اعمال میشوند و ساختار DOM را تغییر نمیدهند.
Outlineها با CSS outline رسم میشوند (نه border)، به این معنی که به ابعاد box model عنصر اضافه نمیکنند. چیدمان صفحه دقیقاً همانطور باقی میماند.
حالت Outline covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsآن شکاف مرموز بین بخشها؟ Outlineها را روشن کنید و فوراً میبینید از margin عنصر پایین، padding container والد یا یک div خالی است.
با فعال بودن outlineها اندازه پنجره مرورگر را تغییر دهید تا ببینید چیدمان در breakpointها چگونه تغییر میکند.
خیلی div های تودرتو؟ حالت Outline تودرتویی بیش از حد را بهصورت بصری آشکار میکند — اگر 5+ outline متحدالمرکز دور محتوای ساده میبینید، markup نیاز به سادهسازی دارد.
Outlineها را در صفحه اصلی و سپس در صفحه فرعی فعال کنید. آیا ساختار چیدمان یکسانی دارند؟ آیا margin ها و عرض بخشها ثابت هستند؟
به دانشجویان نشان دهید عناصر HTML چگونه جعبه ایجاد میکنند، box model با padding و margin چگونه کار میکند و تودرتویی چگونه سلسلهمراتب صفحه را ایجاد میکند.
داک شناور DevSuite Pro را باز کنید و روی آیکون حالت Outline کلیک کنید. فوراً، هر عنصر HTML در صفحه یک حاشیه outline رنگی دریافت میکند.
هر نوع عنصر رنگ مشخصی دارد. آبی برای عناصر ساختاری، سبز برای مناطق محتوای اصلی، بنفش برای عناوین، صورتی برای پاراگرافها، فیروزهای برای دکمهها و ورودیها.
به دنبال شکافهای غیرمنتظره (از margin)، عناصر فراتر از container های خود (overflow)، فاصلهگذاری نامتقارن یا wrapper های عمیقاً تودرتو باشید.
از حالت Outline به عنوان نقطه شروع استفاده کنید، سپس به CSS Inspector بروید تا مقادیر خاص را بررسی کنید، یا از Measure Distance برای تأیید فاصلهگذاری دقیق استفاده کنید.
دوباره روی آیکون حالت Outline کلیک کنید تا همه outlineها حذف شوند. نیازی به پاکسازی نیست — یک toggle ساده است.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.