من أكثر لغات البرمجة المستخدمة في تصميم صفحات الويب هي لغة البرمجة CSS، فما هي هذه اللغة؟ ولماذا يتم استخدامها؟
تتكون مواقع الويب من عدد من القطع المنفصلة، بما في ذلك الصور والنصوص والمستندات المختلفة.
لا تتضمن هذه المستندات فقط تلك التي قد تكون مرتبطة من صفحات مختلفة، مثل ملفات PDF. ولكن أيضًا المستندات المستخدمة لإنشاء الصفحات نفسها، مثل مستندات HTML لتحديد بنية الصفحة ووثائق CSS (ورقة الأنماط المتتالية) لإملاء مظهر الصفحة.
ستتعمق هذه المقالة في CSS، وتغطي ماهيتها وأين يتم استخدامها على مواقع الويب اليوم.
تاريخ لغة البرمجة CSS.
تم تطوير CSS لأول مرة في عام 1997 كطريقة لمطوري الويب لتحديد المظهر المرئي لصفحات الويب التي كانوا يقومون بإنشائها.
كان القصد من ذلك السماح لمحترفي الويب بفصل محتوى وهيكل رمز موقع الويب عن التصميم المرئي، وهو أمر لم يكن ممكنًا قبل هذا الوقت.
يسمح الفصل بين الهيكل والأسلوب لـ HTML بأداء المزيد من الوظائف التي كانت تستند إليها في الأصل – ترميز المحتوى. دون الحاجة إلى القلق بشأن تصميم الصفحة نفسها وتخطيطها، وهو ما يُعرف عمومًا باسم “الشكل والمظهر” من الصفحة.
تطور لغة البرمجة CSS.
لم تكتسب CSS شعبية حتى عام 2000 تقريبًا عندما بدأت متصفحات الويب في استخدام أكثر من الجوانب الأساسية للخط واللون في لغة البرمجة هذه.
اليوم، تدعم جميع المتصفحات الحديثة جميع CSS المستوى 1، ومعظم CSS المستوى 2، وحتى معظم جوانب CSS المستوى 3.
مع استمرار تطور CSS وإدخال أنماط جديدة، بدأت متصفحات الويب في تنفيذ الوحدات التي تجلب دعم CSS جديدًا في تلك المتصفحات ومنح مصممي الويب أدوات تصميم جديدة قوية للعمل معها.
في العديد من السنوات الماضية، كان هناك مصمموا الويب يرفضون استخدام CSS لتصميم وتطوير مواقع الويب، لكن هذه الممارسة لم تعد موجودة في البرمجة اليوم.
يعد CSS الآن معيارًا مستخدمًا على نطاق واسع في تصميم الويب، وستتعرض لضغوط شديدة للعثور على أي شخص يعمل في الصناعة اليوم لم يكن لديه على الأقل فهم أساسي لهذه اللغة.
CSS هو اختصار.
كما ذكرنا سابقًا ، يشير المصطلح CSS إلى (Cascading Style Sheet) أو “ورقة الأنماط المتتالية”.
دعنا نقسم هذه العبارة قليلاً لشرح بشكل كامل ما تفعله هذه المستندات. تشير كلمة “ورقة الأنماط” إلى المستند نفسه (مثل ملفات HTML و CSS هي في الحقيقة مجرد مستندات نصية يمكن تحريرها باستخدام مجموعة متنوعة من البرامج).
تم استخدام أوراق الأنماط لتصميم المستندات لسنوات عديدة. هي المواصفات الفنية للتخطيط، سواء كانت مطبوعة أو عبر الإنترنت.
لطالما استخدم مصمموا الطباعة أوراق الأنماط لضمان طباعة تصميماتهم وفقًا لمواصفاتهم تمامًا. تخدم ورقة الأنماط الخاصة بصفحة الويب نفس الغرض. ولكن مع الوظيفة الإضافية لإخبار متصفح الويب أيضًا بكيفية عرض المستند الذي يتم عرضه.
اليوم، يمكن لأوراق أنماط CSS أيضًا استخدام استعلامات الوسائط لتغيير الطريقة التي تبحث بها الصفحة عن الأجهزة المختلفة وأحجام الشاشات.
هذا مهم للغاية لأنه يسمح بعرض مستند HTML واحد بشكل مختلف وفقًا للشاشة المستخدمة للوصول إليه.
Cascade هو الجزء الخاص حقًا من مصطلح “ورقة الأنماط المتتالية”. تهدف ورقة أنماط الويب إلى التسلسل عبر سلسلة من الأنماط في تلك الورقة، مثل نهر فوق شلال.
تصطدم المياه في النهر بجميع الصخور في الشلال، لكن الصخور الموجودة في القاع فقط هي التي تؤثر بالضبط على مكان تدفق المياه. وينطبق الشيء نفسه على التتالي في أوراق أنماط مواقع الويب.
إقرأ أيضاً… دليل المبتدئين في برمجة وتطوير مواقع الويب.
CSS الخاص بالمصمم يتجاوز CSS الخاص بالمتصفح.
تتأثر كل صفحة ويب بورقة أنماط واحدة على الأقل، حتى إذا كان مصمم الويب لا يطبق أي أنماط. ورقة الأنماط هذه هي ورقة أنماط وكيل المستخدم – تُعرف أيضًا بالأنماط الافتراضية التي سيستخدمها متصفح الويب لعرض صفحة إذا لم يتم توفير إرشادات أخرى.
على سبيل المثال، يتم تحديد نمط الارتباطات التشعبية افتراضيًا باللون الأزرق ويتم تسطيرها. تأتي هذه الأنماط من ورقة الأنماط الافتراضية لمتصفح الويب.
ومع ذلك، إذا قدم مصمم الويب إرشادات أخرى، فسيحتاج المستعرض إلى معرفة الإرشادات التي لها الأسبقية.
تحتوي جميع المتصفحات على أنماطها الافتراضية الخاصة، ولكن تتم مشاركة العديد من هذه الإعدادات الافتراضية (مثل روابط النص المسطر باللون الأزرق) عبر جميع أو معظم المتصفحات والإصدارات الرئيسية.
للحصول على مثال آخر لمتصفح افتراضي، في متصفح الويب الخاص بنا، الخط الافتراضي هو “Times New Roman” معروض بحجم 16.
ومع ذلك، لا توجد أي صفحة تقريبًا نزورها في مجموعة الخطوط وحجمها. هذا لأن التسلسل يحدد أن أوراق الأنماط الثانية، والتي تم تعيينها من قبل المصممين أنفسهم، لإعادة تعريف حجم الخط وعائلته، لتجاوز الإعدادات الافتراضية لمتصفح الويب الخاص بنا.
ستكون أي أوراق أنماط تنشئها لصفحة ويب أكثر تحديدًا من الأنماط الافتراضية للمتصفح. لذلك لن يتم تطبيق هذه الإعدادات الافتراضية إلا إذا كانت ورقة الأنماط الخاصة بك لا تتجاوزها.
إذا كنت تريد أن تكون الروابط زرقاء ومسطرة، فلن تحتاج إلى فعل أي شيء لأن هذا هو الإعداد الافتراضي، ولكن إذا كان ملف CSS الخاص بموقعك ينص على أن الروابط يجب أن تكون خضراء، فإن هذا اللون سيتجاوز اللون الأزرق الافتراضي. سيبقى التسطير في هذا المثال لأنك لم تحدد خلاف ذلك.
أين يتم استخدام CSS؟
يمكن أيضًا استخدام CSS لتحديد كيفية ظهور صفحات الويب عند عرضها في وسائط أخرى غير مستعرض الويب.
على سبيل المثال، يمكنك إنشاء ورقة أنماط طباعة تحدد كيفية طباعة صفحة الويب.
نظرًا لأن عناصر صفحة الويب مثل أزرار التنقل أو نماذج الويب لن يكون لها أي غرض في الصفحة المطبوعة، يمكن استخدام ورقة أنماط الطباعة “لإيقاف” هذه المناطق عند طباعة الصفحة.
على الرغم من أنه ليس ممارسة شائعة حقًا في العديد من المواقع، إلا أن خيار إنشاء أوراق أنماط طباعة قوي وجذاب.
إقرأ أيضاً… أفضل 10 دورات تساعدك على تعلم لغة البرمجة بايثون.
لماذا تعتبر CSS مهمة؟
لغة البرمجة CSS هي واحدة من أقوى الأدوات التي يمكن لمصمم الويب تعلمها لأنه باستخدامها يمكنك التأثير على المظهر المرئي الكامل لموقع الويب.
يمكن تحديث أوراق الأنماط المكتوبة جيدًا بسرعة والسماح للمواقع بتغيير ما تم تحديده حسب الأولوية بشكل مرئي على الشاشة. والذي بدوره يُظهر القيمة والتركيز على الزائرين، دون الحاجة إلى إجراء أي تغييرات على ترميز HTML الأساسي.
التحدي الرئيسي في CSS هو أن هناك الكثير لنتعلمه – ومع تغير المتصفحات كل يوم، فإن ما يعمل جيدًا اليوم قد لا يكون منطقيًا غدًا حيث يتم دعم الأنماط الجديدة وإسقاط البعض الآخر أو فقدانه لسبب أو لآخر .
منحنى تعلم CSS يستحق كل هذا العناء.
نظرًا لأن CSS يمكن أن تجمع، مع الأخذ في الاعتبار كيف يمكن للمتصفحات المختلفة تفسير وتنفيذ التوجيهات بشكل مختلف. يمكن أن يكون تعلم CSS أكثر صعوبة من تعلم HTML العادي.
تتغير CSS أيضًا في المتصفحات بطريقة لا تتغير بها HTML بالفعل. بمجرد أن تبدأ في استخدام CSS، سترى أن تسخير قوة أوراق الأنماط سيمنحك مرونة لا تصدق في كيفية تخطيط صفحات الويب وتحديد شكلها ومظهرها.
على طول الطريق، ستجمع “حقيبة من الحيل” من الأساليب والطرق التي عملت معك في الماضي والتي يمكنك الرجوع إليها مرة أخرى أثناء إنشاء صفحات ويب جديدة في المستقبل.
