لغة CSS: كساء موقعك وتخطيطه

في المقال السابق بنيت بـHTML هيكلًا عظميًّا متينًا لأوّل صفحةٍ لك: محتوًى منظّم، لكن بلا حياةٍ ولا جمال. الآن تنتقل من دور «المهندس المعماريّ» إلى دور «مصمّم الديكور»، فتكسو هذا الهيكل بالألوان والخطوط والتخطيط. هذه وظيفة CSS: اللغة المسؤولة عن كل ما تراه جميلًا على الويب.

في هذا المقال تأخذ ملفّ index.html نفسه الذي أنشأته، وبنهايته يتحوّل من مستندٍ نصّيٍّ خامٍ إلى صفحةٍ مصمّمة. وفي الطريق تفهم فلسفة CSS، وكيف تُكتب القاعدة، وكيف تتحكّم بالتخطيط الحديث عبر Flexbox وGrid. ولا يلزمك حفظ كل ما يأتي؛ يكفي أن تفهمه الآن، فالإتقان يأتي بالتطبيق المتكرّر لا بالحفظ.

ما لغة CSS؟ مبدأ فصل الهيكل عن التصميم

CSS لغة توصيفٍ لا برمجة، ووظيفتها وصف كيفية عرض عناصر HTML.^[1] ويتّضح دورها من اسمها الكامل، Cascading Style Sheets (صفحات الأنماط الانسيابية). فهي «صفحات» (Sheets) لأنها تُكتب عادةً في ملفّاتٍ منفصلةٍ بامتداد .css. وهي «أنماط» (Style) لأنها تتحكّم بالمظهر البصريّ كلّه: الألوان والخطوط والهوامش والتخطيط. وهي «انسيابية» (Cascading)، وهذه ميزتها الأقوى: تتدفّق القواعد كالشلّال من العامّ إلى الخاصّ، فتطبّق نمطًا عامًّا على الموقع كلّه من ملفٍّ رئيسيّ، ثمّ تخصّص عناصر بعينها بقواعد أكثر تحديدًا.

والمبدأ الجوهريّ الذي تقدّمه هو «فصل الاهتمامات»: يبقى المحتوى والبنية في HTML، ويبقى المظهر في CSS. كأنك تبني منزلًا: HTML هو المخطّط والجدران الخرسانية، وCSS هو الطلاء والأرضيات والأثاث. لا تغيّر لون جدارٍ في مخطّط البناء، بل في مرحلة التصميم.

ولماذا يهمّ هذا الفصل إلى هذا الحدّ؟ لثلاثة أسباب. الأوّل الصيانة: لو كان موقعك خمسمئة صفحةٍ وكل روابطك زرقاء وأردت جعلها خضراء، فبدل تعديل خمسمئة ملفٍّ تغيّر سطرًا واحدًا في ملفّ CSS الرئيسيّ. والثاني نظافة الشيفرة: كل ملفٍّ مسؤولٌ عن مهمّةٍ واحدةٍ، فيسهل فهمه وإدارته في الفريق. والثالث الأداء: يخزّن المتصفّح ملفّ CSS مؤقتًا بعد أوّل زيارة، فلا ينزّله ثانيةً في الصفحات التالية، بل ينزّل ملفّ HTML الأصغر فقط، فيصير التنقّل أسرع.

نبذة تاريخية: كيف وُلدت CSS

في أيّام الويب الأولى لم تكن ثمّة طريقةٌ موحّدةٌ للتصميم، فكان المطوّرون يحشرون التصميم داخل HTML بوسومٍ مثل <font> و<center>. كان ذلك كابوس صيانةٍ: تغيير لون عناوين موقعٍ من مئة صفحةٍ يعني فتح مئة ملفٍّ وتعديلها يدويًّا، وشيفرةً تخلط الهيكل بالتصميم.

لحلّ هذه الفوضى اقترح النرويجيّ Håkon Wium Lie فكرة «صفحات الأنماط الانسيابية» في أكتوبر 1994 وهو يعمل في CERN إلى جانب تيم بيرنرز-لي، وطوّرها معه Bert Bos. ونشرت رابطة الويب W3C أوّل توصيةٍ رسميةٍ لـCSS1 في السابع عشر من ديسمبر 1996، ثمّ CSS2 في مايو 1998 بإمكاناتٍ أقوى للتخطيط وتحديد المواضع.^[2]

ثمّ جاء CSS3 بتغييرٍ جوهريّ في الطريقة: لم تَعُد اللغة تصدر إصدارًا ضخمًا واحدًا، بل قُسّمت إلى «وحداتٍ» مستقلّةٍ تتطوّر كلٌّ منها بسرعتها (وحدة الألوان، وحدة الحركات، وهكذا). ومن هذه الوحدات وُلدت ميزاتٌ صارت أساس التصميم الحديث: استعلامات الوسائط للتصميم المتجاوب، ونظاما التخطيط Flexbox وGrid، والتأثيرات البصرية كالزوايا الدائرية والظلال والحركات. واليوم CSS «معيارٌ حيٌّ» يتطوّر باستمرارٍ بلا رقم إصدار، فحين تسمع «CSS3» فالمقصود هذه اللغة الحديثة لا إصدارٌ متجمّد.

تشريح قاعدة CSS

تعمل CSS بنظام «قواعد» تخبر المتصفّح أيّ عنصرٍ يصمّم وكيف. وكل قاعدةٍ جملةٌ من جزأين. الأوّل «المُحدِّد» (Selector): يحدّد العنصر المستهدف، مستعملًا اسم الوسم أو سمتَي class وid اللتين وضعتهما في HTML. فـp يستهدف كل الفقرات، و.main-title يستهدف كل عنصرٍ صنفه main-title، و#logo يستهدف العنصر الوحيد الذي معرّفه logo. والثاني «كتلة التصريح» بين قوسين { }، وفيها أزواجٌ من «خاصيةٍ» (ما تغيّره، مثل color) و«قيمةٍ» (كيف تغيّره، مثل navy)، يفصل بينهما نقطتان وينتهي كل تصريحٍ بفاصلةٍ منقوطة:

h2 {
  color: navy;
  font-size: 24px;
}

تقول هذه القاعدة للمتصفّح: «ابحث عن كل عناصر <h2>، واجعل لون نصّها كحليًّا وحجم خطّها ستّةً وعشرين بكسلًا». فهم هذا الهيكل (مُحدِّد، ثمّ خاصية: قيمة) مفتاح كتابة أيّ CSS. ومثل HTML، تكتب التعليقات في CSS بين /* و*/، يتجاهلها المتصفّح وتشرح بها أقسام ملفّك أو تعطّل قاعدةً مؤقتًا للتجربة.

محدِّداتٌ أبعد، وحالاتٌ تفاعلية

المُحدِّد لا يقف عند اسمٍ أو صنف. تستهدف عنصرًا داخل عنصرٍ بكتابة الاسمين متتاليين، فـnav a يستهدف الروابط داخل التنقّل وحدها دون روابط الصفحة كلّها. وتجمع أهدافًا بفاصلةٍ، فـh1, h2, h3 يطبّق القاعدة على الثلاثة معًا.

والأهمّ أن للعنصر «حالاتٍ» تستهدفها بـ«الأصناف الزائفة» (pseudo-classes)، وأشهرها :hover (حين تمرّ الفأرة فوق العنصر) و:focus (حين يُركَّز على حقلٍ بلوحة المفاتيح). بهذه تضيف تفاعلًا بصريًّا دون أيّ جافاسكربت، كأن يغيّر زرٌّ لونه عند التمرير عليه:

.btn:hover {
  background-color: darkgreen;
}

وحالة :focus مهمّةٌ لإمكانية الوصول خاصّةً، فهي تُظهر للمستخدم أيّ حقلٍ أو زرٍّ يقف عليه وهو يتنقّل بلوحة المفاتيح، فلا تحذف مؤشّرها دون أن تضع بديلًا واضحًا.

أين تكتب CSS؟ ثلاث طرق

للقواعد ثلاثة مواضع، وليست سواءً. الأولى والأفضل دائمًا «ملفٌّ خارجيّ»: تكتب كل قواعدك في ملفٍّ بامتداد .css وتربطه بصفحتك بسطرٍ واحدٍ في <head>:

<link rel="stylesheet" href="style.css">

وهذه تحقّق فصل الاهتمامات تمامًا، وتتيح تخزين الملفّ مؤقتًا، وتغيير مظهر موقعٍ كامل من ملفٍّ واحد. والثانية «داخلية»: تكتب القواعد داخل وسم <style> في رأس الصفحة، وتفيد لصفحةٍ واحدةٍ فريدةٍ أو لاختبارٍ سريع، لكنّ أنماطها لا تتعدّى تلك الصفحة. والثالثة «سطرية»: تكتب التصميم في سمة style داخل الوسم نفسه (<p style="color: red;">)، وهذه تجنّبها عمومًا: تخلط المحتوى بالتصميم، ولها أولويةٌ عاليةٌ يصعب تجاوزها فتسبّب أخطاءً محيّرة. للمشاريع الاحترافية: استعمل الملفّ الخارجيّ دائمًا.

نموذج الصندوق

كل عنصرٍ في صفحتك، عنوانًا كان أو صورةً أو فقرة، يتعامل معه المتصفّح صندوقًا مستطيلًا. وفهم طبقات هذا الصندوق مفتاح التحكّم بالتباعد والتخطيط. من الداخل إلى الخارج: «المحتوى» (النصّ أو الصورة، أبعاده width وheight)، ثمّ «الحشوة» (padding: مساحةٌ شفافةٌ داخل الحدّ تبعد المحتوى عن الإطار)، ثمّ «الحدّ» (border: الإطار المحيط)، ثمّ «الهامش» (margin: مساحةٌ شفافةٌ خارج الحدّ تبعد العنصر عن جيرانه). الخلط بين الحشوة والهامش أكثر ما يربك المبتدئ، فثبّت الفرق: الحشوة داخلٌ، والهامش خارج. ومفاجأةٌ تربك المبتدئ أيضًا: تُضاف الحشوة والحدّ إلى العرض افتراضيًّا، فصندوقٌ عرضه 200px بحشوةٍ 20px يصير عرضه الفعليّ 240px. ولهذا يضبط معظم المطوّرين box-sizing: border-box في بداية ملفّهم، فيصير العرض شاملًا للحشوة والحدّ، وتصير الحسابات بديهيّة.

الوحدات والخصائص الأكثر استعمالًا

حين تعطي خاصيةً قيمةً مقاسية، تحتاج «وحدة». والوحدات نوعان. مطلقةٌ ثابتة، أشهرها «البكسل» (px): 16px ستّة عشر بكسلًا دائمًا مهما تغيّر المحيط. ونسبيةٌ تتكيّف، وهي الأهمّ في الويب الحديث: % نسبةٌ إلى العنصر الأب، وrem نسبةٌ إلى حجم خطّ الصفحة الأساسيّ (فتكبر النصوص كلّها بتغيير قيمةٍ واحدة، وهو ألطف لإمكانية الوصول)، وvw وvh نسبةٌ إلى عرض الشاشة وارتفاعها. القاعدة العملية: استعمل rem للخطوط والنِّسَب للعروض، ووفّر px لما يجب أن يبقى ثابتًا كحدٍّ رفيع.

أمّا الخصائص التي ستكتبها يوميًّا فمجموعةٌ صغيرةٌ تتكرّر: للنصّ font-family (نوع الخطّ) وfont-size (حجمه) وfont-weight (سماكته) وline-height (تباعد السطور) وtext-align (محاذاته)؛ وللألوان color (لون النصّ) وbackground-color (لون الخلفية)؛ وللمساحة خصائص الصندوق التي مرّت بك (margin وpadding وborder). تتقن هذه العشر فتغطّي بها معظم ما تصمّمه، وما بعدها تضيفه عند الحاجة.

وللألوان نفسها أكثر من طريقةٍ للكتابة، تلتقيها كلّها. أبسطها الأسماء الجاهزة (red وnavy)، وأشيعها الترميز السّتّ عشريّ (#1a2a45)، وهناك rgb() الذي يخلط الأحمر والأخضر والأزرق، وhsl() الذي يصف اللون بدرجته وتشبّعه وإضاءته (وهو الأسهل على الحدس حين تريد تفتيح لونٍ أو تغميقه). كلّها تصف اللون نفسه بطرقٍ مختلفة، فاختر ما يريحك؛ ويهيمن الترميز السّتّ عشريّ في معظم الشيفرة.

التخطيط الحديث: Flexbox وGrid

كيف تصفّ العناصر وترتّبها في الصفحة؟ عانى المطوّرون سنواتٍ من حِيَلٍ ملتويةٍ (تعويم العناصر، وحتى استعمال الجداول) حتى جاء نظاما تخطيطٍ حديثان حلّا المشكلة، وهما اليوم أساس كل تخطيطٍ تراه.

Flexbox نظامٌ أحاديّ البُعد: يرتّب عناصر في اتّجاهٍ واحد، صفًّا أو عمودًا. تفعّله بـdisplay: flex; على العنصر الحاوي، فيصفّ أبناءه ويوزّع المساحة بينهم ويحاذيهم بسهولةٍ كانت مستحيلةً قبله. هو الخيار الأمثل لشريط تنقّلٍ أفقيّ، أو لتوسيط عنصرٍ في وسط الشاشة، أو لصفّ بطاقاتٍ متساوية.

Grid (الشبكة) نظامٌ ثنائيّ البُعد: يرتّب العناصر في صفوفٍ وأعمدةٍ معًا، كأنك ترسم شبكةً وتضع كل عنصرٍ في خانته. تفعّله بـdisplay: grid;، وهو الخيار الأمثل لتخطيط الصفحة كاملةً (رأسٌ، وشريطٌ جانبيّ، ومحتوًى، وتذييل) أو لمعارض الصور. والقاعدة العملية: استعمل Flexbox حين ترتّب في اتّجاهٍ واحد، وGrid حين ترتّب في اتّجاهين.^[3]

وإلى جانبهما تتيح خاصية position «كسر» التدفّق الطبيعيّ للعناصر: فـrelative يزيح العنصر قليلًا عن مكانه دون أن يؤثّر في جيرانه، وabsolute يحرّره من التدفّق ويضعه بدقّةٍ داخل أقرب أبٍ موضوع، وfixed يثبّته بالنسبة لنافذة المتصفّح فيبقى مكانه عند التمرير (مثاليٌّ لشريط تنقّلٍ علويّ)، وsticky يجمع بينهما فيلتصق عند نقطةٍ معيّنةٍ أثناء التمرير. لا تحتاج إتقانها كلّها الآن؛ يكفي أن تعرف أن Flexbox وGrid هما أداتا التخطيط الأساسيّتان.

الخصوصية: من يفوز عند التعارض؟

في الملفّات الكبيرة قد تستهدف عدّة قواعد العنصر نفسه بأنماطٍ متعارضة. «الخصوصية» (Specificity) هي النظام الذي يقرّر به المتصفّح أيّها يفوز: يعطي كل مُحدِّدٍ «وزنًا»، والأثقل يفوز.^[4] والترتيب من الأقوى إلى الأضعف: الأنماط السطرية أقواها، ثمّ مُحدِّدات id، ثمّ مُحدِّدات class والسمات، ثمّ مُحدِّدات الوسوم. وإن تساوى وزن قاعدتين، فالأخيرة في الملفّ تفوز (وهذا معنى «الانسياب»). فهم هذا الترتيب يشخّص لك أكثر مشكلات «لماذا لا يعمل تصميمي؟».

ويكمل الصورةَ مبدأ «الوراثة»: بعض الخصائص تنتقل من العنصر الأب إلى أبنائه تلقائيًّا، فإن ضبطت color وfont-family على <body> ورثها كل ما بداخله ما لم تُلغَ بقاعدةٍ أخصّ. وخصائص أخرى لا تُورَّث (كالحدود والهوامش)، إذ لا معنى لأن يرث كل عنصرٍ حدّ أبيه. هذه الوراثة تختصر عملك: تضبط الخطّ واللون مرّةً في الأعلى بدل تكرارهما في كل عنصر.

وحين يحيّرك تصميمٌ لا يستجيب، فأقوى أداةٍ بين يديك هي «أدوات المطوّر» في المتصفّح التي مرّت بك في مقال المتصفّح: انقر العنصر بالزرّ الأيمن واختر «فحص»، فترى كل القواعد المطبّقة عليه، وأيّها فاز وأيّها شُطِب (يظهر مشطوبًا)، وتجرّب تعديلاتٍ حيّةً قبل أن تكتبها في ملفّك. هذه عادةٌ توفّر عليك ساعات تخمين.

CSS مع جافاسكربت: الحركة

لديك الآن هيكلٌ وتصميمٌ ثابت، لكنّ الويب الحديث تفاعليّ. حين تنقر زرًّا فيتغيّر شكل الصفحة، ترى جافاسكربت وCSS يعملان معًا. والطريقة الأساسية بسيطة: لا تكتب جافاسكربت قواعد CSS جديدة، بل تضيف صنفًا (class) إلى عنصرٍ أو تزيله، فيطبّق المتصفّح القاعدة المرتبطة به أو يلغيها. خذ زرّ «الوضع الليليّ»: تعدّ في CSS قاعدةً جاهزةً للصنف dark-mode لكنها غير نشطة:

body {
  background-color: white;
  color: black;
  transition: all 0.3s ease;
}
body.dark-mode {
  background-color: #222;
  color: white;
}

ثمّ تكتب جافاسكربت تبدّل هذا الصنف عند النقر:

const themeButton = document.getElementById('theme-button');
themeButton.addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

عند النقر تضيف جافاسكربت الصنف dark-mode إلى <body>، فيطبّق المتصفّح قاعدته فورًا وتتحوّل الألوان، والنقرة التالية تزيله فتعود الصفحة. هذه العلاقة بين الفعل (جافاسكربت) وردّ الفعل البصريّ (CSS) أساس كل تجربةٍ تفاعليةٍ على الويب.

ولاحظت في المثال خاصية transition؛ وهي ما يصنع «النعومة» في كل ما تراه يتحرّك على الويب. فبدلًا من أن يقفز اللون من الأبيض إلى الداكن فجأةً، تخبر CSS أن تنتقل بين الحالتين على مدى زمنٍ قصير: transition: all 0.3s ease; تعني «اجعل أيّ تغيّرٍ يأخذ ثلاثة أعشار الثانية بتدرّجٍ سلس». بهذه الخاصية الواحدة تتحوّل التغييرات الجافّة إلى حركاتٍ لطيفةٍ تحسّ بها العين، وهي أبسط أدوات الحركة في CSS وأكثرها استعمالًا. وأختها animation أقوى وأعقد، لتسلسلاتٍ حركيّةٍ كاملة، لكنّ transition تكفيك لتسعين في المئة مما تحتاج بدايةً.

ما وراء CSS الأساسية: المتغيّرات والأطر

بعد الأساس، اعرف ثلاثة أشياء ستصادفها. أوّلها «المتغيّرات» المدمجة في CSS نفسها (تُسمّى الخصائص المخصّصة): تعرّف قيمةً مرّةً (مثل لونك الرئيسيّ) وتستعملها في كل مكان، فتغيّرها كلّها من موضعٍ واحد:

:root { --main-color: #1a2a45; }
h1 { color: var(--main-color); }

وثانيها «المعالجات المسبقة» مثل Sass: لغةٌ تكتبها فتُترجَم إلى CSS عاديّ، تضيف قدراتٍ كالمتغيّرات والتداخل والدوال، تفيد في المشاريع الكبيرة (وإن كان كثيرٌ من ميزاتها صار متاحًا في CSS الحديثة نفسها). وثالثها «أطر العمل»: مجموعات أدواتٍ جاهزةٍ تسرّع البناء، أشهرها Bootstrap الذي يعطيك مكوّناتٍ كاملةً جاهزة (زرٌّ بصنفٍ مثل btn-primary)، وTailwind الذي يعطيك أصنافًا صغيرةً تركّب منها تصميمك (bg-blue-500 text-white py-2 px-4 rounded). لا تحتجها في بدايتك؛ أتقن CSS أوّلًا، فالأطر تُبنى عليها لا تُغني عنها.

وثمّة موضوعٌ كبيرٌ مرّ في هذا المقال دون تفصيل: «التصميم المتجاوب»، أي أن يتكيّف موقعك مع كل شاشةٍ من الهاتف إلى الحاسوب، عبر «استعلامات الوسائط» وأدوات التخطيط المرنة. وهو أهمّ من أن يُختصَر في فقرة، فأُفرد له المقال التالي بكامله.

تطبيق عمليّ: تصميم صفحتك

لنطبّق هذا على ملفّ index.html الذي بنيته في مقال HTML. أنشئ في مجلّده ملفًّا باسم style.css، واربطه في <head> بـ<link rel="stylesheet" href="style.css">، ثمّ الصق فيه:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  background-color: #f0f2f5;
  color: #333;
  margin: 0;
}

.container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 { text-align: center; color: #1a2a45; }

header nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}
header nav ul li { display: inline; margin: 0 15px; }
header nav ul li a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
}

