گوگل کروم و قابلیت پنهان CSS Overview

در بین ابزارهای توسعه وب یا همان Dev Tools که مستقیما در مرورگر گوگل کروم تعبیه شده، قابلیت کمترشناخته‌شده‌ای وجود دارد به اسم CSS Overview. خود این نام کم و بیش گویای کارکردش است که در ادامه به آن می‌رسیم.برای دسترسی به این قابلیت، ابتدا باید وارد Dev Tools شد (با کلیک راست و انتخاب گزینه Inspect و یا با انتخاب کلید‌ میان‌برِ F12 یا گرفتن همزمان کلیدهای CTRL + Shift + I ).حالا از سه نقطه عمودی در بالا سمت راستِ Dev Tools باید گزینه «ابزارهای بیشتر» (More Tools) و نهایتا CSS Overview را انتخاب کرد.الان فهرستی از کارکردهای CSS Overview نمایش داده می‌شود (مثل مروری بر استایل‌های مورداستفاده در صفحه وب، پیشنهادهایی برای بهبود CSS و نهایتا المان‌های متاثر) که برای نمایش آن‌ها باید دکمه Capture Overview را زد.با زدن دکمه بالا، یک منو در پنج بخش ظاهر می‌شود:مرور اجمالیرنگ‌هااطلاعات فونتدستورهای بلااستفادهمدیا کوئریمرور اجمالی برای استایل‌های صفحه ویرگولمرور اجمالی: استایل صفحات در یک نگاهدر بخش مرور اجمالیِ استایل صفحات وب (Overview Summary) در تصویر بالا، فهرستی از تمام المان‌های CSS به کاررفته در صفحه وب نمایش داده می‌شود، شامل: تعداد المان‌های مورد استفاده در هر صفحه انواع مختلف سلکتورهای استفاده شده تعداد استایل‌های خارجی و داخلی مورد استفاده در صفحهرنگ‌هابعد نوبت به پنل رنگ‌ها می‌رسد. در اینجا تمام رنگ‌های به کاررفته در ساخت صفحات وب (از پس‌زمینه گرفته تا متن و کادر و غیره) به همراه مشکلات کنتراست و ناخوایی متن به خاطر نوع رنگ انتخابی نمایش داده می‌شود.این بخش یک ویژگی خوب دیگر هم دارد و آن هم اینست که با کلیک روی هر رنگ معین، می‌توان به فهرستی از تمام المان‌هایی که از آن رنگ استفاده می‌کنند دسترسی پیدا کرد. برای مثال با کلیک بر روی رنگ #107ABE در تصویر بالا، فهرستی از تمام المان‌هایی که از این رنگ استفاده کرده‌اند نمایش داده شده. بعد از این اگر صرفا نشانگر ماوس را روی هر المان ببریم (مثلا متن، تصویر و غیره)، بدون اینکه نیاز به کلیک باشد المان مربوطه در صفحه وب هایلایت می‌شود. برای مثال وقتی نشانگر ماوس روی المانbutton#btnPublish در تصویر زیر می‌رود، این دکمه در صفحه هایلایت می‌شود.رنگ‌های به کاررفته در طراحی سایت ویرگولاطلاعات فونتدر این بخش ویژگی‌های فونت‌های به کاررفته در صفحه وب نشان داده می‌شود، مثل نام، اندازه، وزن و خانواده فونت و ارتفاع خطوط. ضمنا با کلیک بر عبارت occurrences فهرستی از المان‌های متاثر نمایش داده می‌شود.مشخصات فونت‌های مورد استفاده در صفحه ویرگولدستورهای بلااستفادهدر اینجا می‌توان دستورهایی در CSS را یافت که تاثیری روی صفحه نداشته‌اند و به عبارتی بلااستفاده هستند. مجددا مثل قبل با کلیک بر عبارت occurrences فهرستی از تمام المان‌های متاثر نمایش داده می‌شود.در اینجا دستور تراز عمودی برای المان‌هایی استفاده شده که inline یا table-cell نیستندمدیا کوئریمدیا کوئری، در واقع همان دستورات @media در CSS است که برای واکنشگرا کردن محتوا در دسکتاپ، موبایل و تبلت استفاده می‌شود. در اینجا تمام مدیا کوئری‌های به کاررفته در ساخت صفحه وب نمایش داده می‌شود و می‌توان عرض‌ها و ابعاد مختلف مورد استفاده در طراحی صفحه را بررسی کرد.مثلا همانطور که در تصویر زیر دیده می‌شود، ابعاد مختلف مورد استفاده در صفحه وب به ترتیب از بالاترین به کمترین مرتب شده که با کلیک بر occurrences می‌توان فهرستی از المان‌های متاثر از آن‌ها را یافت.بنابراین به طور خلاصه CSS Overview یکی از ابزارهای کاربردی مرورگر کروم محسوب می‌شود که به توسعه‌دهندگان فرانت‌اند و طراحان سایت کمک می‌کند تصویر جامعی از استایل‌ها و ویژگی‌های CSS یک صفحه داشته باشند.وندا نوژنمطالب مرتبط:فعال کردن ابزار Inspect Element در مرورگر موبایل!چگونه المان‌های دینامیک در صفحه وب را Inspect کنیم؟