البحث في الموقع

تمتلك معظم المتصفّحات أداة خفيّة تسمح لنا بالنظر خلف كواليس ما يجري في صفحة الويب. يُعتبر هذا أمرًا مفيدًا جدًّا من أجل تفحّص مواقع الويب الخاصّة بنا أو من أجل الاستلهام من مواقع ويب الأخرى. يمتلك متصفّح Chrome حاليًّا أكثر هذه الأدوات فعاليةً والتي تُسمّى أدوات المطوّر Developer Tools أو اختصارًا DevTools. تعلمنا في الدروس السابقة كيفية إنشاء و نشر و تنسيق موقعنا الأول باستخدام CSS. سنقوم في هذا الدرس باستعمال أدوات المطور لتفحص موقعنا والتعديل عليه. فتح أدوات التطوير البرمجية في Chrome يمكن الوصول إلى هذه الأدوات بعدّة أساليب: انقر بز الفأرة الأيمن على أيّ عنصر في صفحة الويب ثم اختر Inspect. استخدم Ctrl+Shift+I من لوحة المفاتيح أو اضغط F12. لنجرّب ذلك على موقعنا الحالي. يجب أن تحصل على شكل شبيه بما يلي: ملاحظة: إذا كنت تستخدم المحرّر Brackets فمن الأفضل أن تلغي تفعيل ميزة Live Preview (التي تحدّثنا عنها في الدرس الأوّل: كيف تصمم أول صفحة ويب لك) ثم أعد تحميل الصفحة ضمن المتصفّح وإلّا فيمكن أن ترى معرّفات id إضافية في الشيفرة يُضيفها المحرّر Brackets تلقائيًّا. تفحص عنصر يمكن باستخدام أدوات التطوير DevTools تفحُّص أي عنصر ضمن صفحة الويب. كمثال على ذلك، لنتفحّص العنصر h2 وذلك بالنقر بزر الفأرة الأيمن على العنوان "Welcome" ثم اختيار Inspect. سيؤدّي ذلك إلى فتح DevTools والانتقال إلى العنصر h2 ضمن الرماز مباشرةً: تظهر هذه الأدوات في القسم الأيمن لنافذة المتصفّح (وقد تظهر في القسم السفلي منها)، ومن هناك يمكننا أن نشاهد التنسيقات المُطبّقة على العنصر h2. يجب أن نرى الألوان التي عرّفناها مسبقًا ضمن الملف main.css. يمكننا أن نرى قسمًا اسمه user agent stylesheet وفيه نجد قواعد التنسيق الافتراضيّة المطبّقة على أيّ عنصر من النوع h2 وذلك من قِبَل المتصفّح. أمّا في الأسفل فيمكننا أن نرى مستطيلًا ملوّنًا. يرينا هذا المستطيل الحجم والمسافات والحدود لعنصر h2 الذي نتفحّصه. فمثلًا نجد أنّ الخاصية padding تحمل القيمة 5 كما عرّفناها مسبقًا ضمن الملف main.css. تغيير التنسيقات ورماز HTML سنتناول الآن الجزء المثير في هذا الدرس. يمكننا تغيير أو إلغاء تفعيل التنسيقات بالإضافة إلى تحرير رماز HTML مباشرةً ضمن المتصفّح. فمثلّا إذا نقرنا على المربّع الملوّن الموجود بجوار background-color يمكننا تغيير لون الخلفيّة للعنصر h2 الذي نتفحّصه حاليًّا، أو حتى يمكننا إدخال قيمة جديدة للخاصيّة padding. يمكن تغيير رماز HTML بالنقر بزر الفأرة الأيمن على رماز العنصر في نافذة DevTools ثم اختيار Edit as Html. يُعتبر هذا الأسلوب فعّالًا للغاية في إجراء التجارب دون التعديل الفعلي ضمن مستند HTML الأصلي، فأيّة تعديلات نجريها ضمن المتصفّح ستكون مؤقّتة وستختفي بمجرّد إعادة تحميل الصفحة ضمنه. الاستلهام من مواقع ويب الأخرى يمكننا تفحّص أي صفحة باستخدام أدوات DevTools وإجراء تغييرات مؤقّتة عليها. حاول أن تصبح عادةً لديك، فمثلًا إذا رأيت لونًا أعجبك بينما تتصفّح صفحات ويب، يمكنك استخدام DevTools للحصول على القيمة الست عشرية له، بحيث تستطيع استخدام هذا اللون ضمن ملفات css الخاصّة بك. من أجل مواقع ويب الأكبر يمكن أن يكون عدد التنسيقات كبيرًا، فيمكن أن توجد عدة قواعد css لنفس العنصر تتجاوز بعضها البعض. يمكن أن نرى مثالًا على ذلك مع عنصر h1. فحجم الخط الذي عرّفناه لهذا العنصر في الدرس (مقدمة إلى تنسيقات CSS) يتجاوز حجم الخط القياسي المعرّف افتراضيًّا ضمن المتصفّح له، وهكذا يتم تجاوز التعريف الأصلي. سننشئ في الدرس الخامس ثلاث صفحات من أجل المدوّنة Blog والمشاريع Projects والتواصل Contact لمشروعنا. ترجمة -وبتصرّف- للمقال HTML & CSS Tutorial - Part 4: Development Tools in the Browser لصاحبه Marco Jakob.

