Inspect Element و پنل Styles؛ اولین ابزاری که باید یاد بگیرید

تا اینجا تو این دوره، صرفاً درباره‌ی نوشتن CSS صحبت کردیم. اما یه بخش خیلی مهم از کار روزمره با CSS، دیباگ کردنشه: فهمیدن این‌که چرا یه استایل اعمال نمی‌شه، کدوم قانون داره رو یه المنت خاص برنده می‌شه، یا یه مقدار محاسبه‌شده دقیقاً چیه. این فصل به ابزارهای DevTools مرورگر اختصاص داره، و شروعش با پایه‌ای‌ترین و پرکاربردترین بخشش: Inspect Element و پنل Styles.

باز کردن DevTools و انتخاب یه المنت

تو اکثر مرورگرها (Chrome، Firefox، Edge، Safari با کمی تفاوت)، راست‌کلیک رو هر المنت و انتخاب «Inspect» یا «بازرسی»، مستقیم شما رو به همون المنت تو پنل Elements/Inspector می‌بره. یه راه سریع‌تر، فشردن F12 یا Ctrl+Shift+I (روی مک: Cmd+Option+I) برای باز کردن کل DevTools، و بعد استفاده از آیکون «انتخاب المنت» (یه فلش کوچیک، معمولاً بالا-چپ پنل) برای کلیک مستقیم رو هر بخشی از صفحه‌ست.

پنل Styles: قلب دیباگ کردن CSS

وقتی یه المنت رو تو HTML انتخاب می‌کنید، پنل Styles (تو Chrome معمولاً سمت راست) همه‌ی قوانین CSS ای که به این المنت اعمال می‌شن رو نشون می‌ده؛ نه فقط قانونی که مستقیم روش نوشته شده، بلکه هر چیزی که از parent ها هم به ارث رسیده.

/* این‌جوری تو پنل Styles نشون داده می‌شه: */
.card {
  padding: 16px;         /* از فایل card.css */
  border-radius: 8px;    /* از فایل card.css */
  color: inherit;        /* از body، به ارث رسیده */
}

هر قانون کنارش می‌گه دقیقاً از کدوم فایل و کدوم خط اومده؛ این خیلی کاربردیه وقتی یه پروژه چند فایل CSS داره و نمی‌دونید یه استایل خاص از کجا میاد.

خط خورده (strikethrough): یعنی این قانون شکست خورده

وقتی یه ویژگی تو پنل Styles با یه خط رو روش دیده می‌شه، یعنی این قانون تعریف شده ولی توسط یه قانون دیگه (با specificity بالاتر، یا با ترتیب بعدتر) override شده:

/* تو پنل این‌جوری دیده می‌شه: */
.btn {
  color: ~~blue~~;   /* خط‌خورده؛ چون یه‌جای دیگه override شده */
}
.btn.primary {
  color: white;      /* این یکی واقعاً اعمال شده */
}

این دقیقاً همون چیزیه که تو فصل‌های اول دوره درباره‌ی cascade و specificity یاد گرفتیم، ولی حالا به‌جای این‌که تو ذهنتون محاسبه‌ش کنید، مرورگر مستقیم بهتون نشون می‌ده کدوم قانون برنده شده.

تیک زدن و خاموش کردن ویژگی‌ها به‌صورت زنده

کنار هر ویژگی تو پنل Styles، یه چک‌باکس کوچیک هست که می‌تونید باهاش اون خط رو موقتاً غیرفعال کنید، بدون این‌که واقعاً از فایل CSS حذفش کنید. این برای تست سریع («اگه این padding رو بردارم چی می‌شه؟») خیلی سریع‌تر از رفتن سراغ خود فایل و ویرایش دستیه.

ویرایش مستقیم مقادیر تو DevTools

می‌تونید رو هر مقدار (مثل 16px) دوبار کلیک کنید و مستقیم عوضش کنید؛ تغییر بلافاصله رو صفحه اعمال می‌شه. یه ترفند مفید: وقتی رو یه مقدار عددی کلیک کردید، می‌تونید با کلیدهای بالا/پایین کیبورد (Up/Down arrow) مقدار رو یکی‌یکی زیاد یا کم کنید، و با نگه داشتن Shift، جهش‌های بزرگ‌تر (معمولاً ۱۰ واحدی) داشته باشید. این خیلی سریع‌تر از تایپ دستی هر بار برای پیدا کردن مقدار درسته.

