آموزش CSS مبتدی : اشکال‌زدایی CSS

گاهی اوقات هنگام نوشتن CSS با مشکلی مواجه می‌شوید که به نظر می‌رسد CSS شما آنطور که انتظار دارید عمل نمی‌کند. شاید فکر می‌کنید که یک انتخابگر خاص باید با یک عنصر مطابقت داشته باشد، اما هیچ اتفاقی نمی‌افتد، یا اندازه یک کادر با آنچه انتظار داشتید متفاوت است. این مقاله به شما راهنمایی‌هایی در مورد نحوه اشکال‌زدایی یک مشکل CSS ارائه می‌دهد و به شما نشان می‌دهد که چگونه DevTools موجود در همه مرورگرهای مدرن می‌تواند به شما در یافتن مشکل کمک کند.

نحوه دسترسی به DevTools مرورگر

در این درس به برخی از ویژگی‌های مفید ابزارهای توسعه فایرفاکس برای کار با CSS خواهیم پرداخت.

DOM در مقابل منبع نمایش

چیزی که می‌تواند تازه‌کاران DevTools را به اشتباه بیندازد، تفاوت بین چیزی است که هنگام مشاهده منبع یک صفحه وب یا نگاه کردن به فایل HTML که روی سرور قرار داده‌اید، می‌بینید و چیزی که می‌توانید در پنل HTML DevTools ببینید. اگرچه تقریباً شبیه به چیزی است که می‌توانید از طریق View Source ببینید، اما تفاوت‌هایی وجود دارد. در DOM رندر شده، مرورگر ممکن است HTML را عادی‌سازی کرده باشد، به عنوان مثال با اصلاح برخی HTMLهای بد نوشته شده برای شما. اگر شما یک عنصر را به اشتباه بسته باشید، به عنوان مثال با باز کردن اما بستن آن با ، مرورگر متوجه می‌شود که منظور شما چه بوده است و HTML موجود در DOM به درستی باز شده را با می‌بندد. DOM همچنین هرگونه تغییری را که توسط جاوا اسکریپت ایجاد شده است نشان می‌دهد. در مقایسه، View Source کد منبع HTML ذخیره شده در سرور است. درخت HTML در DevTools شما دقیقاً نشان می‌دهد که مرورگر در هر زمان معین چه چیزی را رندر می‌کند، بنابراین به شما بینشی از آنچه واقعاً در حال رخ دادن است، می‌دهد.

بررسی CSS اعمال شده

یک عنصر را در صفحه خود انتخاب کنید، یا با کلیک راست/کنترل روی آن و انتخاب Inspect، یا انتخاب آن از درخت HTML در سمت چپ صفحه DevTools. سعی کنید عنصری را با کلاس box1 انتخاب کنید؛ این اولین عنصر در صفحه است که یک کادر حاشیه‌دار دور آن کشیده شده است.

اگر به نمای قوانین (Rules view) در سمت راست HTML خود نگاه کنید، باید بتوانید ویژگی‌ها و مقادیر CSS اعمال شده بر آن عنصر را ببینید. قوانینی را که مستقیماً بر کلاس box1 اعمال می‌شوند و همچنین CSS ای را که توسط جعبه از اجدادش، در این مورد از ، به ارث می‌رسد، خواهید دید. این مفید است اگر شاهد اعمال CSS ای باشید که انتظارش را نداشتید. شاید از یک عنصر والد به ارث رسیده باشد و شما نیاز به اضافه کردن یک قانون برای بازنویسی آن در متن این عنصر داشته باشید. همچنین قابلیت گسترش ویژگی‌های خلاصه نویسی مفید است. در مثال ما از خلاصه نویسی حاشیه استفاده شده است. برای گسترش نما، روی فلش کوچک کلیک کنید و ویژگی‌های مختلف خلاصه نویسی و مقادیر آنها را نشان دهید. می‌توانید مقادیر را در نمای قوانین (Rules view) هنگامی که آن پنل فعال است، روشن یا خاموش کنید - اگر ماوس خود را روی آن نگه دارید، کادرهای انتخاب ظاهر می‌شوند. کادر انتخاب یک قانون، مثلاً ، را بردارید و CSS دیگر اعمال نمی‌شود. شما می‌توانید از این برای انجام مقایسه A/B استفاده کنید، تصمیم بگیرید که آیا چیزی با اعمال یک قانون بهتر به نظر می‌رسد یا خیر، و همچنین برای کمک به اشکال‌زدایی آن - برای مثال، اگر یک طرح‌بندی اشتباه پیش می‌رود و شما سعی می‌کنید بفهمید کدام ویژگی باعث ایجاد مشکل می‌شود.

