كيفية تصحيح أخطاء CSS عن طريق شطر

أحد مهام سير العمل التي أستخدمها لتصحيح أخطاء CSS

كان لدي هذه المشكلة اليوم.

لقد أضفت زر Paddle إلى صفحة الدورة التدريبية الجديدة عبر الإنترنت ، حتى يتمكن الأشخاص من النقر فوق الزر "Buy now" وستظهر نافذة Paddle المنبثقة الرائعة.

تحتوي النافذة المنبثقة على مؤشر تحميل ، ودائرة بها قرص دوار بالداخل ، وكانت هناك مشكلة: عند النقر فوق الزر "اشترِ الآن" ، لم يكن مؤشر الدوران متمركزًا داخل الدائرة ، كما هو موضح في هذا gif:

لم أكن أعرف حقًا سبب المشكلة ، لذلك كنت أفكر في كيفية حلها.

المبدأ الذي أستخدمه في هذه الحالات هوينصف. أنا أيضا أسميهاتقسيم وإمبرا.

فتحت DevTools وانتقلت إلى لوحة المصادر ، والتي تعرض جميع الملفات التي تم تحميلها في الصفحة. لقد بحثت عن أحد ملفات CSS الخاصة بي ، حيث كان حدسي أن الصفحة CSS تتداخل مع قواعد CSS الخاصة بـ Paddle.

لذلك أزلتالكلمحتوى هذا الملف.

يقوم Chrome تلقائيًا بتغيير مظهر الصفحة عندما تقوم بتعديل ملفات CSS في لوحة المصادر ، لذلك تمكنت من التحقق ورؤية أن القرص الدوار يعمل الآن بشكل جيد!

إذن ، إحدى القواعد في CSS هي المشكلة.

كيف يمكنني معرفة أي خط؟

يحتوي الملف على 312 سطرًا. أختار من السطر 150 إلى 312 وحذفه. حاول مجددا. لا تزال المشكلة قائمة ، لذا يجب أن تنشأ من أول 149 سطرًا.

لقد ضربت cmd-Z (الغاء التحميل) لإعادة تلك الأسطر التي أزلتها ، وحذف الأسطر 70-149.

لقد اختفت المشكلة ، لذا فإن الخط الإشكالي موجود هناك. لقد قمت بالضغط على cmd-Z مرة أخرى لاستعادة الأسطر التي حذفتها.

وهكذا ، خطرت لك الفكرة. اشطفها وكررها حتى تجد الخط الذي يعطيك المشكلة.

تحميل مجانيكتيب CSS


المزيد من دروس css: