السلام عليكم و رحمة الله و بركاته،
بناء موقع ما على شبكة الإنترنت يعتمد على مجموعة من لغات البرمجة المتداخلة فيما بينها، مثل : HTML، CSS، JavaScript، PHP…، و من بين أسهل هذه اللغات و أكثرها استخداما في الوقت الحالي، لغة CSS، فهذه اللغة هي التي تحدد الشكل الخارجي للموقع، من خطوط، ألوان، أحجام… و كل ذلك بطريقة بسيطة، سهلة، و سلسة.
لكن قد تفاجأ إذا قلت لك أن لغة CSS رغم سهولة تعلمها، وسلاسة استخدامها، قد تصبح من أكثر لغات البرمجة صعوبة و إزعاجا للمصمم في حالات معينة. كيف يمكن ذلك ؟ إليك الأسباب التالية :
1. غياب تحذيرات بالخطأ :
كل لغة برمجة تتبع قواعد معينة خاصة بها في كتابة التعليمات البرمجية. مثلا في CSS يبدأ الكود باسم محدد يطلق عليه المنتقى (Selector)، يمكن أن يكون وسم من وسوم HTML، يمكن أن يكون فئة CLASS، أو معرف ID معين، يبدأ و ينتهي بأقواس معقوفة {}، داخل هذه الأقواس يتم وضع أوامر التنسيق من خصائص وقيم، ينتهي كل سطر فيها بفاصلة منقوطة. مثال :
أغلب لغات البرمجة تتبع قواعد صارمة أثناء بناء الكود البرمجي، و كل هفوة بسيطة في هذا البناء تتسبب في ظهور أخطاء أثناء تنفيذ البرنامج، لكن الأمر الجيد في مثل هذه اللغات، مثل PHP أنها تحدد نوع و مكان الخطأ، بل و السطر الموجود به هذا الخطأ، مما يسهل على المطور الوصول إليه و إصلاحه في وقت قصير.
لكن المشكل مع لغة CSS أنها لا تظهر أي رسائل بالخطأ، كيفما كان نوعا و مهما كان عددها (مثلا، نسيان وضع أوامر التنسيق داخل معقوفتين، نسيان الفاصلة المنقوطة…)، مما قد يضع المصمم أو المطور في جحيم اكتشاف مكان هذا الخطأ، خصوصا إذا لم يكن الكود من بناءه، و خصوصا إذا كان التصميم يحتوي العديد من ملفات CSS، و كل واحد منها بداخله آلاف الأسطر.
2. غياب المتغيرات :
بلغة الـ JavaScript مثلا أو الـ PHP، يسمح بتخزين قيمة معينة داخل متغير، و استدعاء هذه القيمة كلما احتجت لذلك بكتابة اسم المتغير فقط (ربما يتم ذلك أكثر من 100 مرة بنفس الملف). فإذا رغبت في تغيير القيمة إلى قيمة أخرى بالـ 100 مرة التي تم استدعاؤها فيها، فقط يكفيك تغييرها بالمتغير المخزنة فيه، و ستغير بشكل تلقائي في الباقي.
أما في الـ CSS فالأمر مختلف، فلا وجود للمتغيرات (و إن كانت بوادر استخدامها بالـ CSS بدأت تلوح في الأفق)، و بالتالي فأنت إن أردت تغيير قيمة معينة داخل ملف التنسيق، فستكون مضطرا إلى البحث عنها داخل هذا الملف ثم تغييرها واحدة بواحدة.
3. مشكل التوافق مع المتصفحات :
التوافق مع متصفحات الويب، يعتبر من أكبر و أكثر المشاكل إزعاجا لمصممي و مطوري مواقع الويب. فعلى الرغم من أن منظمة W3C قامت بوضع مجموعة من المعايير القياسية التي يجب اعتمادها في ملفات التنسيق لحل مجموعة من المشاكل، إلا أن مشكل التوافق مع المتصفحات لازال قائما، خصوصا التوافق مع المتصفحات القديمة (كـ IE6 و IE7 إذا طلب العميل ذلك)، حيث ستضطر في هذه الحالة إلى استخدام ملفات CSS إضافية، مع بعض الأوامر الشرطية لحل مشكل التوافق.
4. خصوصية ملفات التنسيق :
منتقيات CSS (الـ Selectors) لها مستويات مختلفة من الخصوصية، لنأخذ المثال التالي :1
في هذا المثال نلاحظ أن لدينا نفس المنتقيان بنفس الخصائص، لكن بقيمة مختلفة، الأول سيكون باللون الأحمر، و الثاني باللون الأزرق، مع تطبيق اللون الأزرق على كل عناوين H1، لأنه دائما قيمة المنتقى الذي تأتي بعد هي التي تطبق، الأمر الذي قد يكون مربكا في بعض الحالات، و قد يجعل المصمم أو المطور يبحث عن سبب المشكل لساعات طويلة، خصوصا المبتدئين منهم.
و عليه فأنت إذا أردت أن تخصص لعنوان H1 معين، لون محدد، فيجب أن تضيف فئة أو معرف يميز هذا العنوان عن غيره، كما بالمثال التالي :
حيث أنه في هذا المثال، المنتقى الذي يحتوي الفئة head هو الذي سيأخذ اللون الأحمر دون غيره من عناوين H1 الأخرى.
5. لغة CSS و طلبات العميل اللامنتهية :
ربما يعتبره الكثير ليس بمشكل أو عائق في استخدام لغة CSS، لكن شخصيا أعتبره من الأمور الأكثر إزعاجا، خصوصا إذا كان العميل ليس لديه أي فكرة عن هذه اللغة، أو كان من العملاء المزاجيين الغير مستقرين على رأي (فأغلب التغييرات و التعديلات التي يطلبها العميل تكون مرتبطة بملفات CSS). فاليوم يطلب منك أن يكون لون الموقع أخضر، غدا يقول لك لا أريده برتقالي، بعد غد يطلب منك تغيير نوعية الخط…
تخيل معي بناء الموقع يأخذ منك 3 أيام، طلبات التعديل المتكررة على ملف الاستايل تأخذ منك 10 أيام، ألا يعتبر هذا جحيما للمصمم!
إلى هنا ينتهي موضوعنا لهذا اليوم، أتمنى أن يكون قد نال إعجابكم، لمن لديه أي تدخل أو إضافة لا يبخل على إخوانه بها من خلال طرحها بتعليق، و لكم جزيل الشكر. بالتوفيق للجميع.
بناء موقع ما على شبكة الإنترنت يعتمد على مجموعة من لغات البرمجة المتداخلة فيما بينها، مثل : HTML، CSS، JavaScript، PHP…، و من بين أسهل هذه اللغات و أكثرها استخداما في الوقت الحالي، لغة CSS، فهذه اللغة هي التي تحدد الشكل الخارجي للموقع، من خطوط، ألوان، أحجام… و كل ذلك بطريقة بسيطة، سهلة، و سلسة.
لكن قد تفاجأ إذا قلت لك أن لغة CSS رغم سهولة تعلمها، وسلاسة استخدامها، قد تصبح من أكثر لغات البرمجة صعوبة و إزعاجا للمصمم في حالات معينة. كيف يمكن ذلك ؟ إليك الأسباب التالية :
1. غياب تحذيرات بالخطأ :
كل لغة برمجة تتبع قواعد معينة خاصة بها في كتابة التعليمات البرمجية. مثلا في CSS يبدأ الكود باسم محدد يطلق عليه المنتقى (Selector)، يمكن أن يكون وسم من وسوم HTML، يمكن أن يكون فئة CLASS، أو معرف ID معين، يبدأ و ينتهي بأقواس معقوفة {}، داخل هذه الأقواس يتم وضع أوامر التنسيق من خصائص وقيم، ينتهي كل سطر فيها بفاصلة منقوطة. مثال :
- الكود:
.class {
background-color: #CCC;
color: #444;
}
أغلب لغات البرمجة تتبع قواعد صارمة أثناء بناء الكود البرمجي، و كل هفوة بسيطة في هذا البناء تتسبب في ظهور أخطاء أثناء تنفيذ البرنامج، لكن الأمر الجيد في مثل هذه اللغات، مثل PHP أنها تحدد نوع و مكان الخطأ، بل و السطر الموجود به هذا الخطأ، مما يسهل على المطور الوصول إليه و إصلاحه في وقت قصير.
لكن المشكل مع لغة CSS أنها لا تظهر أي رسائل بالخطأ، كيفما كان نوعا و مهما كان عددها (مثلا، نسيان وضع أوامر التنسيق داخل معقوفتين، نسيان الفاصلة المنقوطة…)، مما قد يضع المصمم أو المطور في جحيم اكتشاف مكان هذا الخطأ، خصوصا إذا لم يكن الكود من بناءه، و خصوصا إذا كان التصميم يحتوي العديد من ملفات CSS، و كل واحد منها بداخله آلاف الأسطر.
2. غياب المتغيرات :
بلغة الـ JavaScript مثلا أو الـ PHP، يسمح بتخزين قيمة معينة داخل متغير، و استدعاء هذه القيمة كلما احتجت لذلك بكتابة اسم المتغير فقط (ربما يتم ذلك أكثر من 100 مرة بنفس الملف). فإذا رغبت في تغيير القيمة إلى قيمة أخرى بالـ 100 مرة التي تم استدعاؤها فيها، فقط يكفيك تغييرها بالمتغير المخزنة فيه، و ستغير بشكل تلقائي في الباقي.
أما في الـ CSS فالأمر مختلف، فلا وجود للمتغيرات (و إن كانت بوادر استخدامها بالـ CSS بدأت تلوح في الأفق)، و بالتالي فأنت إن أردت تغيير قيمة معينة داخل ملف التنسيق، فستكون مضطرا إلى البحث عنها داخل هذا الملف ثم تغييرها واحدة بواحدة.
3. مشكل التوافق مع المتصفحات :
التوافق مع متصفحات الويب، يعتبر من أكبر و أكثر المشاكل إزعاجا لمصممي و مطوري مواقع الويب. فعلى الرغم من أن منظمة W3C قامت بوضع مجموعة من المعايير القياسية التي يجب اعتمادها في ملفات التنسيق لحل مجموعة من المشاكل، إلا أن مشكل التوافق مع المتصفحات لازال قائما، خصوصا التوافق مع المتصفحات القديمة (كـ IE6 و IE7 إذا طلب العميل ذلك)، حيث ستضطر في هذه الحالة إلى استخدام ملفات CSS إضافية، مع بعض الأوامر الشرطية لحل مشكل التوافق.
4. خصوصية ملفات التنسيق :
منتقيات CSS (الـ Selectors) لها مستويات مختلفة من الخصوصية، لنأخذ المثال التالي :1
- الكود:
h1{
color:#FF0000;
}
h1{
color:#0000FF;
}
في هذا المثال نلاحظ أن لدينا نفس المنتقيان بنفس الخصائص، لكن بقيمة مختلفة، الأول سيكون باللون الأحمر، و الثاني باللون الأزرق، مع تطبيق اللون الأزرق على كل عناوين H1، لأنه دائما قيمة المنتقى الذي تأتي بعد هي التي تطبق، الأمر الذي قد يكون مربكا في بعض الحالات، و قد يجعل المصمم أو المطور يبحث عن سبب المشكل لساعات طويلة، خصوصا المبتدئين منهم.
و عليه فأنت إذا أردت أن تخصص لعنوان H1 معين، لون محدد، فيجب أن تضيف فئة أو معرف يميز هذا العنوان عن غيره، كما بالمثال التالي :
- الكود:
h1.head{
color:#FF0000;
}
h1{
color:#0000FF;
}
حيث أنه في هذا المثال، المنتقى الذي يحتوي الفئة head هو الذي سيأخذ اللون الأحمر دون غيره من عناوين H1 الأخرى.
5. لغة CSS و طلبات العميل اللامنتهية :
ربما يعتبره الكثير ليس بمشكل أو عائق في استخدام لغة CSS، لكن شخصيا أعتبره من الأمور الأكثر إزعاجا، خصوصا إذا كان العميل ليس لديه أي فكرة عن هذه اللغة، أو كان من العملاء المزاجيين الغير مستقرين على رأي (فأغلب التغييرات و التعديلات التي يطلبها العميل تكون مرتبطة بملفات CSS). فاليوم يطلب منك أن يكون لون الموقع أخضر، غدا يقول لك لا أريده برتقالي، بعد غد يطلب منك تغيير نوعية الخط…
تخيل معي بناء الموقع يأخذ منك 3 أيام، طلبات التعديل المتكررة على ملف الاستايل تأخذ منك 10 أيام، ألا يعتبر هذا جحيما للمصمم!
إلى هنا ينتهي موضوعنا لهذا اليوم، أتمنى أن يكون قد نال إعجابكم، لمن لديه أي تدخل أو إضافة لا يبخل على إخوانه بها من خلال طرحها بتعليق، و لكم جزيل الشكر. بالتوفيق للجميع.
