نکات DevTools: مشکلات CSS را کشف کنید

سوفیا املیانوا
Sofia Emelianova

آیا تا به حال CSS را روی یک عنصر اعمال کرده اید اما کار نمی کند؟

با Chrome DevTools، می‌توانید مشکلات CSS را در یک نگاه کشف کنید، اشکال‌زدایی و آزمایش کنید.

ویدیو را تماشا کنید تا بدانید چگونه پنجره Elements > Styles مسائل مختلف CSS را برجسته می کند:

  • هشدار. ویژگی با نحو نامعتبر

  • چک باکس. دارایی لغو شده

  • چک باکس. دارایی غیرفعال اطلاعات.با یک اشاره.

  • از parent به ارث رسیده است

    • چک باکس. دارایی موروثی
    • چک باکس. اموال غیر ارثی
  • چک باکس. اموال مختصر قابل گسترش بسط دادن.

    • چک باکس. دارایی دست دراز نادیده گرفته شده
    • چک باکس. اموال دست بلند فعال

شیوه نامه عامل کاربر

  • دارایی غیر قابل ویرایش
  • دارایی غیر قابل ویرایش لغو شد

نکات بیشتر برای رفع اشکال:

  • از فیلتر موجود در بخش Styles برای تمرکز بر روی ویژگی مورد علاقه خود استفاده کنید.
  • برای مشاهده تمام برندگان Cascade و مقادیر محاسبه شده آنها از صفحه Computed استفاده کنید.
  • در قسمت Computed ، یک ویژگی را گسترش دهید و روی یک پیوند کلیک کنید تا منبع آن را در صفحه Styles پیدا کنید.

برای اطلاعات بیشتر در مورد همه روش‌هایی که DevTools مسائل CSS را برجسته می‌کند، به یافتن CSS نامعتبر، لغو، غیرفعال و سایر CSS مراجعه کنید.

برای ارتقاء سطح تخصص خود در CSS، به یادگیری CSS مراجعه کنید.

برای یادگیری نحوه ایجاد وب‌سایت‌هایی که عالی به نظر می‌رسند و برای همه خوب کار می‌کنند، به یادگیری طراحی واکنش‌گرا مراجعه کنید.