ویرایش مقادیر

علاوه بر روشن و خاموش کردن ویژگی‌ها، می‌توانید مقادیر آنها را ویرایش کنید. شاید بخواهید ببینید آیا رنگ دیگری بهتر به نظر می‌رسد یا خیر، یا بخواهید اندازه چیزی را تغییر دهید؟ DevTools می‌تواند در ویرایش یک stylesheet و بارگذاری مجدد صفحه، زمان زیادی را برای شما صرفه‌جویی کند. با انتخاب box1، روی swatch (دایره رنگی کوچک) که رنگ اعمال شده روی حاشیه را نشان می‌دهد، کلیک کنید. یک انتخابگر رنگ باز می‌شود و می‌توانید رنگ‌های مختلفی را امتحان کنید. این رنگ‌ها به صورت آنی در صفحه به‌روزرسانی می‌شوند. به همین ترتیب، می‌توانید عرض یا سبک حاشیه را تغییر دهید.

افزودن یک ویژگی جدید

می‌توانید با استفاده از DevTools ویژگی‌ها را اضافه کنید. شاید متوجه شده باشید که نمی‌خواهید کادر شما اندازه فونت عنصر را به ارث ببرد و می‌خواهید اندازه خاص خود را تنظیم کند؟ می‌توانید قبل از اضافه کردن آن به فایل CSS خود، این کار را در DevTools امتحان کنید. می‌توانید روی آکولاد بسته در قانون کلیک کنید تا شروع به وارد کردن یک تعریف جدید در آن کنید، در این مرحله می‌توانید شروع به تایپ ویژگی جدید کنید و DevTools لیستی از ویژگی‌های منطبق را به صورت خودکار به شما نشان می‌دهد. پس از انتخاب اندازه فونت، مقداری را که می‌خواهید امتحان کنید وارد کنید. همچنین می‌توانید روی دکمه + کلیک کنید تا یک قانون دیگر با همان انتخابگر اضافه کنید و قوانین جدید خود را در آنجا اضافه کنید.

ویژگی‌های مفید دیگری نیز در نمای قوانین وجود دارد، برای مثال اعلان‌هایی که مقادیر نامعتبر دارند، خط می‌خورند. می‌توانید اطلاعات بیشتر را در بخش بررسی و ویرایش CSS بیابید.

درک مدل جعبه‌ای

در درس‌های قبلی، در مورد مدل جعبه‌ای و این واقعیت که یک مدل جعبه‌ای جایگزین داریم که نحوه محاسبه اندازه عناصر را بر اساس اندازه‌ای که به آنها می‌دهید، به علاوه فاصله‌گذاری و حاشیه‌ها، تغییر می‌دهد، بحث کردیم. ابزارهای توسعه (DevTools) واقعاً می‌توانند به شما در درک نحوه محاسبه اندازه یک عنصر کمک کنند. نمای طرح‌بندی (Layout view) نموداری از مدل جعبه‌ای روی عنصر انتخاب شده را به همراه توضیحی از ویژگی‌ها و مقادیری که نحوه چیدمان عنصر را تغییر می‌دهند، به شما نشان می‌دهد. این شامل توضیحی از ویژگی‌هایی است که ممکن است به صراحت روی عنصر استفاده نکرده باشید، اما مقادیر اولیه‌ای برای آنها تعیین شده است. در این پنل، یکی از ویژگی‌های دقیق، ویژگی box-sizing است که کنترل می‌کند عنصر از چه مدل جعبه‌ای استفاده کند. دو جعبه با کلاس‌های box1 و box2 را مقایسه کنید. هر دو دارای عرض یکسانی (400 پیکسل) هستند، اما box1 از نظر بصری پهن‌تر است. می‌توانید در پنل طرح‌بندی ببینید که از content-box استفاده می‌کند. این مقداری است که اندازه‌ای را که به عنصر می‌دهید می‌گیرد و سپس فاصله‌گذاری و عرض حاشیه را به آن اضافه می‌کند. عنصری که کلاس box2 دارد از border-box استفاده می‌کند، بنابراین در اینجا padding و border از اندازه‌ای که شما به عنصر داده‌اید کم می‌شوند. این بدان معناست که فضای اشغال شده در صفحه توسط box دقیقاً همان اندازه‌ای است که شما مشخص کرده‌اید - در مورد ما .

حل مسائل مربوط به مشخصه‌ها

گاهی اوقات در طول توسعه، اما به ویژه هنگامی که نیاز به ویرایش CSS در یک سایت موجود دارید، متوجه می‌شوید که برای اعمال CSS با مشکل مواجه می‌شوید. مهم نیست چه کاری انجام می‌دهید، به نظر نمی‌رسد که عنصر CSS را بپذیرد. آنچه که معمولاً در اینجا اتفاق می‌افتد این است که یک انتخابگر خاص‌تر تغییرات شما را نادیده می‌گیرد و در اینجا DevTools واقعاً به شما کمک خواهد کرد. در فایل مثال ما دو کلمه وجود دارد که در یک عنصر قرار گرفته‌اند. یکی به صورت نارنجی و دیگری به صورت صورتی پررنگ نمایش داده می‌شود. در CSS ما موارد زیر را اعمال کرده‌ایم:

CSS

با این حال، بالاتر از آن در فایل استایل، یک قانون با انتخابگر وجود دارد:

CSS

همانطور که از درس مدیریت مغایرت‌ها به یاد دارید، در آنجا در مورد ویژگی خاص بودن بحث کردیم، انتخابگرهای کلاس خاص‌تر از انتخابگرهای عنصر هستند و بنابراین این مقداری است که اعمال می‌شود. DevTools می‌تواند به شما در یافتن چنین مشکلاتی کمک کند، به خصوص اگر اطلاعات در جایی در یک فایل استایل‌شیت بزرگ پنهان شده باشد. را با کلاس بررسی کنید و DevTools به شما نشان می‌دهد که رنگ نارنجی اعمال می‌شود و همچنین ویژگی رنگی که برای اعمال شده است، خط خورده است. اکنون می‌توانید ببینید که انتخابگر کلاس، انتخابگر عنصر را نادیده می‌گیرد.

مشکلات اشکال‌زدایی در CSS

DevTools می‌تواند هنگام حل مشکلات CSS کمک بزرگی باشد، بنابراین وقتی خود را در موقعیتی می‌بینید که CSS آنطور که انتظار دارید رفتار نمی‌کند، چگونه باید آن را حل کنید؟ مراحل زیر می‌تواند مفید باشد.

از مشکل یک قدم عقب بروید

هر مشکل کدنویسی می‌تواند ناامیدکننده باشد، به خصوص مشکلات CSS، زیرا اغلب پیام خطایی برای جستجو در اینترنت و یافتن راه‌حل دریافت نمی‌کنید. اگر ناامید شده‌اید، برای مدتی از مشکل فاصله بگیرید - پیاده‌روی کنید، نوشیدنی بنوشید، با یک همکار گپ بزنید یا مدتی روی چیز دیگری کار کنید. گاهی اوقات وقتی فکر کردن به مشکل را متوقف می‌کنید، راه‌حل به طور جادویی ظاهر می‌شود و حتی اگر اینطور نباشد، کار کردن روی آن وقتی احساس سرزندگی می‌کنید بسیار آسان‌تر خواهد بود.

آیا HTML و CSS معتبری دارید؟

مرورگرها انتظار دارند که CSS و HTML شما به درستی نوشته شده باشند، با این حال مرورگرها بسیار بخشنده نیز هستند و تمام تلاش خود را می‌کنند تا صفحات وب شما را نمایش دهند، حتی اگر در نشانه‌گذاری یا شیوه‌نامه خطایی داشته باشید. اگر در کد خود اشتباه دارید، مرورگر باید حدس بزند که منظور شما چه بوده است و ممکن است تصمیمی متفاوت از آنچه در ذهن داشته‌اید، بگیرد. علاوه بر این، دو مرورگر مختلف ممکن است با دو روش مختلف با مشکل برخورد کنند. بنابراین، اولین قدم خوب این است که HTML و CSS خود را از طریق یک اعتبارسنج اجرا کنید تا هرگونه خطایی را شناسایی و برطرف کند. اعتبارسنج CSS اعتبارسنج HTML

آیا ویژگی و مقدار توسط مرورگری که در آن آزمایش می‌کنید پشتیبانی می‌شوند؟

مرورگرها CSS ای را که نمی‌فهمند نادیده می‌گیرند. اگر ویژگی یا مقداری که استفاده می‌کنید توسط مرورگری که در آن آزمایش می‌کنید پشتیبانی نشود، هیچ مشکلی پیش نمی‌آید، اما آن CSS اعمال نمی‌شود. DevTools معمولاً ویژگی‌ها و مقادیر پشتیبانی نشده را به نوعی برجسته می‌کند. در تصویر زیر، مرورگر از مقدار subgrid برای grid-template-columns پشتیبانی نمی‌کند.

همچنین می‌توانید به جداول سازگاری مرورگرها در پایین صفحه هر ویژگی در MDN نگاهی بیندازید. این جداول پشتیبانی مرورگرها را برای آن ویژگی نشان می‌دهند، که اغلب به صورت تفکیک شده بیان می‌شوند، اگر پشتیبانی برای برخی از کاربردهای ویژگی وجود داشته باشد و نه برای برخی دیگر. به جدول سازگاری ویژگی grid-template-columns مراجعه کنید.

آیا چیز دیگری CSS شما را نادیده گرفته است؟

اینجاست که اطلاعاتی که در مورد ویژگی خاص (specificity) آموخته‌اید، بسیار مفید خواهد بود. اگر چیز خاص‌تری دارید که بر کاری که می‌خواهید انجام دهید، غلبه می‌کند، ممکن است وارد یک بازی بسیار خسته‌کننده برای فهمیدن آن شوید. با این حال، همانطور که در بالا توضیح داده شد، DevTools به شما نشان می‌دهد که CSS چه چیزی را اعمال می‌کند و می‌توانید بفهمید که چگونه انتخابگر جدید را به اندازه کافی خاص کنید تا آن را نادیده بگیرد.

یک مورد آزمایشی کوچک‌شده از مشکل ایجاد کنید

