ما هي CSS؟
CSS (Cascading Style Sheets، أي أوراق الأنماط المتتالية) هي اللغة التي تمنح صفحات الويب شكلها. فلغة HTML تقول ما هو كل جزء من المحتوى، أما CSS فتقرر كيف يبدو وأين يقع: الألوان والخطوط والمسافات والتخطيط والانتقالات. اقترحها Håkon Wium Lie في عام 1994، وأصبح مستواها الأول توصية رسمية من W3C في عام 1996، وتطوّرها اليوم مجموعة عمل CSS في W3C بمشاركة صانعي المتصفحات.
ورقة الأنماط قائمة من القواعد: يختار المحدِّد (selector) العناصر، وتضبط التصريحات خصائصها. وتشير كلمة «المتتالية» إلى الترتيب الواضح الذي يحدد القاعدة الغالبة حين تنطبق عدة قواعد على العنصر نفسه. ويرتّب Flexbox وgrid المحتوى في صفوف وأعمدة ومناطق، وتكيّف استعلامات الوسائط واستعلامات الحاوية (container queries) التخطيط مع الشاشة أو مع المساحة المتاحة للمكوّن، بينما تحفظ الخصائص المخصصة، أي متغيرات CSS، ألوان نظام التصميم ومقاساته في مكان واحد.
لن تجد مواصفة واحدة باسم «CSS3» أو «CSS4»: فقد كانت CSS 2.1 آخر نسخة كُتبت في وثيقة واحدة، ومنذ ذلك الحين تنمو اللغة في وحدات منفصلة مثل Selectors وGrid وColor، تتقدم كل منها بوتيرتها الخاصة. وCSS معيار مفتوح ومجاني تدعمه كل المتصفحات. ومع إضافات حديثة مثل استعلامات الحاوية ومحدِّد has الذي ينسّق العنصر بحسب ما يحتويه، باتت CSS تنجز مهام كانت تتطلب JavaScript في السابق.
أين نستخدم CSS
يُنسَّق كل موقع نبنيه بشيفرة CSS مكتوبة لعلامته التجارية، لا مستعارة من قالب جاهز ثقيل. ونعتمد عليها أكثر ما نعتمد في:
تخطيطات لكل الشاشات
بفضل grid وflexbox واستعلامات الحاوية يعيد كل قسم ترتيب نفسه بشكل منطقي من شاشة الهاتف الضيقة إلى الشاشة العريضة، دون نسختين منفصلتين للهاتف والحاسوب تحتاجان إلى صيانة.
نظام تصميمك في الشيفرة
تتحول الألوان ومقاسات الخطوط والمسافات في تصميمك على Figma إلى خصائص مخصصة، فيكفي تعديل واحد في مكان واحد لتحديث الموقع كله، وتبقى كل صفحة منسجمة مع علامتك التجارية.
الوضعان الفاتح والداكن
يمكننا أن نتبع إعداد جهاز الزائر عبر استعلام الوسائط prefers-color-scheme، ونضيف زر تبديل إن أردت. ويستخدم طقما الألوان المتغيرات نفسها، فيبقى النص مقروءًا في الوضعين.
العربية من اليمين إلى اليسار
تصف الخصائص المنطقية (logical properties) المسافات والمحاذاة بـ«البداية» و«النهاية» بدلًا من اليسار واليمين، فتنعكس النسخة العربية انعكاسًا صحيحًا من ملف الأنماط نفسه.
لماذا CSS؟
صفحات أسرع وJavaScript أقل
تتولى CSS الحديثة التخطيط والانتقالات وكثيرًا من حالات التفاعل بنفسها. وكل سكربت نستغني عنه ملف لا يحتاج المتصفح إلى تنزيله وتشغيله، فتستجيب الصفحات بسرعة على الهواتف أيضًا.
اتساق يدوم
تُحفظ الأنماط في مكان واحد وتتبع نظام تصميمك، فتبدو الصفحات الجديدة والتحديثات اللاحقة جزءًا من العلامة التجارية نفسها.
الراحة وسهولة الوصول
نحدد أحجام النصوص بوحدات نسبية لتكبر مع إعدادات متصفح الزائر، ونُبقي إطار التركيز ظاهرًا لمستخدمي لوحة المفاتيح، ونحترم خيار «تقليل الحركة».
كيف نعمل على مشروعك
ننطلق من التصميم المعتمد في Figma: تتحول الألوان وسلّم الخطوط والمسافات والمكوّنات أولًا إلى متغيرات وأنماط مشتركة. ثم نبني كل تخطيط بدءًا من الهاتف، ونضيف الشاشات الأعرض والنسخة العربية من اليمين إلى اليسار والوضع الداكن خطوة بخطوة، ونفحص كل مكوّن في جميع حالاته.
قبل الإطلاق نختبر الموقع على هواتف حقيقية وفي Safari وChrome وFirefox، ونتحقق من تباين الألوان ومن وضوح التركيز عند التنقل بلوحة المفاتيح، ونحذف الأنماط غير المستخدمة. ونقيس السرعة وثبات التخطيط عبر PageSpeed Insights وLighthouse، فلا يقفز شيء من مكانه أثناء تحميل الصفحة.