article img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
  margin: 20px 0;
}

footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #eee;
  font-size: 0.9em;
  color: #888;
}

وللاستفادة من قاعدة .container التي تتوسّط المحتوى، لُفّ <div class="container"> حول عناصر <header> و<main> و<footer> في صفحتك. احفظ الملفّين، وإن كنت تستعمل Live Server فسترى التغيير فورًا: تحوّلت صفحتك الخام إلى صفحةٍ نظيفةٍ منظّمةٍ بصريًّا، بحاويةٍ متوسّطةٍ وظلٍّ ناعمٍ وزوايا دائرية. بسطورٍ قليلةٍ غيّرت مظهر الهيكل كلّه دون أن تمسّ محتواه.

كسوت الهيكل، فإلى كل الشاشات

تعلّمت أساسيات CSS: فلسفتها في فصل التصميم عن الهيكل، وتشريح قاعدتها ومحدِّداتها وحالاتها، والوحدات وأكثر الخصائص استعمالًا، ونموذج الصندوق، وأداتَي التخطيط الحديثتين Flexbox وGrid، والخصوصية والوراثة، وكيف تتحرّك مع جافاسكربت. ورأيت بعينك كيف تحوّل قواعد بسيطةٌ هيكلًا خامًا إلى صفحةٍ جميلة.

لكنّ صفحتك ما زالت تفترض شاشةً واحدة. والمستخدمون يأتون من هاتفٍ صغيرٍ وحاسوبٍ كبيرٍ ولوحٍ بينهما وشاشاتٍ لا تكاد تُحصى، وصفحتك يجب أن تليق بها جميعًا لا بشاشتك أنت وحدها. كيف تبني موقعًا يتكيّف مع كل شاشةٍ؟ هذا موضوع المقال التالي: «التصميم المتجاوب: موقعٌ يليق بكل شاشة».

المصادر

1. MDN: ما هي CSS. تعريف اللغة ودورها في عرض عناصر HTML.
2. W3C: عشرون عامًا من CSS. اقتراح هاكون ويم لي 1994 وبيرت بوس، وتوصية CSS1 سنة 1996 وCSS2 سنة 1998.
3. MDN: تخطيط CSS. Flexbox أحاديّ البُعد وGrid ثنائيّ البُعد وخاصية position.
4. MDN: الخصوصية والانسياب. كيف يرجّح المتصفّح بين القواعد المتعارضة.