يتواصل معي بعض أصحاب المواقع أحيانًا لغرض إجراء تغييرات بسيطة على مظهر موقعهم لا تدعم القوالب التي يستخدمونها تلك التغييرات عبر إعدادات القالب المدمجة. أستخدم CSS لإجراء هذه التعديلات، لكن لأن كتابة أكواد جديدة مباشرة في الموقع قد يتسبب بحدوث أخطاء في التصميم، أعتمد على أداة Inspect Element لكتابة الأكواد ثم إضافتها في الموقع.
سأشارككم في هذا المقال كيف أستخدم هذه الأداة المدمجة في المتصفحات الحديثة مثل جوجل كروم وموزيلا فايرفوكس لغرض كتابة أكواد CSS لإجراء تعديلات على التصميم بشكل آمن، بحيث نرى تأثيرات هذه الأكواد مباشرة قبل تطبيقها فعليًا، ثم نطبقها على الموقع بثقة بعد التأكد من أنها تعمل بالشكل المطلوب.
ما هي أداة Inspect Element؟
أداة Inspect Element أو فحص العنصر هي أداة مدمجة في معظم المتصفحات الحديثة، تتيح للمطورين ومصممي الويب وأصحاب المواقع عرض وتحليل وتعديل كود HTML و CSS لصفحة الويب مباشرة في المتصفح.
وتتمثل الأداة بنافذة تظهر لك الكود المصدري الذي يشكل صفحة الويب التي تراها، حيث يظهر كود HTML للصفحة في الأعلى، ويظهر كود CSS للعنصر المحدد في الأسفل، وذلك في نصف الشاشة الذي تشغله الأداة.
تستخدم الأداة لأغراض متنوعة، منها تعديل وتجربة التصميم، حيث يمكن تغيير الألوان والخطوط وأبعاد العناصر، بالإضافة إلى تصحيح الأخطاء حيث تساعد المطورين على معرفة سبب ظهور عنصر بشكل خاطئ، فضلًا عن اختبار التجاوب مع الأجهزة الذكية واللوحية وأنواع الأجهزة الأخرى.
الجدير بالذكر أن أي تغييرات يتم إجراؤها على الصفحة باستخدام الأداة تكون محلية على الجهاز وتزول بمجرد إعادة تحميل الصفحة، ومن هنا في تستخدم للاختبار فقط.
كيفية الوصول إلى أداة Inspect Element؟
يمكن الوصول إلى أداة Inspect Element بسهولة وبطريقتين تتشابهان في معظم المتصفحات الشهيرة، وهما:
- الطريقة الأولى: اذهب إلى أي عنصر تود تعديله في الصفحة الظاهرة ثم انقر عليه بزر الفأرة الأيمن، واختر فحص أو Inspect من القائمة المنسدلة التي تظهر، وستفتح أداة Inspect Element مباشرة في نصف الشاشة.
- الطريقة الثانية: اضغط على مفتاح F12 في لوحة المفاتيح لفتح أدوات المطور، ثم انقر على تبويب Elements من التبويبات في الأعلى.
كيفية استخدام الأداة لتغيير مظاهر العناصر
الأداة نفسها لا يمكن استخدامها لتغيير مظهر العناصر، بل يمكن استخدامها لكتابة أو تعديل أكواد CSS محددة تغير مظاهر العناصر، واستخدام الأداة يتطلب معرفة جيدة بلغة CSS. عادة عندما أستخدم الأداة لكتابة كود يغير مظهر أحد العناصر في الصفحة، أتبع الخطوات التالية:
تحديد العنصر المستهدف
بعد فتح الأداة، أحدد أولًا العنصر الذي أريد تطبيق كود CSS عليه أو تعديل أكواد CSS الخاصة به، ويتم ذلك بالنقر على العنصر في نافذة HTML، إذ عند النقر عليه، تظهر أكواد CSS الخاصة به في قسم CSS.
الجدير بالذكر أنه لمساعدتك على تحديد العنصر في نافذة HTML ستلاحظ أنه عند تمرير مؤشر الفأرة على العناصر يتم تظليلها في صفحة الويب، فمثلًا لاحظ كيف قمت بتحديد العنوان الفرعي الأول في الصفحة.
أيضًا من المهم ملاحظة أنه عند النقر على أي عنصر بزر الفأرة الأيمن واختيار فحص أو Inspect يتم تحديد العنصر الذي تم النقر عليه تلقائيًا، وبالتالي يكون العنصر المستهدف محددًا مسبقًا عندما تفتح أداة Inspect Element.
استكشاف وتعديل أكواد CSS
تظهر أكواد CSS الخاصة بالعنصر المستهدف الذي تم تحديده في الربع الأيمن السفلي، ويمكن تعديل أي خاصية من خاصيات CSS الموجودة، فمثلًا إذا أردنا تعديل الهوامش الخارجية نعدل خاصية margin، وإذا أردنا تعديل الهوامش الداخلية نعدل padding، وإذا أردنا تعديل لون النص نعدل color، وهكذا لباقي خواص CSS.
ويمكن إضافة خواص جديدة إلى العنصر من خلال كتابتها في قسم element.style، حيث يمكن استخدام أي من الخصائص التي تريدها هنا حتى لو كانت مستخدمة للعنصر في الأسفل، إذ يكون للخواص التي تكتبها هنا أولوية.
وأيضًا يمكن إضافة خواص CSS جديدة عبر تطبيق قاعدة جديدة تتضمن محدد العنصر نفسه، حيث ننقر على زر + فيتم مباشرة إضافة محدد العنصر، ونضيف CSS داخل قاعدة المحدد الجديدة التي تظهر.
وهذه الطريقة أفضل في الواقع، لأنه سيكون بإمكانك نسخ كامل القاعدة (المحدد والخاصيات) ولصقها مباشرة في موقعك دون الحاجة لمعرفة محدد العنصر بطريقة أخرى، وأيضًا غالبًا ما يكون المحدد الذي يتم إضافته خاصًا بكافة العناصر المتشابهة في الصفحة، وبالتالي لا يتم تطبيق CSS فقط على العنصر نفسه، بل أيضًا على جميع العناصر المتشابهة، فمثلًا في الحالة السابقة، تطبق على كافة العناوين الفرعية h2.
اقرأ أيضًا: كيف تستخدم مكتبة الأنماط في الووردبريس لتحسين تجربة المستخدم داخل موقعك
تطبيق التعديلات بشكل دائم
بعد اختبار التعديلات باستخدام أداة Inspect Element يمكن أن نطبقها على الموقع الإلكتروني لتصبح دائمة، ويتم ذلك عبر نسخ أكواد CSS التي تم تعديلها أو إضافتها في الأداة وإضافتها في موقع ووردبريس من خلال أداة التخصيص، حيث ننتقل إلى المظهر > تخصيص > تنسيقات CSS إضافية في لوحة تحكم ووردبريس، ونضيف الكود.
ولمزيد من المعلومات حول كيفية إضافة أكواد CSS إلى ووردبريس بهذه الطريقة أو بطرق أخرى يمكنك مراجعة مقال (طرق إضافة أكواد CSS للووردبريس).
نصائح للاستفادة من أداة Inspect Element
للاستفادة من أداة Inspect Element بأعلى قدر ممكن، يمكنك اتباع النصائح التالية:
- استخدام محاكاة الهاتف: تسمح لك محاكاة الهاتف بفحص مظهر الموقع وعرضه كما يظهر على الأجهزة الذكية والهواتف اللوحية المختلفة، وينصح باستخدامه لعرض التعديلات المجراة للتأكد من أنها تتوافق مع كافة الأجهزة.
- استخدام منتقي الألوان: الكثير من خصائص CSS تتطلب تحديد الألوان عبر رمزها المكون من 6 أحرف وأرقام. توفر أداة Inspect Element منتقي ألوان يسمح باختيار اللون إما بالنقر عليه أو عبر اختياره من لوحة الألوان، ولهذا استخدمه لتسهيل الأمر.
- تعلم CSS جيدًا: عندما يكون لديك خبرة جيدة في CSS، تصبح أداة Inspect Element مفيدة جدًا في تخصيص مظهر العناصر، لأنه سيكون بإمكانك التلاعب بالمظاهر أكثر عبر خواص CSS ولهذا تعلم CSS جيدًا.
- استفد من تعديل العناصر في قسم HTML: يمكنك بالإضافة إلى تعديل أكواد CSS أن تعدل على العناصر في قسم HTML الذي يظهر فوقه ويعرض كافة عناصر الصفحة، إذ يمكنك أن تحذف عنصرًا أو تضيف خاصيات إليه أو غير ذلك.
ختامًا، تعد أداة Inspect Element واحدة من أكثر الأدوات فائدة لأي صاحب موقع، فهي توفر الكثير من الوقت والجهد، وتساعد بشدة على تعديل مظهر الموقع، خاصة عند الحاجة إلى تعديلات بسيطة، لكن إذا لم تكن لديك الخبرة الكافية في CSS ولم ترد تعلمها، فيمكنك الاستعانة بمطور خبير من خمسات أو مستقل ليساعدك على إجراء تعديلات على مظهر موقعك بالاستفادة من هذه الأداة.
