بسم الله الرحمن الرحيم .
الموضوع ظاهر من العنوان وهو موضوع شائك جدا في مناقشته ، لأن الأمر يتعلق باختلاف المتصفحات و تحليلها للأكواد ، اليوم إن شاء الله حاولت أن أنجز هذا الدرس ليكون مرجعا لمن أرد أن يضبط هذا الفن ، ألا وهو فن توافق الموقع مع جميع المتصفحات ، بجميع اصداراتها ، سأحاول أن أقسم أفكار الدرس إلى التالي :

• مقدمة
• الأسباب التي تدفعنا لترقيع ملفات مشاريعنا
• فوائد الترقيعات
• الجمل الشرطية
• الترقيعات داخل ملفات التنسيق css
• أدوات ستفيدك
• مضار الترقيعات
• ملاحظات أخيرة

مقدمة :

كلنا نعلم كثرة المستعرضات الموجودة حاليا ، مع اصداراتها ، مع اختلاف أصناف المستعملين ، كل يرتاح لنوع محدد لأسبابه الخاصة ، فمن الطبيعي لما تنتهي من تصميم موقعك أو مشروعك أن يظهر على كل مستعرض بشكل معين ، لتخصص كل متصفح بمعايير فريدة عن الآخر ، لذلك جعلت العايير القياسية w3c لتكون واسطة بين هذه المتصفحات ، ويتم اعتماد المشاريع عليها حتى يتسنى لك ، كمطور التحكم التام في موقعك ، من ناحية توافقه مع جميع المستعرضات ، هل هذا التوافق يأتي هكذا من غير تعب ؟؟ لا و إنما توجد أكواد و ملفات إضافية و جمل شرطية حتى تصل لإظهار موقعك بالوجه المرضي امام الجميع ، هذا ما نسميه بترقيعات css أو css hacks .

الأسباب التي تدفعنا لترقيع ملفات مشاريعنا :

يمكنني تلخيصها في التالي :

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

الجمل الشرطية :

الجمل الشرطية هي جمل أنشأتها مايكروسوفت لدعم متصفحاتها ، انطلاقا من النسخة 5 فما فوق ، دور هذه الجمل وهو ان تتحكم في شكل موقعك أكثر و أكثر ، حيث يمكنك أن تجعل لكل متصفح ملف تنسيق خاص به ، و كذلك لكل اصدار من اكسبلورر ، لنر الآن بعض الأمثلة لطريقة العمل بها :

<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css" />
< ![endif]-->

الجملة التالية أشترط فيها ، لو كان المتصفح الذي يستعمله الزائر هو Internet Explorer أن يستخدم ملف التنسيق الفلاني الذي سميته iecss.css
كما يمكنني أن أكتبه هكذا :

<!--
<link href="iecss.css" rel="stylesheet" type="text/css" />
-->

سأحاول أن أضع جميع الأوامر التي تستعمل في هذه الجمل الشرطية و نضرب لها أمثلة بعدها إن شاء الله ، يمكنني أن ألخص جميع الأوامر هنا :

• IE : للشرط على جميع اصدارات الاكسبلورر
• lt : تستعمل لاشتراط ما هو أقل من نسخة معينة ، دون إدخال النسخة الحالية
• lte : لاشتراط أقل من أو يساوي نسخة معينة
• gt : لاشتراط أكبر من نسخة معينة للاكسبلورر
• gte : لاشتراط أكبر من أو يساوي نسخة معينة من الاكسبلورر
• ! : لاستثناء نسخة معينة
• & : لدمج أكثر من نسخة في نفس الشرط
• | : لاشتراط ، إذا كانت النسخة الفلانية ،أو النسخة الفلانية ، يعني تلعب دور أو
• () : لإداخل العبارة يدويا ، مثلا gte أكتبها كاملة هكذا (greater than or equal to) ، يعني تكرار بنوع أطول
• true : وهو عند تحقيق قيمة معينة لشرط
• false : القيمة خطأ وهي عدم تحقيق شرط

و الآن بعد ان انتهينا من تعداد الأوامر ، نأتي لضرب بعض الأمثلة ليتبين كل شيء :

<!--[if IE ]>
<link href="ie.css" rel="stylesheet" type="text/css" />
< ![endif]-->

نشترط ، في حين كان الزائر يستعمل المتصفح الانترنت اكسبلورر عامة ، بأي اصدار ، اعرض لي ملف التنسيق الفلاني – الذي أكون قد جهزته من قبل – ie.css
كما يمكنني أن احدد رقم اصدار الاكسبلورر بإضافة رقمه داخل الشرط :

<!--[if IE5 ]>
<link href="ie5.css" rel="stylesheet" type="text/css" />
< ![endif]-->
<!--[if IE6 ]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
< ![endif]-->
<!--[if IE7 ]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
< ![endif]-->
<!--[if IE8 ]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
< ![endif]-->

هنا حاولت أن أجعل لكل اصدار اكسبلورر ملفا خاصا بترقيعاته و جميع التغييرات التي أصلحت أخطاءها لتظهر على الاكسبلورر كما أريد ،
في حالة تكرار الأكواد يمكنني أن أجمع أكثر من إصدار في شرط واحد ، هكذا :

<!--[if IE 7 & IE8]>-->
<link href="ie7-8.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->

، او في حالة ما أنني أريد لملف تنسيق معين أن يظهر فقط لمن يستعمل ie7 أو ie8 ، يمكنني كتابة :

<!--[if (IE 6)|(IE 7)]>
<link href="ie7-8.css" rel="stylesheet" type="text/css" />
< ![endif]-->