اگر مشکل با مراحل بالا حل نشد، باید بررسی بیشتری انجام دهید. بهترین کار در این مرحله ایجاد چیزی است که به عنوان یک مورد آزمایشی کاهش‌یافته شناخته می‌شود. توانایی «کاهش یک مشکل» یک مهارت واقعاً مفید است. این به شما کمک می‌کند تا مشکلات را در کد خود و همکارانتان پیدا کنید و همچنین شما را قادر می‌سازد تا اشکالات را گزارش دهید و به طور مؤثرتری درخواست کمک کنید. یک مورد آزمایشی کاهش‌یافته، نمونه کدی است که مشکل را به ساده‌ترین شکل ممکن نشان می‌دهد، با حذف محتوای نامرتبط و سبک‌بندی اطراف. این اغلب به معنای حذف کد مشکل‌ساز از طرح‌بندی شما برای ایجاد یک مثال کوچک است که فقط آن کد یا ویژگی را نشان می‌دهد. برای ایجاد یک مورد آزمایشی کاهش‌یافته: اگر نشانه‌گذاری شما به صورت پویا تولید می‌شود - به عنوان مثال از طریق CMS - یک نسخه استاتیک از خروجی ایجاد کنید که مشکل را نشان می‌دهد. یک سایت اشتراک‌گذاری کد مانند CodePen برای میزبانی موارد آزمایشی کاهش‌یافته مفید است، زیرا در این صورت آنها به صورت آنلاین قابل دسترسی هستند و می‌توانید به راحتی آنها را با همکاران خود به اشتراک بگذارید. می‌توانید با انجام View Source در صفحه و کپی کردن HTML در CodePen شروع کنید، سپس CSS و جاوا اسکریپت مربوطه را نیز دریافت کرده و آن را نیز اضافه کنید. پس از آن، می‌توانید بررسی کنید که آیا مشکل هنوز مشهود است یا خیر. اگر حذف جاوا اسکریپت مشکل را برطرف نکرد، جاوا اسکریپت را اضافه نکنید. اگر حذف جاوا اسکریپت مشکل را برطرف کرد، تا جایی که می‌توانید جاوا اسکریپت را حذف کنید و هر چیزی را که باعث مشکل می‌شود، باقی بگذارید. هر HTML که به مشکل کمکی نمی‌کند را حذف کنید. اجزا یا حتی عناصر اصلی طرح‌بندی را حذف کنید. باز هم، سعی کنید به کوچکترین مقدار کدی که هنوز مشکل را نشان می‌دهد، برسید. هر CSS که تاثیری بر مشکل ندارد را حذف کنید. در فرآیند انجام این کار، ممکن است متوجه شوید چه چیزی باعث مشکل می‌شود، یا حداقل بتوانید با حذف چیزی خاص، آن را روشن و خاموش کنید. اضافه کردن نظرات به کد خود هنگام کشف موارد، ارزشش را دارد. اگر نیاز به درخواست کمک دارید، آنها به فردی که به شما کمک می‌کند نشان می‌دهند که قبلاً چه چیزی را امتحان کرده‌اید. این ممکن است اطلاعات کافی به شما بدهد تا بتوانید مشکلات و راه‌حل‌های احتمالی را جستجو کنید. اگر هنوز در حل مشکل مشکل دارید، داشتن یک مورد آزمایشی کاهش‌یافته به شما این امکان را می‌دهد که با ارسال پست در یک انجمن یا نشان دادن به یک همکار، درخواست کمک کنید. اگر بتوانید قبل از درخواست کمک، نشان دهید که کار کاهش مشکل و شناسایی دقیق محل وقوع آن را انجام داده‌اید، احتمال دریافت کمک بسیار بیشتر است. یک توسعه‌دهنده باتجربه‌تر ممکن است بتواند به سرعت مشکل را تشخیص داده و شما را در مسیر درست راهنمایی کند، و حتی اگر اینطور نباشد، مورد آزمایشی کاهش‌یافته شما به آنها این امکان را می‌دهد که نگاهی سریع به آن بیندازند و امیدوار باشند که بتوانند حداقل کمکی ارائه دهند. در صورتی که مشکل شما در واقع یک اشکال در یک مرورگر باشد، می‌توان از یک مورد آزمایشی کاهش‌یافته برای ثبت گزارش اشکال به فروشنده مرورگر مربوطه (مثلاً در سایت bugzilla موزیلا