تعرف على CSS

تتيح لك اللغة التوصيفية CSS -اختصارًا للتنسيقات الانسيابية Cascading style sheets- إضفاء مظهر رائع على صفحات الويب، فكيف تفعل ذلك خلف الستار؟ إذ يشرح لك هذا المقال ماهية اللغة من خلال أمثلة بسيطة عن صياغتها، كما يعرّف بعض المصطلحات المتعلقة بهذه اللغة.

ننصحك قبل المتابعة في قراءة هذا المقال أن:

تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
تطلع على المقال تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
تطلع على أساسيات HTML كما شرحناها ضمن سلسلة المقالات مدخل إلى HTML.

ستظهر العناوين بحجم أكبر من النص العادي وتنفصل الفقرات وتباعد بينها فراغات عندما توصَّف نصًا أو محتوًى عمومًا باستخدام لغة HTML، كما ستلوَّن الروابط أيضًا ويظهر خط أسفلها لتمييزها عن النص المحيط، وإنّ ما تراه في الواقع هو التنسيق الافتراضي الذي يطبقه المتصفح، وهو تنسيق بسيط يُطبّق على ملفات HTML لتسهيل قراءتها حتى إذا لم يخصص مؤلف الصفحة أية تنسيقات صراحةً.

لن تنبض صفحات ويب بالحيوية إذا اكتفينا بهذه التنسيقات البسيطة، لذلك وجدت CSS لتساعد في التحكم بمظهر عناصر HTML عندما تُعرض على المتصفح، وبالتالي ستقدِّم المحتوى الذي تريد بالمظهر الذي تريد.

استخدامات CSS

أشرنا سابقًا إلى أنّ CSS هي لغة توصيف للطريقة التي تظهر بها المستندات للمستخدِم، ونقصد بالمستند عادةً أنه ملف نصي جرت هيكلته باستخدام إحدى لغات التوصيف وأكثرها شيوعًا لغة HTML، فقد تصادف لغات توصيف أخرى مثل XML أو SVG.

تُعرض هذه المستندات للمستخدِم بتحويلها إلى شكل سهل القراءة بواسطة المتصفحات مثل Firefox أو Chrome أو Edge التي صُممت خصيصًا لهذه الغاية سواء على شاشات الحواسيب أو أجهزة الإسقاط أو الأجهزة الذكية.

ملاحظة: يُدعى المتصفح أحيانًا باسم "عميل المستخدِم" ويعني ببساطة أنه برنامج يمثل المستخدِم داخل نظام التشغيل، ولهذا فالمتصفحات هي النوع الرئيسي من العملاء الذي نقصده عندما نتكلم عن CSS، وطبعًا ليس النوع الوحيد، إذ ستجد مثلًا برامج عميلة أخرى مثل تحول ملفات HTML و CSS إلى ملفات PDF لتسهيل طباعتها.

يمكنك استخدام CSS لتنسيق أبسط مظاهر النص مثل اللون وحجم خط الكتابة، كما تستخدَم لإنشاء تخطيط مثل تحويل أحد أعمدة النص إلى تخطيط مكوّن من منطقة للمحتوى الرئيسي ومنطقة جانبية تضم معلومات تتعلق بهذا المحتوى، ويمكنك أيضًا استخدام اللغة لإضافة تأثيرات مثل تحريك المحتوى (الرسوم المتحركة).

صيغة CSS

تُبنى لغة CSS على قواعد تعرّف مجموعة من التنسيقات التي يمكن تطبيقها على عنصر أو مجموعة عناصر محددة موجودة في صفحة HTML، فقد ترغب مثلًا بعرض العنوان الرئيسي للصفحة على أساس نص أحمر كبير، ولتنجز الأمر لاحظ شيفرة CSS البسيطة التالية:

h1 {
    color: red;
    font-size: 5em;
}

تبدأ القاعدة بتسمية "مُحدِّد Selector" مهمته تحديد عنصر HTML الذي سيخضع للتنسيق، وهذا العنصر هو <h1> في مثالنا السابق، ويلي اسم المحدد قوسين معقوصين { } نضع ضمنهما مجموعة من التصريحات Declarations التي تأخذ صورة زوج (خاصية: قيمة)، إذ يعرِّف كل زوج خاصيةً لتنسيق العنصر أو العناصر المحددة ثم يسند إليها القيمة المطلوبة، وتأتي دائمًا نقطتين متعامدين بعد الخاصية تليها القيمة، وقد تأخذ الخاصية قيمًا مختلفةً وفقًا لطبيعتها، فقد تأخذ الخاصية color في مثالنا مجموعةً متنوعةً من القيم، كما تأخذ الخاصية font-size أيضًا قيمًا لها وحدات قياس مختلفة.

تضم صفحة تنسيقات CSS قواعد كثيرة تأتي واحدة تلو الأخرى مثل:

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

