تحدثت في الموضوع سابق حول توافق متصفحات الويب بإستخدام JQuery، وعن إستخدام خاصية browser في تحديد متصفح الويب الذي يستعمله المستخدم أو تحديد المحرك الخاص بمتصفح الويب، وأنا أفضل إستخدامه في حالات إختلاف بين متصفحات تدعم المعايير القياسية مثل إختلاف بسيط جداً بين محرك Webkit و Mozilla/Gecho أما عن الإكسبلورر يمكن تحديده إما عن طريق الخاصية التي سأشرحها اليوم أو بطرق أخرى مثل التعليقات الشرطية Conditional comment.

الجزء الثاني من الموضوع سيتحدث عن إستخدام كائن support في توافق متصفحات الويب بتحديد دعم المتصفحات لخصائص CSS و DOM، كما أن موقع jQuery الرسمي يوصي بإستخدامها بدلاً من خاصية browser، من ناحيتي أرى الأخيرة أفضل وأسهل في التحديد وستكون موجودة في النسخ القادمة لمكتبة jQuery.


أما كائن support فهي جديدة وتم إضافتها في نسخة 1.3 من مكتبة jQuery، وتستخدم في تطوير إضافات وبنية jQuery.

كائن Support

يحتوي الكائن Support على عدد من الخصائص، تفيد في تحديد ما إن كان المتصفح يدعمها أم لا، ويكتب الكائن Support في مكبتة jQuery بهذا الشكل:

$.support

أما عن الخصائص التي يوفر الكائن في متعلقة بخصائص CSS وخصائص DOM، وترجع قيمة true في حال دعم المتصفح الخاصية المستخدمة في الكائن، قائمة الخصائص هي:

  • boxModel: متعلقة بدعم المتصفح لنموذج W3C CSS Box Model، تساوي true إذا كانت الصفحة تظهر خصائص CSS المكونة من هذا النموذج. (متصفح الإكسبلورر 6 و 7 لا يدعمون هذا النموذج) – (خصائص CSS Box Model هي margin و padding و border والخصائص المتعلقة بها مثل margin-left,margin-right, .. وغيرها من خصائص Box Model)
  • cssFloat: متعلقة بخاصية float في تقنية CSS، بحيث تساوي true إذا كان المتصفح يدعم كتابة خاصية style.cssFloat ضمن شفرة Javascript. (لا يدعم متصفح الإكسبلورر هذه الخاصية، ينصح بإستخدام styleFloat بدلاً من منها)
  • hrefNormalized: تساوي true إذا كانت طريقة getAttribute في Javascript يمكن أن تسترجع خاصية href الخاصة بعنصر HTML. (ليست مدعومة في متصفح الإكسبلورر)
  • htmlSerialize: تساوي true إذا كان المتصفح قادر على إدخال سلسلة من عنصر <link> بإستخدام خاصية innerHTML ضمن شفرة Javascript. ( ليست مدعومة في متصفح الإكسبلورر)
  • leadingWhitespace: تساوي true في حال كان المتصفح يسمح بالمحافظة على الفرغات أثناء الكتابة بخاصية innerHTML. (ليست مدعومة في متصفح الإكسبلورر 6 إلى 8 )
  • noCloneEvent: تساوي true إذا كانت عناصر DOM منسوخة بدون أن يتم نسخ الاحداث أيضاً. (ليست مدعومة في متصفح الإكسبلورر)
  • objectAll: تساوي true إذا كانت الخاصية getElementsByTagName ترجع كافة عناصر الوسم المحدد التابعة للعنصر الحالي. (ليست مدعومة في متصفح الإكسبلورر 7 و 8 )
  • opacity: تساوي true إذا المتصفح الحالي يستطيع تفسير خاصية opacity الموجودة في CSS. (ليست مدعومة في متصفح الإكسبلورر، يتم إستخدام المرشح Filter بدلاً من خاصية opacity)
  • scriptEval: تساوي true إذا كان إدخال النص بواسطة طرق المعالجة في DOM مثل appendChild و createTextNode ممكناً. (ليست مدعومة في متصفح الإكسبلورر)
  • style: تساوي true إذا تم إسترجاع خاصية style في أي وسم من أوسمة HTML بواسطة getAttribute ( مثل getAttribute(‘style’)) ). (ليست مدعومة في متصفح الإكسبلورر، ويتم إستخدام cssText بدلاً من style)
  • tbody: تساوي true إذا كان الوسم table يمكن أن يبقى بدون وجود الوسم tbody. (ليست مدعومة في متصفح الإكسبلورر، حيث يتم إستخدام tbody لإبقاء الجدول)

مثال عملي على كائن support

هذا مثال بسيط على إستخدام كائن support و سأعطي مثال على خاصية cssFloat فهي غير مدعومة في متصفح الإكسبلورر (جميع الإصدارات لا تدعم هذه الخاصية حالياً) ويتم إستخدام خاصية styleFloat بدلاً منها، نضع عنصرين واحد في اليمين والثاني في اليسار وسنستعمل خاصية float فيما بعد لتحديد الجهة، هذه شفرة HTML:

<div id="content">
    <div id="right">
        <p>Right Side</p>
        <span>float: right;</span>
    </div>
    <div id="left">
        <p>Left Side</p>
        <span>float: left;</span>
    </div>
</div>

أما عن إستخدام مكتبة JQuery والتي سنتأكد من خلالها عن دعم المتصفح لخاصية cssFloat سأضيف هذه الخاصية إلى كل من الصنف right# و left# وتحديد قيمة float لكل منهم في هذه الشفرة:

$(function(){
    var right = $('#right')[0];
    var left = $('#left')[0];

    if($.support.cssFloat) {
        right.style.cssFloat = 'right';
        left.style.cssFloat = 'left';
    } else {
        right.style.styleFloat = 'right';
        left.style.styleFloat = 'left';
    }
});

خلاصة الشفرة أنه إذا كان المتصفح يدعم خاصية cssFloat يتم تطبيقها بشكل مباشر على عناصر HTML، غير ذلك يتم إستخدام styleFloat في تحديد قيمة float لكل جهة، وهنا إشارة إلى متصفح الإكسبلورر أنه لا يدعم خاصية cssFloat فإن لم يتم إستخدام styleFloat لن يتمكن مستخدمي الإكسبلورر من رؤية العنصرين معاً أحدهم في الجهة اليمنى والآخر في الجهة اليسرى، الشكل النهائي للمثال:

ملاحظات حول كائن support

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

لماذا يوصي موقع jQuery بإستخدام هذا الكائن بدلاً من خاصية browser؟ أعتقد أنه يريد من المطورين الإعتماد على الكشف عن المتصفح للتأكد من دعمه لمثل هذه الخصائص سواء كان متصفح Opera, Safari, Firefox أو Internet Explorer أو غيره لأن مع ظهور إصدار جديد ومتصفح جديد إحتمال أن يتم إضافة علم flag جديد لخاصية browser مثل علم webkit في الإصدار 1.4 من مكتبة jQuery وهو إشارة إلى محرك webkit لتحديد متصفح مثل Safari و Chrome.