نکته مهم: هر تغییری که تو DevTools انجام بدید، موقتیه و با رفرش کردن صفحه از بین می‌ره. DevTools یه محیط آزمایشیه، نه یه ابزار ویرایش فایل واقعی؛ بعد از پیدا کردن مقدار درست، باید دستی برید تو فایل CSS اصلی و همون تغییر رو اونجا هم اعمال کنید.

پنل Computed: مقدار نهایی، بعد از همه‌ی محاسبات

پنل Styles نشون می‌ده «چه قوانینی نوشته شدن»، ولی پنل Computed (که معمولاً کنار یا زیر Styles قرار داره) نشون می‌ده «مقدار نهایی، بعد از اعمال cascade، inheritance و مقادیر پیش‌فرض مرورگر چیه». این خصوصاً برای ویژگی‌هایی که هیچ‌جا صریح تعریف نکردید (و مرورگر خودش مقدار پیش‌فرض گذاشته) یا واحدهای نسبی (مثل em یا %) که تبدیل به پیکسل واقعی می‌شن، مفیده:

/* شما نوشتید: */
.box { font-size: 1.5em; }

/* پنل Computed نشون می‌ده: */
/* font-size: 24px (بعد از محاسبه نسبت به فونت والد) */

Box Model Diagram: دیدن دقیق margin، border، padding و content

معمولاً پایین پنل Styles یا Computed، یه نمودار جعبه‌ای رنگی می‌بینید که دقیقاً اندازه‌ی content، padding، border و margin المنت انتخاب‌شده رو با عدد نشون می‌ده. این ابزار مستقیم به بحث Box Model که تو فصل ۴ دیدیم مربوطه، و خیلی سریع‌تر از حدس زدن یا محاسبه‌ی دستیه، خصوصاً وقتی margin collapse یا box-sizing باعث سردرگمی شده.

حالت‌های :hover، :focus و :active رو شبیه‌سازی کنید

یه مشکل رایج اینه که می‌خواید استایل :hover یه دکمه رو دیباگ کنید، ولی به‌محض این‌که ماوس رو از المنت جدا می‌کنید تا برید تو DevTools، حالت hover هم از بین می‌ره. راه‌حلش، دکمه‌ای معمولاً به اسم «:hov» یا مشابهش تو پنل Styles هست که اجازه می‌ده pseudo-class هایی مثل :hover، :focus، :active و :visited رو به‌صورت دستی «قفل» کنید تا حتی وقتی ماوس جای دیگه‌ست، استایلشون رو ببینید و ویرایش کنید.

اشتباه رایج: فراموش کردن این‌که DevTools همیشه واقعیت نهایی نیست

گاهی یه تغییر تو DevTools جواب می‌ده، ولی وقتی همون تغییر رو تو فایل واقعی می‌برید، کار نمی‌کنه. دلیلش معمولاً اینه که DevTools قانون شما رو تو یه context خاص (مثل یه <style> تزریق‌شده با اولویت بالا) اضافه می‌کنه که ممکنه دقیقاً همون specificity یا موقعیتی که فایل اصلی داره رو نداشته باشه. همیشه بعد از پیدا کردن راه‌حل تو DevTools، مطمئن بشید که تو فایل واقعی هم، تو context درست (همون فایل و همون selector منطقی) اعمالش می‌کنید.

جمع‌بندی

پنل Styles تو DevTools نشون می‌ده چه قوانینی به یه المنت اعمال می‌شن و کدوم‌ها override شدن (با خط‌خوردگی)، در حالی که پنل Computed مقدار نهایی بعد از همه‌ی محاسبات رو نشون می‌ده. می‌تونید ویژگی‌ها رو موقتاً خاموش/روشن کنید، مقادیر رو با کلیک و کلیدهای جهت‌دار سریع تغییر بدید، و حالت‌های pseudo-class مثل hover رو قفل کنید تا راحت‌تر دیباگ کنید. فقط یادتون باشه این تغییرات موقتی‌ان و باید دستی به فایل اصلی منتقل بشن.