ستتذكر بسرعة بعض القيم وتستخدمها بينما ستضطر إلى البحث عن أخرى. قد تساعدك العديد من المواقع على الإنترنت في إيجاد هذه القيم سريعًا مثل موسوعة حسوب أو شبكة مطورِي موزيللا.

ملاحظة: يمكنك العثور على كل خاصيات CSS في توثيق CSS العربي في موسوعة حسوب فاجعله تحت يدك لأنك سترجع له مرارًا وتكرارًا.

وحدات CSS

قُسّمت اللغة إلى عدة وحدات لتنظيم العدد الكبير من الخصائص التي يمكن استخدامها في تنسيق العناصر، فقد تجد مثلًا أنّ الخصائص المتعلقة بالخلفيات في موسوعة حسوب في وحدة مستقلة وكذلك الإطارات وهكذا.

لا تكترث كثيرًا في هذه المرحلة لفهم هيكلية CSS، لكن من السهل إيجاد المعلومات إذا اتبعت مثلًا فكرة إمكانية وجود ما تبحث عنه ضمن الأشياء المشابهة له، وبالتالي في المواصفة نفسها CSS specification، فقد تتوقع على سبيل المثال، وجود الخاصية background-color في وحدة "الخلفيات" والخاصية border-color في وحدة "الإطارات".

مواصفات CSS

تُعرَّف جميع تقانات الويب مثل جافاسكربت، HTML، CSS، وغيرها ضمن مجلدات ضخمة تدعى بالمواصفات Spesification أو "specs" اختصارًا، والتي تنشرها منظمات تحديد المعايير مثل W3C أو WHATWG أو ECMA أو Khronos.

تحدد هذه المواصفات الطريقة الدقيقة التي تُستخدَم فيها هذه التقانات، ولا تختلف CSS عن غيرها في هذا الصدد، فقد طورتها مجموعة من W3C تُدعى "مجموعة عمل CSS" تضم ممثلين عن مصنِّعي المتصفحات وغيرها من الشركات التي تهتم بهذه التقانة بالإضافة إلى خبراء حياديين لا ينتمون إلى أيّ منظمة أو شركة.

تطوّر المجموعة خصائص CSS الجديدة أو تحدد مواصفاتها، وقد يكون السبب هو رغبة متصفح محدد بامتلاك إمكانات معينة أو لحاجة المطورين والمصممين إلى توصيف لبعض الميزات أو أن تجد المجموعة نفسها ضرورةً لتحديد متطلبات معينة، كما تطوَّر اللغة باستمرار وتضاف إليها ميزات جديدة، لكن الأمر الأساسي هو عدم تغيير الأمور بطريقة تؤثر على مواقع ويب القديمة، فالمواقع التي بُنيت عام 2000 بتقنيات CSS محدودة لا بدّ أن تبقى قابلةً للاستخدام في متصفحات اليوم.

من الطبيعي بوصفك مبتدئًا أن تجد مواصفات CSS مرهقة، فهي مخصصة للمهندسين كي يستخدمونها في دعم ميزات في البرمجيات العميلة للمستخدِم وليس لتُقرأ من قبل مطورِي ويب لفهم CSS، إذ يفضِّل الكثير من المطورِين المحترفين قراءة توثيقات أكثر وضوحًا مثل توثيقات "شبكة مطوري موزيللا" أو توثيقات "موسوعة حسوب" الموجهة للقارئ العربي، لكن لا بدّ أن تعرف أنها موجودة وأن تفهم العلاقة بين خصائص CSS التي تستخدمها وبين دعم المتصفح لها والمواصفات.

معلومات عن دعم المتصفحات لميزات CSS

عندما تعتمد مجموعة CSS ميزةً جديدةً ستتمكن من استخدامها في صفحاتك حالما يدعمها متصفح، أي حالما تُكتب الشيفرة اللازمة للمتصفح لتحويل التعليمات المتعلقة بهذه الميزة إلى شيء ملموس على الشاشة، وسنطلع أكثر على ذلك في مقال "آلية عمل CSS".

لا تدعم معظم المتصفحات الميزات الجديدة في الوقت نفسه عادةً، لهذا ستجد فجوةً في استخدام هذه الميزات بين متصفح وآخر، ولهذا من المهم جدًا أن تتحقق من دعم المتصفحات لميزة قبل استخدامها.

نعرض مثلًا في الشكل التالي دعم بعض المتصفحات للخاصيتين font-family و system-ui.

الخاتمة

كونت الآن فكرة عن ماهية لغة CSS واستخداماتها وأهم خصائصها ومواصفاتها، وأصبحت جاهزًا للانطلاق مع هذه اللغة وتعلمها، لذا انتقل الآن إلى المقال التالي أساسيات استخدام CSS. ترجمة -وبتصرُّف- للمقال What is CSS