أوراق الأنماط المتتالية (Cascading Style Sheets أو CSS اختصارًا) هي لغة تُستخدم لوصف كيفيّة عرض المستندات للمستخدمين. تُكتب هذه المستندات في لغة رُماز مثل HTML. المستند هو مجموعة من المعلومات التي تهيكل باستخدام لغة رُماز (markup language). يُقصّد بعرض المستند للمستخدم تحويله إلى صيغة مُفيدة للجمهور، فالمتصفحات مثل Firefox وChrome وInternet Explorer مًصمّمة بحيث تعرض المستندات للمستخدمين مرئيًّا، مثلًا: على شاشة حاسوب أو جهاز إسقاط (projector) أو طابعة. سنتعرض خلال هذه السلسلة إلى المواضيع التالية: مدخل إلى أوراق الأنماط المتتالية (CSS) (هذا الدرس). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. أمثلة صفحة الويب هذه الّتي تقرأها هي مُستند. تُهيكل المعلومات التي تشاهدها في صفحة ويب باستخدام لغة HTML (اختصارًا لـHyperText Markup Language). مرُبعات الحوار في التطبيقات هي أيضًا مُستندات، وقد تكون مُهيكلة باستخدام لغة رماز مثل XUL (اختصارًا لـXML User Interface Language)، والتي قد تجدها في بعض برامج Mozilla. في هذه السلسلة، ستُقرأ معلومات مُدرجة تحت عنوان تفاصيل أكثر كالفقرة التالية، تحوي هذه الفقرات على معلومات وروابط لمصادر إضافية عن مفهوم أو موضوع تغطّيه هذه الأقسام. اقرأ هذه المعلومات حالما تُشاهدها وتابع الروابط، أو تجاوزها وعُد لقراءتها لاحقًا. تفاصيل أكثر كلمة المستند لا تعني ما تعنيه كلمة "ملفّ"، إلّا أنّه يمكن حفظ المستندات ضمن ملفّات. المستند الذي تقرأه الآن لم يُحفَظ في ملفّ، بل يُجلب من قاعدة بيانات على الخادم والذي بدوره يولّد المستند بجمع أجزائه من عدّة ملفّات. مهما يكن الأمر، فإنّك في هذه السّلسلة ستتعامل مع مستندات محفوظة في ملفّات. بإمكانك إيجاد معلومات أكثر عن المستندات ولغات الرُماز في مواقع أخرى من شبكة مطوّري Mozilla: اللغة الوظيفة HTML لصفحات الويب XML للصفحات المُهيكلة بشكل عامّ SVG للرسوم XUL لواجهات برامج Mozilla سنطّلع على أمثلة من هذه اللغات في الجزء الثّاني من السلسلة. تفاصيل أكثر يُدعى البرنامج الذي يعرض المستندات على المستخدم في المصطلحات الرسميّة لـCSS بوكيل المستخدم (user agent أو UA). المتصفّح ليس إلّا واحدًا من وكلاء المستخدم، فلا تقتصر CSS على المتصفّحات أو العرض المرئيّ، ولكنّنا في الجزء الأوّل من السّلسلة لن نتعامل إلّا مع CSS في المتصفّح. للاطّلاع على التعاريف الرسمية للمصطلحات في CSS، انظر Definitions في وصف CSS من قبل جمعيّة W3C المسؤولة عن تعيين المعايير القياسيّة للويب. لنبدأ العمل: إنشاء مستند أنشئ مجلّدًا جديدًا في جهازك لحفظ وتنظيم تمارين هذه السّلسلة. افتح محرّر النصوص وأنشئ ملفًّا نصيًّا جديدًا، سنقوم بكتابة المستند في هذا الملف خلال التمارين القليلة التالية. انسخ والصق HTML أدناه. احفظ الملف باسم doc1.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> افتح علامة تبويب أو نافذة جديدة في متصفّحك، ثم افتح الملف الذي أنشأته. من المُفترض أن ترى النّص وحروفه الأولى بخطّ عريض، كهذه الصّورة: قد يختلف ما تراه في متصفحك قليلًا عن الصّورة من حيث الخط أو الألوان أو المسافات بين الحروف، وهذا غير مهمّ الآن. المستند الآن لا يستخدم CSS، وهذا ما سنفعله في الخطوة التالية. لماذا نستخدم CSS؟ استخدم CSS لتعريف تنسيق مستنداتك، بما في ذلك التصميم والتخطيط والاختلافات في العرض بين الأجهزة المختلفة وقياسات الشاشات المختلفة. بإمكانك إضافة CSS في رأس (<head>) مستند (نُسمّي ذلك ورقة أنماط مُضمّنة) أو إرفاق ملف منفصل يحوي تعريف التنسيقات (ورقة أنماط خارجيّة)، ثمّ ربطها مع المستند برابط يُضاف إلى رأسه. لللأسلوب الأخير عدّة محاسن، ففصل التنسيقات عن الرُماز: يقلّل من التكرار يُسهل الصّيانة يسمح بإجراء تغيير على نطاق الموقع كاملًا من مكان واحد مثال يمكنك مثلًا حفظ معلومات التنسيقات في ملفات مشتركة بين كلّ الصّفحات، فعندما يُربَط مستند بورقة أنماط تُحدّد لون العناوين الثانويّة (h2)، بإمكانك استخدام هذا التنسيق في كل صفحات الموقع بالإشارة إلى هذه الورقة. عندما يعرض مستخدم صفحة ويب، يقوم المتصفح بجلب معلومات التنسيق في الوقت نفسه. عندما يطبع مستخدم صفحة ويب، بإمكانك توفير معلومات تنسيق مختلفة تُسهّل من قراءة الصّفحة المطبوعة. كيف تعمل HTML وCSS معًا؟ بشكل عامّ، استخدم HTML لوصف محتوى الموقع، وليس تنسيقه. بإمكانك استخدام CSS لتحديد تنسيق المستند، وليس محتواه. أحيانًا نضطر لإجراء بعض الاستثناءات لهذه القاعدة، كما سنرى لاحقًا. تفاصيل أكثر توفّر لُغة رُماز مثل HTML بعض الوسائل لوصف تنسيق المستند بشكل منفصل عن CSS، فيمكنك مثلًا في HTML استخدام الوسم <b> لجعل النّص عريضًا، ويمكنك تحديد لون خلفيّة المستند في وسم متن المستند <body>. عندما تستخدم CSS، يُفضّل عادةً تجنّب استخدام هذه الميزات في لغة الرُماز بحيث يبقى وصف تنسيق المستند في موضع واحد فقط. لنعمل: إنشاء ورقة أنماط أنشئ ملفًّا نصيًّا آخر بجوار الملف السابق doc1.html. احفظ الملف باسم style1.css. سيحوي هذا الملف وصف التنسيقات. في ملفّ CSS، انسخ والصق السّطر التالي ثمّ احفظ الملف: strong {color: red;} ربط المستند بورقة الأنماط لربط المستند بورقة الأنماط، عدّل ملفّ HTML، أضف السّطر التالي في موقعه: <link rel="stylesheet" href="style1.css"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> احفظ الملف وحدّث الصّفحة في متصفّحك. تجعل ورقة الأنماط الحروف الأولى بلون أحمر، كهذا: ما التالي؟ لدينا الآن مستند بسيط مرتبط بورقة أنماط خارجيّة، وسنتعلّم كيف يجمعهما المتصفح معًا لعرض الصّفحة في الجزء التالي: كيف تعمل CSS؟ ترجمة (بتصرّف) للجزأين الأوّلين What is CSS و Why use CSS من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.