فرادرسدیباگ کردن CSS — آموزش CSS (بخش نوزدهم)
برخی اوقات در زمان نوشتن CSS با این مشکل مواجه می‌شویم که گویا CSS کاری که می‌خواهیم را انجام نمی‌دهد. ممکن است تصور کنید یک سلکتور با یک عنصر مطابقت پیدا می‌کند، اما چنین اتفاقی رخ نمی‌دهد، یا یک باکس اندازه‌ای که شما می‌خواهید را نمی‌گیرد. در این مقاله به بررسی چگونگی دیباگ کردن این گونه مشکلات CSS می‌پردازیم. بدین ترتیب با طرز کار DevTools که در همه مرورگرهای مدرن ارائه شده آشنا می‌شویم و روش یافتن وقایعی که اتفاق می‌افتند را بررسی می‌کنیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:
دسترسی به DevTools مرورگر
گرچه ممکن است شما عادت به کار با یک مرورگر خاص داشته باشید و از این رو با شیوه دسترسی به ابزارهای آن مرورگر راحت‌تر باشید، اما آشنایی با روش دسترسی به ابزارهای توسعه در مرورگرهای دیگر نیز حائز اهمیت است. بدین ترتیب تفاوت‌های رندرینگ بین مرورگرها را مشاهده می‌کنید.
با مقایسه مرورگرهای مختلف متوجه می‌شویم که این مرورگرها در زمان ساخت ابزارهای DevTools روی موضوعات مختلفی متمرکز شده‌اند. برای نمونه در فایرفاکس ابزارهایی عالی برای کار کردن به صورت بصری با لی‌آوت CSS عرضه شده است و به این ترتیب می‌توان لی‌آوت‌های شبکه‌ای، Flexbox و شکل‌ها را بررسی و ویرایش کرد. با این حال همه مرورگرهای مختلف ابزارهای بنیادی مشابهی دارند که برای نمونه برای بررسی مشخصه‌ها و مقادیر اعمال شده روی عناصر صفحه و ایجاد تغییراتی روی آن‌ها استفاده می‌شوند.
در این بخش از سری مقالات آموزش CSS به بررسی برخی از قابلیت‌های مفید ابزارهای DevTools فایرفاکس برای کار با CSS می‌پردازیم. به این منظور از فایل نمونه زیر استفاده می‌کنیم. این فایل را روی سیستم خود ذخیره کرده و در یک زبانه جدید مرورگر باز کنید:
1<!doctype html>
2
3<html lang="en">
4
5<head>
6 <meta charset="utf-8">
7 <title>Inspecting CSS</title>
8
9 <style>
10 body {
11 background-color: #fff;
12 color: #333;
13 font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
14 padding: 0;
15 margin: 0;
16 }
17
18 .container {
19 padding: 20px 10px;
20 max-width: 900px;
21 margin: 40px auto;
22 }
23
24 .box1 {
25 width: 400px;
26 margin: 0 0 40px 0;
27 padding: 20px;
28 border: 5px solid rgb(75, 70, 74);
29 border-radius: .5em;
30 }
31
32 .box2 {
33 box-sizing: border-box;
34 width: 400px;
35 margin: 0 0 40px 0;
36 padding: 20px;
37 border: 5px solid rgb(78, 17, 66);
38 border-radius: .5em;
39 }
40
41 .special {
42 color: orange;
43 }
44
45 em {
46 color: hotpink;
47 font-weight: bold;
48 }
49
50 </style>
51
52</head>
53
54<body>
55 <div class="container">
56 <div class="box1">
57 <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
58 tomatillo
59 melon azuki bean garlic.</p>
60 </div>
61
62 <div class="box2">
63 <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
64 collard
65 greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
66 </div>
67
68 <p>Turnip <em class="special">greens</em> yarrow ricebean rutabaga endive cauliflower <em>sea lettuce</em> kohlrabi amaranth water spinach
69 avocado
70 daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish
71 spinach
72 carrot soko.
73 </p>
74
75 </div>
76</body>
77</html>DOM یا مشاهده سورس
یکی از مواردی که افراد مبتدی را در زمان کار با ابزارهای DevTools دچار سردرگمی می‌کند، تفاوت بین چیزی که در بخش سورس یک صفحه یا در زمان نگاه کردن به فایل HTML قرار گرفته روی سرور دیده می‌شود و آن چیزی است که در بخش HTML ابزارهای DevTools دیده می‌شود. با این که این دو تا حدودی شبیه هم به نظر می‌رسند، اما تفاوت‌هایی نیز دارند.
مرورگر در DOM رندر شده ممکن است برخی کدهای HTML که بد نوشته شده‌اند را از طرف شما اصلاح کند. اگر یک عنصر را به طرز نادرستی بسته باشید، برای نمونه اگر یک <h2> باز کرده باشید، اما با یک <h3/> بسته باشید، مرورگر تلاش می‌کند منظور شما را بفهمد و HTML در DOM به درستی <h2> را با <h2/> می‌بندد. مرورگر همه HTML را نرمالایز می‌کند و DOM نیز هر تغییری را که از سوی جاوا اسکریپت اجرا شده باشد نمایش می‌دهد.
در مقایسه با آن گزینه View Source صرفاً کد سورس HTML را که روی سرور ذخیره شده است، نمایش می‌دهد. درخت HTML در بخش DevTools دقیقاً آنچه را که مرورگر در هر لحظه رندر می‌کند، نمایش می‌دهد، از این رو متوجه می‌شویم چه اتفاقی در حال رخ دادن است.
بررسی CSS اعمال شده
یک عنصر را در صفحه انتخاب کنید. این کار از طریق راست-کلیک (یا Ctrl-کلیک) و انتخاب گزینه Inspect و همچنین انتخاب آن عنصر از درخت HTML در سمت چپ DevTools میسر است. تلاش کنید عنصر دارای کلاس box1 انتخاب کنید. این نخستین عنصری روی صفحه است که باکس لبه‌دار پیرامون خود دارد.
اگر به نمای Rules در سمت راست HTML نگاه کنید، باید مشخصه‌ها و مقادیر اعمال شده روی آن عنصر را ببینید. بدین ترتیب می‌بینید که قواعد مستقیماً روی کلاس box1 اعمال شده‌اند و ضمناً CSS از سوی box از اجدادش به ارث رسیده است که در این مورد <body> است. این گزینه در مواردی مفید است که متوجه شویم برخی CSS-ها مطابق انتظار اعمال نشده‌اند. ممکن است قواعد از یک عنصر والد به ارث رسیده باشند و لازم باشد یک قاعده اضافه کنید که آن را در چارچوب این عنصر بازنویسی کنید.
همچنین امکان گسترش مشخصه‌های اختصاری وجود دارد که امکان مفیدی است. در این مثال، از میانبر margin استفاده کرده‌ایم. روی فلش کوچک کنار آن کلیک کنید تا نما باز شود و مشخصه‌های بلند متفاوت و مقادیرشان را نشان دهد.
می‌توانید مقادیر مختلف را در زمان فعال بودن نمای Rules روشن یا خاموش کنید. اگر کرسر ماوس را روی آن نگه دارید، کادرهای تیک ظاهر خواهند شد. برای نمونه می‌توانید تیک قاعده‌ای مانند border-radius را بردارید تا این CSS دیگر اعمال نشود.
از این مقایسه A/B می‌توانید استفاده کنید و تصمیم بگیرید که آیا اعمال یک قاعده کار مناسبی است یا نه. همچنین به دیباگ کردن کمک می‌کند. برای نمونه اگر یک لی‌آوت اشتباه به نظر می‌رسد و شما تلاش می‌کنید مشخص سازید کدام مشخصه موجب بروز مشکل شده است، این گزینه به کمک شما خواهد آمد.
ویرایش کردن مقادیر
علاوه بر فعال یا غیرفعال کردن مشخصه‌ها، امکان ویرایش مقادیر مشخصه‌ها نیز در بخش DevTools فراهم آمده است. شاید بخواهید ببینید آیا رنگ دیگری مناسب‌تر است یا بخواهید اندازه چیزی را تغییر دهید. DevTools به شما کمک می‌کند که در زمان ویرایش استایل‌شیت و بارگذاری مجدد صفحه مقدار زیادی صرفه‌جویی کنید.
Box1 را انتخاب کنید و روی دایره کوچک رنگی که رنگ اعمال شده روی لبه باکس را نمایش می‌دهد، کلیک کنید. یک انتخابگر رنگ باز می‌شود و می‌توانید رنگ‌های متفاوتی را امتحان کنید. این رنگ به صورت زنده روی صفحه به‌روز می‌شود. به ترتیب مشابه می‌توانید عرض یا استایل لبه را نیز تغییر دهید.
افزودن مشخصه جدید
با استفاده از DevTools امکان افزودن مشخصه‌ها نیز وجود دارد. شاید نخواهید اندازه فونت عنصر باکس را از <body> به ارث ببرید و می‌خواهید اندازه خاص مورد نظر خود را اعمال کنید. امکان دیدن پیش‌نمایش این کار پیش از ویرایش فایل CSS وجود دارد.
به این منظور روی آکولاد پایانی قاعده کلیک کنید تا یک اعلان جدید اضافه شود و شروع به وارد کردن مشخصه جدید بکنید تا DevTools یک لیست تکمیل خودکار که با مشخصه وارد شده مطابقت دارند نمایش دهد. پس از انتخاب گزینه font-size مقداری که می‌خواهید امتحان کنید را وارد کنید. همچنین می‌توانید روی دکمه + کلیک کنید تا قاعده دیگری با همان سلکتور اضافه کنید و قواعد جدیدتان را در اینجا وارد نمایید.
نکته: نمای Rules امکانات مفید دیگری نیز دارد. برای نمونه اعلان‌های با مقادیر غیرمجاز ضربدر می‌خورند.
درک مدل جعبه‌ای
در یکی از مقالات پیشین این سری آموزشی به بررسی مدل جعبه‌ای (box model) پرداختیم و اشاره کردیم که یک مدل جایگزین نیز وجود دارد که اندازه عناصر را بر اساس اندازه‌ای که به آن داده می‌شود به علاوه «فاصله‌بندی» (padding) و «لبه‌ها» (border) تعیین می‌کند. DevTools می‌تواند کمک زیادی به درک شیوه محاسبه اندازه یک عنصر بکند. نمای لی‌آوت نمودار مدل جعبه‌ای عنصر انتخابی را همراه با توضیحی از مشخصه‌ها و مقادیر نمایش می‌دهد که شیوه طرح‌بندی عنصر را تغییر می‌دهند. این موارد شامل مشخصه‌هایی هستند که ممکن است به صراحت روی عنصر استفاده نشده باشند، اما مقادیر اولیه روی آن‌ها تنظیم شده است.
در این پنل یکی از مشخصه‌های تفصیلی مشخصه box-sizing است که مدل جعبه‌ای مورد استفاده از عنصر را کنترل می‌کند. در مثال معرفی شده در ابتدای این مقاله دو عنصر box1 و box2 را مقایسه کنید. هر دوی آن‌ها دارای عرض یکسانی برابر با 400px هستند، اما box1 از نظر بصری عریض‌تر است. در پنل لی‌آوت می‌توان دید که این عنصر از content-box استفاده می‌کند. این مقداری است که اندازه را می‌گیرد و به عنصر می‌دهد و سپس فاصله‌بندی و عرض لبه را نیز به آن اضافه می‌کند.
عنصر دارای کلاس box2 از border-box استفاده می‌کند، از این رو در اینجا فاصله‌بندی از اندازه‌ای که به عنصر داده شده است کسر می‌شود. این بدان معنی است که فضای اشغال‌شده روی صفحه از سوی باکس دقیقاً برابر با اندازه‌ای است که در مشخصه width:400px قید شده است.
حل مشکلات سطح خصوصیت
برخی اوقات در زمان کدنویسی و در موارد خاصی در زمان ویرایش CSS روی سایت موجود، متوجه می‌شویم که در اعمال برخی CSS-ها با مشکل مواجه هستیم. در این حالت هر کاری که می‌کنیم، عنصر ما CSS مورد نظر را نمی‌گیرد. اتفاقی که در این حالت رخ می‌دهد این است که سلکتور خاص تغییرات را override می‌کند. در این حالت DevTools کمک زیادی می‌تواند بکند.
در فایل مثال ابتدای این راهنما دو کلمه هستند که درون عنصر <em> قرار گرفته‌اند. یکی از آن‌ها به رنگ نارنجی و دیگری به رنگ صورتی روشن دیده می‌شوند. در CSS به صورت زیر عمل کرده‌ایم:
1em {
2 color: hotpink;
3 font-weight: bold;
4}در استایل‌شیت، بالاتر از کد فوق یک قاعده با سلکتور .special وجود دارد:
1.special {
2 color: orange;
3}همچنان که در مقاله «مفاهیم آبشار و وراثت» و در بخش «سطح خصوصیت» توضیح دادیم، سلکتورهای کلاس، خاص‌تر از سلکتورهای عنصر هستند و از این رو مقدار آن‌ها اعمال می‌شود. DevTools می‌تواند به یافتن چنین مشکلاتی کمک کند. این ابزار به خصوص اگر اطلاعات جایی در یک استایل‌شیتی بسیار بزرگ مدفون شده باشند، بسیار مفید واقع خواهد شد.
در مثال فوق <em> دارای کلاس .special را بازرسی (inspect) کنید تا DevTools نشان دهد که رنگ نارنجی اعمال شده است و همچنین نشان دهد که مشخصه color اعمال شده روی عنصر em باطل شده است. اینک می‌توانید ببینید که کلاس اقدام به override کردن سلکتور عنصر می‌کند.
دیباگ کردن مشکلات در CSS
DevTools کمک زیادی به حل مشکلات CSS می‌کند و از این رو در مواردی که متوجه می‌شوید CSS مطابق انتظار رفتار نمی‌کند، می‌توانید با کمک گرفتن از این ابزار مهم، مشکل را حل کنید. در بخش بعدی به توضیح روش انجام این کار می‌پردازیم.
یک گام از مشکل به عقب بردارید
هر مشکل کدنویسی می‌تواند ترسناک باشد، به طور خاص مشکلات CSS چنین هستند، زیرا در اغلب موارد پیام خطایی دریافت نمی‌کنید که اقدام به جستجوی آنلاین در مورد آن بکنید و راه‌حلی بیابید. اگر در چنین موقعیتی گیر کرده‌اید، یک گام به عقب بردارید. برای مدتی مشکل را رها کنید و قدمی بزنید، یک نوشیدنی بخورید، با همکارتان صحبت کنید یا برای مدتی روی موضوع دیگری کار کنید. برخی اوقات راه‌حل یک مشکل به طرز معجزه‌آسایی وقتی تفکر در مورد آن را برای مدتی رها می‌کنید، نمایان می‌شود. حتی اگر چنین نشد نیز، کار کردن روی یک مشکل در زمانی که از نظر ذهنی رفرش شده‌اید، آسان‌تر خواهد بود.
آیا HTML و CSS معتبر هستند؟
مرورگرها انتظار دارند HTML و CSS به درستی نوشته شده باشند، اما از سوی دیگر مرورگرها بسیار بخشنده هستند و بیشترین تلاش خود را می‌کنند تا صفحه وب را حتی در صورت وجود خطا در markup یا stylesheet نمایش دهند. اگر در کد خود مشکلی داشته باشید، مرورگر باید حدس بزند که منظور شما چه بوده است و ممکن است تصمیم متفاوتی نسبت به آنچه در ذهن شما بوده بگیرد. به علاوه دو مرورگر مختلف ممکن است یک مشکل واحد را به روش‌های متفاوتی رفع کنند. از این رو گام نخست مناسب این است که کدهای HTML و CSS را در اختیار یک validator قرار دهیم تا خطاها را کشف و رفع کند. به این منظور می‌توانید از ابزارهای زیر بهره بگیرید:
آیا مشخصه و مقدار مورد استفاده از سوی مرورگر پشتیبانی می‌شوند؟
مرورگرها آن CSS را که درک نکنند، نادیده می‌گیرند. اگر مشخصه یا مقداری که استفاده می‌کنید از سوی مرورگر تست پشتیبانی نشود، هیچ چیز از کار نمی‌افتد، اما آن CSS اعمال نخواهد شد. DevTools به طور کلی مشخصه‌ها و مقادیر پشتیبانی نشده را به نوعی هایلایت می‌کند. در تصویر زیر مرورگر از مقدار subgrid در مشخصه grid-template-columns پشتیبانی نمی‌کند.
می‌توانید به جداول تطبیق‌پذیری مرورگرها نیز نگاه کنید که در انتهای تمام صفحه‌های مربوط به مشخصه‌ها CSS در وب‌سایت MDN ارائه شده است. این جداول نشان می‌دهند که آیا مرورگر مورد نظر از مشخصه موصوف پشتیبانی می‌کند یا نه و در صورتی که یکی از مرورگرها پشتیبانی کند و دیگری پشتیبانی نکند، هر یک توضیح داده شده است.
آیا چیز دیگری موجب override شدن CSS شده است؟
این همان جایی است که اطلاعات ما در مورد سطح خصوصیت بسیار مفید واقع خواهد شد. اگر چیز دیگری باشد که سطح خصوصیتی بالاتر از آن چه می‌خواهید انجام دهید داشته باشد، مسیر دشواری برای یافتن آن خواهید داشت. با آن حال چنان که پیشتر اشاره کردیم، DevTools نشان می‌دهد که کدام CSS اعمال شده است و می‌توانید بفهمید که چگونه سطح خصوصیت سلکتور جدید را بالاتر ببرید تا آن را override کنید.
ساخت حالت تست کاهش‌یافته از مسئله
اگر مشکل با راه‌حل‌های قبلی حل نشد، در این صورت باید کاری اساسی‌تر انجام دهید. بهترین کاری که در این حالت می‌توانید انجام دهید، این است که چیزی به نام «حالت تست کاهش‌یافته» (reduced test case) بسازید.
حالت تست کاهش‌یافته نمونه کدی است که مشکل را در ساده‌ترین روش آن نشان می‌دهد. توانایی کاهش یک مشکل مهارتی واقعاً مفید محسوب می‌شود. این مهارت کمک می‌کند که مشکلات را در کد خود و همکارانتان بیابید و همچنین شما را قادر می‌سازد تا باگ‌ها را گزارش کنید و کمک را به روش مؤثرتری طلب کنید.
حالت تست کاهش‌یافته یک نمونه کد است که مشکل را در ساده‌ترین حالت آن نشان می‌دهد و محتوای پیرامونی نامرتبط و استایل‌بندی غیر مرتبط حذف می‌شود. این وضعیت در اغلب موارد موجب می‌شود که کد مشکل‌دار از لی‌آوت خارج شود تا مثال کوچکی ایجاد شود که تنها کد یا قابلیت را نشان می‌دهد.
برای ایجاد حالت تست کاهش‌یافته باید مراحل زیر را طی کنید:
- اگر markup به صورت دینامیک، برای نمونه به وسیله یک CMS ساخته شده است، یک نسخه استاتیک از خروجی که مشکل را نمایش می‌دهد بسازید. یک سایت اشتراک کد مانند CodePen برای میزبانی از حالت‌های تست کاهش‌یافته مفید است، چون به صورت آنلاین در دسترس است و می‌توانید به سهولت آن را با همکاران به اشتراک بگذارید. این کار را می‌توانید با کلیک روی View Source و کپی کردن HTML در CodePen آغاز کنید. سپس CSS و جاوا اسکریپت مرتبط را به دست آورید و آن را نیز در کنار کد قرار دهید. سپس می‌توانید بررسی کنید که آیا مشکل همچنان حضور دارد یا نه.
- اگر حذف کد جاوا اسکریپت موجب حذف مشکل نشد، کد جاوا اسکریپت را قرار ندهید. اگر حذف کد جاوا اسکریپت موجب رفع مشکل شد، در این صورت تا آنجا که می‌توانید جاوا اسکریپت را حذف کنید تا آن چیزی که موجب بروز مشکل شده است را پیدا کنید.
- هر بخش از HTML که ربطی به مشکل ندارید را حذف کنید. کامپوننت‌ها یا حتی عناصر اصلی لی‌آوت را حذف کنید. بار دیگر تلاش کنید کمترین مقدار کد که همچنان مشکل را نمایش می‌دهد حفظ کنید.
- هر CSS که تأثیری روی مشکل ندارد را حذف کنید.
در فرایند انجام کارهای فوق، ممکن است متوجه شوید که چه چیزی موجب بروز مشکل شده است، یا دست کم بتوانید با جذب بخش خاصی آن را فعال یا غیرفعال کنید. در زمانی که برخی موارد را کشف می‌کنید، بهتر است کامنت‌هایی به کد خود اضافه کنید. در این صورت اگر می‌خواهید از کس دیگری کمک بگیرید، به این ترتیب آن فرد متوجه می‌شود که تا به اینجا چه چیزهایی بررسی و کشف شده‌اند. همچنین اطلاعات کافی در مورد مشکلات احتمالی و راه خل‌های آن به دست می‌دهد.
اگر همچنان در تقلا برای یافتن مشکل باشید، حالت تست کاهش‌یافته به شما کمک می‌کند تا بتوانید از کمک افراد دیگر استفاده کنید، چون می‌توانید آن را در یک فوروم پست کنید یا به یک همکار نشان دهید. در صورتی که نشان دهید کار کاهش مسئله و شناسایی محل بروز خطا را انجام داده‌اید، طلب کمک بسیار آسان‌تر خواهد شد. به این ترتیب یک توسعه‌دهنده باتجربه‌تر به احتمال بالا می‌تواند مشکل را شناسایی کرده یا دست کم شما را به مسیر صحیح هدایت کند و اگر چنین هم نباشد، حالت تست کاهش‌یافته آن‌ها را قادر خواهد ساخت تا با یک نگاه سریع بتوانند یک کمک و راهنمایی ارائه کنند.
در حالتی که مشکل عملاً یک باگ در مرورگر باشد، در این صورت حالت تست کاهش‌یافته می‌تواند برای گزارش کردن باگ به ارائه‌دهنده مرورگر مربوطه استفاده شود.
در طی زمان با افزایش تجربه شما در زمینه CSS متوجه خواهید شد که در تشخیص سریع‌تر مشکلات تبحر بیشتری می‌یابید. با این حال حتی باتجربه‌ترین افراد نیز گاهی اوقات در تشخیص این که چه چیزی موجب بروز مشکل شده است، با دشواری مواجه می‌شوند. استفاده از یک رویکرد روش‌شناختی و ایجاد حالت تست کاهش‌یافته و توضیح مشکل به فرد دیگر می‌تواند موجب شود که در نهایت آن مشکل حل شود. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- مجموعه آموزش‌های برنامهنویسی
- آموزش طراحی وب با CSS
- ایجاد شکل‌های زیبا با CSS — از صفر تا صد
- سلکتورهای خصوصیت در CSS — آموزش CSS (بخش هشتم)
==