أو إحدى اصدارات الاكسبلورر لا تحتاج ترقيع و ظهرت عادية ، ولكن تحتاج بقية الاصدارات ترقيعات ، يمكنني استثناء اصدار واحد بكتابة التالي :

<!--[if !IE 8]>
<link href="ie.css" rel="stylesheet" type="text/css" />
< ![endif]-->

أي أن التنسيقات التي داخل ملف ie.css ستطبق على كل الإصدارات سوى 8 ستبقى كما هي أصلية في الملف الرئيسي
كما يمكنني أن اشترط ما هو اقل من نسخة معينة بالتالي :

<!--[if lt IE 7 ]>
<link href="ie.css" rel="stylesheet" type="text/css" />
< ![endif]-->

أو أقل من أو يساوي :

<!--[if lte IE 7 ]>
<link href="ie.css" rel="stylesheet" type="text/css" />
< ![endif]-->

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

الترقيعات داخل ملفات css

في بعض الأحيان تكون الترقيعات عبارة عن سطر أو سطرين أو ثلاث ، لا تحتاج أن تفتح لها ملفا جديدا ، يمكنك إدراجها داخل كود css بكل برودة ، و تعمل بنفس العمل الذي تعمل به داخل الملفات المستقلة :

• html>body هذه تستعمل لإعطاء قيمة معينة للمتصفحات الحديثة

  html>body #test{
  هنا الخصائص التي ستظهر فقط في المتصفحات الحديثة
  }
  #test {
  هنا الخصائص التي ستظهر على متصفحات عادية او قديمة
  }

  مثال عملي :

  #test{
  position: absolute;
  }
  html>body #test{
  position: fixed;
  }

  fixed في position لا تعمل مع ie6 ، لذلك عملت position : abslute عادية هي الأولى ليتعرف عليها ie6 ، و بعدها أععطيت قيمة fixed للـ position حيث سيتعرف عليها فقط المتصفحات الحديثة

• * html .testهذه تستعمل لإعطاء ترقيع معين خاص بـ ie6 مثلا :

  .test {
  position: fixed;
  }
  * html .test{
  position: absolute;
  }

  الاولى عادية ، لكن الثانية خاصة بـ ie6

• *+html .test : خاصة بـ ie6 و ie7 :

  .test {
  margin : 10px;
  }
  *+html .test{
  margin : 12px;
  }

• إدخال الكود داخل أسطر الأوامر :

  .test {
  position: fixed;
  _position: absolute;
  }

  بحيث سطر fixed عادي ، و الذي يليه هو الترقيع خاص بالاكسبلورر
  إذا أردت تجاهل اصدار ie6 في سطر معين مع إبقاء ie7 ، يمكنني كتابة التالي :

  .test {
  margin: 10px;	/*خاص بجميع المتصفحات */
  _margin :15px; /* خاص بالاكسبلورر */ 
  *margin : 15px; /*  هنا تجاهلنا ie6  */
  }

• التعليقات في Css ، يمكنني أن أستفيد منها حتى هي بالنسبة لجهاز الماك ، من المتعارف عليه أن التعليقات في css تكتب هكذا

  /* هن التعليق */

  لكن ، أريد أن أظهر تنسيقا معينا لاصدار معين من متصفح معين ، ولكن أريد ان اخفيه على نظام الماك Mac يمكنني أن أستغل التعليقات في هذا الغرض :

  /* هذا النوع من التعليقات يؤدي إلى إخفاء الخواص على ie5 على نظام الماك \*/
  .test {
  color: red;
  }
  /*  نهاية */

  بحيث أن \ ( antislash ) التي عملتها قبل غلق التعليق الأول جعلت نظام الماك يعتبر كل ما بين التعليقين تعليق ، ولا يعترف به ولا يتم تطبيق أوامره ، أما لو أردت أن تظهر و يتم الاعتراف بها ، يمكنني إضافة التالي \*// قبل ما أغلق التعليق الأول :

  /* هنا سيتم تطبيق الخواص التي بين التعليقين \*//*/
  .test {
  color: red;
  }
  /* نهاية*/

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

أدوات ستفيدك

• قم بتحميل جميع المتصفحات على جهازك
• حمل برنامج ieTster التي تستطيع من خلاله اختبار مشروعك و مدى توافقه مع اصدارات ie كاملة

حمل هذه الاضافات الخاصة بالفايرفوكس :

• Firebug
• Html Validator
• Web Developer
• IE Tab

مضار الترقيعات

يمكنني أن ألخصها هنا :

• كثرة الأكواد ، و كثرة استدعاءات الملفات في وسم الهيد ، مما يجعل هناك عملية من التحقق => ضغط و بطأ المشروع
• صعوبة التعديل في المستقبل ، حيث أنك لو اضطررت أن تغير شيئا بسيطا في مشروعك ستظطر لتغيير عالم من الملفات الترقيعية ، وهنا تفقد حلاوة css التي تتميز في تحكمك بمشروعك بملف واحد
• في حالة استعمال ترقيعات عامة ، يقع شيء من الخلط في المشروع و تداخل الأكواد ن مما لا يسلم المشروع منه

ملاحظات أخيرة

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

هذا .. و صلى الله وسلم و بارك على محمد و على آله و صحبه و سلم تسليما كثيرا
و السلام ورحمة الله وبركاته .

هذه التدوينة نُشرت في الخميس, 30 يوليو, 2009 عند 1:19 ص و مصنفة تحت تصنيف css , xhtml. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :css, hacks, ترقيع, جمل شرطية, مشروع, مطور