خطاهای رایج و رفع آن‌ها

آشنایی با خطاهای متداول CSS، نحوه دیباگ کردن و ابزارهای عیب‌یابی

خطاهای CSS چه چیزی هستند؟

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

مرورگر چگونه با خطاها رفتار می‌کند؟

نوع خطارفتار مرورگر
ویژگی نامعتبرآن ویژگی را نادیده می‌گیرد
مقدار نامعتبرآن اعلان را نادیده می‌گیرد
انتخابگر نامعتبرکل قانون را نادیده می‌گیرد
آکولاد بسته نشدهتا پایان فایل را نادیده می‌گیرد

۱. فراموش کردن سمی‌کالن

یکی از رایج‌ترین اشتباهات — فراموش کردن ; در انتهای اعلان باعث می‌شود خط بعدی هم خراب شود:

/* ❌ غلط */
    p {
        color: red
        font-size: 16px;
    }
    
    /* ✅ درست */
    p {
        color: red;
        font-size: 16px;
    }

۲. اشتباه در نام ویژگی

/* ❌ غلط — املای اشتباه */
    p {
        colr: red;        /* color درست است */
        font-size: 16px;
        background-colr: white;
    }
    
    /* ✅ درست */
    p {
        color: red;
        font-size: 16px;
        background-color: white;
    }

۳. مقدار نامعتبر

/* ❌ غلط */
    p {
        font-size: big;        /* باید px، em، rem باشد */
        color: redish;         /* رنگ نامعتبر */
        width: 100;            /* واحد فراموش شده */
    }
    
    /* ✅ درست */
    p {
        font-size: 18px;
        color: red;
        width: 100%;
    }

۴. آکولاد بسته نشده

/* ❌ غلط — آکولاد بسته فراموش شده */
    .card {
        background: white;
        padding: 20px;
    
    /* هر چیزی بعد از این نادیده گرفته می‌شود! */
    .btn {
        color: blue;
    }

۵. تداخل اولویت (Specificity)

گاهی استایل اعمال نمی‌شود چون قانون دیگری اولویت بالاتر دارد:

/* این اولویت بالاتر دارد */
    #header p {
        color: red;
    }
    
    /* این نادیده گرفته می‌شود */
    p {
        color: blue;
    }

۶. انتخابگر اشتباه

/* ❌ غلط — فاصله اضافی */
    div .class { }  /* فرزندِ div که کلاس دارد */
    
    /* ✅ درست — بدون فاصله */
    div.class { }   /* div که کلاس دارد */
    
    /* ❌ غلط — ID با نقطه */
    .header { }     /* این کلاس است */
    
    /* ✅ درست — ID با # */
    #header { }

۷. مشکلات ترتیب لود شدن

<!-- فایل CSS بعد از استایل‌های inline لود می‌شود -->
    <link rel="stylesheet" href="style.css">
    
    <!-- این استایل آخر لود می‌شود و همه را بازنویسی می‌کند -->
    <link rel="stylesheet" href="override.css">

ابزارهای دیباگ CSS

۱. DevTools مرورگر (F12)

مهم‌ترین ابزار دیباگ CSS. با راست‌کلیک و Inspect می‌توانید:

۲. W3C CSS Validator

سرویس رسمی W3C برای بررسی اعتبارسنجی CSS:

jigsaw.w3.org/css-validator/

۳. Stylelint

ابزاری برای بررسی خودکار خطاها و سبک کدنویسی:

npm install stylelint --save-dev

چگونه دیباگ کنیم؟

گاماقدام
۱عنصر را در DevTools بررسی کنید
۲ببینید قانون شما اصلاً اعمال شده؟
۳اگر خط خورده، چرا؟ (اولویت؟ اشتباه املایی؟)
۴اگر اعمال شده ولی نتیجه غلط است، مدل جعبه را چک کنید
۵از outline: 2px solid red; برای دیدن مرزها استفاده کنید

تکنیک‌های عیب‌یابی سریع

/* تکنیک ۱: خط قرمز برای دیدن مرزها */
    * {
        outline: 1px solid red !important;
    }
    
    /* تکنیک ۲: رنگ پس‌زمینه برای دیدن ابعاد */
    .debug {
        background: rgba(255, 0, 0, 0.2) !important;
    }
    
    /* تکنیک ۳: غیرفعال کردن همه استایل‌ها برای تست */
    * {
        all: unset !important;
    }

خطاهای رایج ریسپانسیو

/* ❌ عرض ثابت در موبایل */
    .container {
        width: 1200px;  /* در موبایل سرریز می‌کند */
    }
    
    /* ✅ عرض منعطف */
    .container {
        max-width: 1200px;
        width: 100%;
    }
    
    /* ❌ فراموش کردن viewport */
    /* در HTML باید این خط باشد: */
    /* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */

چک‌لیست عیب‌یابی

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط