مقدمة في CSS3 وكيف تعمل أوراق الأنماط

ما هو CSS؟

CSS هو اختصار لـ Cascading Style Sheets (أوراق الأنماط المتتالية). وهي اللغة التي تتحكم في العرض المرئي لصفحات الويب -- كل شيء من الألوان والخطوط إلى التخطيط والمسافات والرسوم المتحركة والسلوك المتجاوب. بينما يوفر HTML البنية والمحتوى لصفحة الويب، فإن CSS مسؤول عن جعل هذا المحتوى يبدو جيدا. بدون CSS، سيبدو كل موقع ويب كمستند نصي عادي بتنسيق المتصفح الافتراضي -- نص أسود على خلفية بيضاء بخط Times New Roman.

كلمة المتتالية (Cascading) هي المفتاح لفهم CSS. وهي تشير إلى الطريقة التي تتدفق بها الأنماط عبر تسلسل هرمي من القواعد. عندما تنطبق قواعد CSS متعددة على نفس العنصر، يتبع المتصفح مجموعة محددة من القواعد لتحديد أي نمط يفوز. هذا السلوك المتتالي يمنح CSS قوته ومرونته، لكنه قد يكون أيضا مصدر حيرة للمبتدئين. سنستكشف التتالي بالتفصيل في درس لاحق.

CSS ليست لغة برمجة -- فهي لا تحتوي على متغيرات بالمعنى التقليدي (رغم وجود خصائص CSS المخصصة)، ولا تحتوي على حلقات تكرار، ولا تجري حسابات (رغم وجود calc() للحسابات البسيطة). CSS هي لغة أوراق أنماط تصريحية. أنت تعلن كيف يجب أن تبدو العناصر، والمتصفح يحدد كيفية عرضها.

لماذا توجد CSS؟

في الأيام الأولى للويب (أوائل التسعينيات)، لم تكن CSS موجودة. كان كل التنسيق المرئي يتم مباشرة داخل HTML باستخدام السمات والوسوم. تريد نصا أحمر؟ كنت تكتب <font color="red">. تريد نصا في المنتصف؟ كنت تستخدم <center>. تريد لون خلفية لخلية جدول؟ كنت تضيف bgcolor="yellow" إلى وسم <td>.

هذا النهج كان يعاني من مشاكل ضخمة:

• تكرار الكود -- إذا أردت أن تكون جميع العناوين زرقاء، كان عليك إضافة color="blue" إلى كل وسم عنوان في كل صفحة.
• كابوس الصيانة -- تغيير نظام ألوان الموقع كان يعني تعديل مئات أو آلاف ملفات HTML.
• HTML منتفخ -- خلط العرض مع البنية جعل ملفات HTML كبيرة وصعبة القراءة.
• عدم الاتساق -- كان من السهل أن يكون لديك تنسيق مختلف قليلا على صفحات مختلفة بالخطأ.
• مشاكل الوصولية -- قارئات الشاشة والتقنيات المساعدة كانت تواجه صعوبة في تحليل المحتوى المزدحم بتوصيف العرض.

تم إنشاء CSS لحل كل هذه المشاكل من خلال تقديم مفهوم فصل الاهتمامات -- إبقاء البنية (HTML) منفصلة عن العرض (CSS). يظل هذا المبدأ أحد أهم أسس تطوير الويب الحديث.

تاريخ CSS: من CSS1 إلى CSS3

فهم تاريخ CSS يساعدك على تقدير لماذا توجد ميزات معينة ولماذا تعمل CSS بالطريقة التي تعمل بها اليوم.

CSS1 (1996)

نشر الإصدار الأول من CSS كتوصية من W3C في ديسمبر 1996. تم إنشاؤه بواسطة هاكون فيوم لي و بيرت بوس. قدم CSS1 إمكانيات تنسيق أساسية:

• خصائص الخطوط (العائلة، الحجم، الوزن، النمط)
• خصائص النص (اللون، المحاذاة، الزخرفة، التباعد)
• أساسيات نموذج الصندوق (الهوامش، الحشو، الحدود)
• ألوان وصور الخلفية
• المحددات الأساسية (العنصر، الفئة، المعرف)

كان دعم المتصفحات غير متسق ومليئا بالأخطاء. كان Internet Explorer 3 أول متصفح ينفذ دعم CSS (جزئيا)، تلاه Netscape Navigator 4. التناقضات بين المتصفحات خلال تلك الحقبة أسطورية -- ما كان يبدو مثاليا في متصفح واحد قد يكون معطلا تماما في متصفح آخر.

CSS2 و CSS2.1 (1998-2011)

نشر CSS2 في عام 1998 وأضاف ميزات جديدة مهمة:

• تحديد الموقع (position: absolute، relative، fixed)
• Z-index لترتيب طبقات العناصر
• أنواع الوسائط (شاشة، طباعة، إلخ)
• محددات جديدة (محدد الابن، الشقيق المجاور، محددات السمات)
• المحتوى المولد باستخدام ::before و ::after
• خصائص تخطيط الجداول

CSS2.1 كان إصدارا منقحا أزال الميزات ضعيفة الدعم ووضح المواصفات. أصبح توصية من W3C في عام 2011 بعد سنوات من التنقيح. مثل CSS2.1 القاعدة المستقرة التي اتفقت عليها جميع المتصفحات الرئيسية.

CSS3 (2011 حتى الآن)

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

الوحدات والميزات الرئيسية التي قدمها CSS3 تشمل:

• المحددات المستوى 3 -- :nth-child()، :not()، محددات السلاسل الفرعية للسمات
• الخلفيات والحدود -- border-radius، box-shadow، خلفيات متعددة، background-size
• وحدة الألوان -- rgba()، hsla()، opacity
• الانتقالات -- رسوم متحركة سلسة بين الحالات
• الرسوم المتحركة -- رسوم متحركة قائمة على الإطارات المفتاحية
• التحويلات -- rotate()، scale()، translate()، تحويلات ثلاثية الأبعاد
• Flexbox -- نظام تخطيط أحادي البعد قوي
• Grid Layout -- نظام تخطيط ثنائي الأبعاد
• استعلامات الوسائط -- نقاط توقف التصميم المتجاوب
• خطوط الويب -- @font-face للطباعة المخصصة
• الخصائص المخصصة -- متغيرات CSS بصيغة --variable-name
• المرشحات -- blur()، grayscale()، drop-shadow()

كيف تعمل CSS مع HTML: فصل الاهتمامات

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

• HTML -- البنية والمحتوى (ما هي الأشياء)
• CSS -- العرض والتخطيط (كيف تبدو الأشياء)
• JavaScript -- السلوك والتفاعل (كيف تتصرف الأشياء)

عندما تبقي هذه الاهتمامات منفصلة، تحصل على عدة مزايا:

• إعادة الاستخدام -- ملف CSS واحد يمكنه تنسيق آلاف صفحات HTML. غير CSS مرة واحدة، وكل صفحة تتحدث.
• سهولة الصيانة -- يمكن للمصممين تعديل الأنماط دون لمس HTML. يمكن للمطورين تغيير HTML دون كسر الأنماط.
• الأداء -- ملفات CSS يتم تخزينها مؤقتا بواسطة المتصفح. بعد التحميل الأول، لا يحتاج ملف الأنماط إلى التنزيل مرة أخرى.
• الوصولية -- HTML نظيف مع CSS خارجي أسهل لقارئات الشاشة والتقنيات المساعدة في التفسير.
• التعاون الجماعي -- يمكن لأعضاء الفريق المختلفين العمل على HTML و CSS في وقت واحد دون تعارضات.

<h1><font color="blue" size="7" face="Arial">موقعي</font></h1>
<p><font color="#333333" size="3" face="Georgia">
  مرحبا بكم في موقعي. هذا النص منسق مباشرة.
</font></p>
<table bgcolor="yellow" border="1" cellpadding="10">
  <tr>
    <td><font color="red">خلية 1</font></td>
    <td><font color="green">خلية 2</font></td>
  </tr>
</table>

<!-- ملف HTML (البنية فقط) -->
<h1>موقعي</h1>
<p>مرحبا بكم في موقعي. هذا النص منسق بـ CSS.</p>
<table class="data-table">
  <tr>
    <td class="highlight">خلية 1</td>
    <td class="success">خلية 2</td>
  </tr>
</table>

<!-- ملف CSS (العرض فقط) -->
<style>
h1 {
    color: blue;
    font-size: 2.5em;
    font-family: Arial, sans-serif;
}
p {
    color: #333333;
    font-size: 1em;
    font-family: Georgia, serif;
}
.data-table {
    background-color: yellow;
    border: 1px solid #000;
    border-collapse: collapse;
}
.data-table td {
    padding: 10px;
}
.highlight { color: red; }
.success { color: green; }
</style>

كيف يحلل المتصفح CSS: نموذج CSSOM

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

الخطوة 1: بناء DOM

أولا، يحلل المتصفح HTML ويبني DOM (نموذج كائن المستند). DOM هو تمثيل شجري لمستند HTML. كل عنصر HTML يصبح عقدة في الشجرة، مع علاقات أب-ابن تطابق تداخل وسوم HTML.

<!-- هذا HTML: -->
<html>
  <head>
    <title>صفحتي</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>مرحبا بالعالم</h1>
    <p>فقرة مع <strong>نص عريض</strong>.</p>
  </body>
</html>

<!-- يصبح شجرة DOM هذه: -->
Document
  └── html
       ├── head
       │    ├── title
       │    │    └── "صفحتي"
       │    └── link
       └── body
            ├── h1
            │    └── "مرحبا بالعالم"
            └── p
                 ├── "فقرة مع "
                 ├── strong
                 │    └── "نص عريض"
                 └── "."

الخطوة 2: بناء CSSOM

في نفس الوقت (أو بعده بقليل)، يحلل المتصفح جميع CSS ويبني CSSOM (نموذج كائن CSS). CSSOM مشابه لـ DOM لكنه للأنماط. يمثل جميع قواعد CSS في بنية شجرية تعكس بنية المستند. كل عقدة في CSSOM تحتوي على الأنماط المحسوبة للعنصر DOM المقابل.

يقرأ المتصفح CSS من مصادر متعددة ويجمعها:

1. ورقة أنماط وكيل المستخدم -- أنماط المتصفح الافتراضية (مثلا، العناوين عريضة، الروابط زرقاء ومسطرة).
2. ورقة أنماط المستخدم -- أنماط مخصصة يضعها المستخدم في إعدادات المتصفح (نادرة اليوم).
3. ورقة أنماط المؤلف -- ملفات CSS الخاصة بك، الأنماط المضمنة، ووسوم <style>.

/* يقرأ المتصفح هذه القواعد: */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

h1 {
    font-size: 2em;
    color: navy;
    margin-bottom: 20px;
}

p {
    line-height: 1.6;
    margin-bottom: 15px;
}

/* ويبني شجرة CSSOM:
   body
     font-family: Arial, sans-serif
     font-size: 16px
     color: #333
     ├── h1
     │    font-size: 2em (محسوبة: 32px)
     │    color: navy
     │    margin-bottom: 20px
     │    (يرث font-family من body)
     └── p
          line-height: 1.6
          margin-bottom: 15px
          (يرث font-family، font-size، color من body)
*/

الخطوة 3: شجرة العرض

ثم يجمع المتصفح DOM و CSSOM لإنشاء شجرة العرض (Render Tree). تحتوي شجرة العرض فقط على العناصر التي ستعرض فعليا على الشاشة. العناصر ذات display: none تستبعد من شجرة العرض تماما (لكن العناصر ذات visibility: hidden تبقى في شجرة العرض -- فقط تشغل مساحة دون أن تكون مرئية).

الخطوة 4: التخطيط (إعادة التدفق)

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

الخطوة 5: الرسم

أخيرا، يرسم المتصفح كل عنصر بكسل ببكسل على الشاشة. يشمل ذلك ملء الألوان، عرض النص، رسم الحدود، تطبيق الظلال، وتركيب الطبقات. هذه هي خطوة الرسم (أو التنقيط).

الخطوة 6: التركيب

للعناصر الموجودة على طبقات منفصلة (بسبب التحويلات أو الشفافية أو z-index)، يركبها المتصفح معا بالترتيب الصحيح. هذه هي خطوة التركيب.

خط أنابيب العرض الكامل

إليك خط أنابيب العرض الكامل بالترتيب:

1. تحليل HTML -- بناء شجرة DOM
2. تحليل CSS -- بناء شجرة CSSOM
3. الدمج -- دمج DOM + CSSOM في شجرة العرض
4. التخطيط -- حساب الهندسة (الموضع، الحجم) لكل عنصر
5. الرسم -- ملء البكسلات (الألوان، النص، الصور، الحدود)
6. التركيب -- تجميع طبقات التركيب المنفصلة معا

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

مستند HTML            ورقة أنماط CSS
      │                       │
      ▼                       ▼
  شجرة DOM              شجرة CSSOM
      │                       │
      └───────┬───────────────┘
              ▼
         شجرة العرض
              │
              ▼
           التخطيط
      (حساب المواضع)
              │
              ▼
            الرسم
       (ملء البكسلات)
              │
              ▼
          التركيب
      (دمج الطبقات)
              │
              ▼
     بكسلات على الشاشة

CSS تحجب العرض

مفهوم مهم يجب فهمه هو أن CSS تحجب العرض. هذا يعني أن المتصفح لن يعرض أي محتوى على الشاشة حتى ينتهي من تنزيل وتحليل جميع ملفات CSS. السبب بسيط -- يحتاج المتصفح إلى معرفة الأنماط قبل أن يتمكن من تخطيط ورسم العناصر. إذا عرض المحتوى قبل تحميل CSS، سترى وميضا من المحتوى غير المنسق (FOUC) يتبعه إعادة عرض مزعجة عند تطبيق الأنماط.

لهذا آثار عملية:

• اجعل ملفات CSS صغيرة قدر الإمكان لعرض أولي أسرع.
• ضع وسوم <link> لـ CSS في <head> من المستند حتى يكتشفها المتصفح مبكرا.
• فكر في استخدام CSS الحرجة (تضمين الأنماط الأساسية) للمحتوى فوق الطية.
• تجنب عبارات @import غير الضرورية في CSS، لأنها تنشئ رحلات ذهاب وإياب إضافية إلى الخادم.

أدوات المطور لفحص CSS

كل متصفح حديث يأتي مع أدوات مطور قوية تتيح لك فحص وتعديل وتصحيح CSS في الوقت الفعلي. تعلم استخدام هذه الأدوات بنفس أهمية تعلم CSS نفسها.

فتح أدوات المطور

• Chrome / Edge -- اضغط F12 أو Ctrl+Shift+I (ويندوز/لينكس) أو Cmd+Option+I (ماك)
• Firefox -- اضغط F12 أو Ctrl+Shift+I (ويندوز/لينكس) أو Cmd+Option+I (ماك)
• Safari -- اضغط Cmd+Option+I (يجب أولا تمكين قائمة التطوير في التفضيلات > متقدم)

اللوحات الرئيسية لعمل CSS

• لوحة العناصر / المفتش -- تعرض شجرة DOM. انقر على أي عنصر لرؤية قواعد CSS المطبقة عليه في لوحة الأنماط الفرعية.
• لوحة الأنماط الفرعية -- تعرض جميع قواعد CSS المطبقة على العنصر المحدد، مرتبة حسب الخصوصية. يمكنك تعديل الأنماط مباشرة.
• تبويب المحسوب -- يعرض القيم المحسوبة النهائية بعد حل التتالي. هذا ما يستخدمه المتصفح فعليا.
• تصور نموذج الصندوق -- يعرض محتوى العنصر وحشوه وحدوده وهامشه كرسم بياني مرئي.
• تبويب التخطيط -- يساعد في تصور تخطيطات Grid و Flexbox مع أدلة التراكب.

1. انقر بزر الماوس الأيمن على أي عنصر في صفحة ويب
2. اختر "فحص" أو "فحص العنصر"
3. ستفتح أدوات المطور مع تمييز ذلك العنصر
4. في لوحة الأنماط على اليمين، سترى:
   - جميع قواعد CSS المطبقة على ذلك العنصر
   - من أي ملف تأتي كل قاعدة
   - أي القواعد تم تجاوزها (تظهر بخط يتوسطه)
   - القدرة على تبديل الخصائص بمربعات الاختيار
   - القدرة على تعديل القيم بالنقر عليها

5. جرب تغيير قيمة لون:
   - انقر على قيمة اللون بجانب "color:"
   - اكتب اسم لون جديد مثل "red"
   - شاهد الصفحة تتحدث فورا

6. جرب إضافة خاصية جديدة:
   - انقر في منطقة فارغة داخل قاعدة
   - اكتب خاصية جديدة مثل "border: 2px solid red"
   - اضغط Enter للتطبيق

ميزات مفيدة في أدوات المطور لـ CSS

• فرض حالة العنصر -- يمكنك فرض عنصر في حالة :hover أو :active أو :focus أو :visited لفحص الأنماط التي تظهر فقط أثناء التفاعل.
• منتقي الألوان -- انقر على أي عينة لون في لوحة الأنماط لفتح منتقي ألوان مرئي.
• تبديل خصائص CSS -- ألغ تحديد مربع الاختيار بجانب أي خاصية لتعطيلها مؤقتا ورؤية تأثيرها.
• تصفية الأنماط -- استخدم مربع التصفية في لوحة الأنماط للبحث عن خصائص محددة.
• شريط أدوات الأجهزة -- بدل وضع التصميم المتجاوب لرؤية كيف يبدو CSS على أحجام شاشات مختلفة.

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; background: #f0f0f0; }
        .box { width: 200px; padding: 20px; margin: 20px auto;
               background: white; border: 2px solid #333; }
        .box h2 { color: darkblue; }
        .hidden { display: none; }
        .invisible { visibility: hidden; }
    </style>
</head>
<body>
    <div class="box"><h2>صندوق مرئي</h2><p>هذا مرئي.</p></div>
    <div class="box hidden"><h2>صندوق مخفي</h2><p>display: none</p></div>
    <div class="box invisible"><h2>صندوق غير مرئي</h2><p>visibility: hidden</p></div>
</body>
</html>