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

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

خاصية browser

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

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

$.browser

من خلال إستخدام خاصية browser سنتمكن من كشف المتصفح الحالي للمستخدم مع تمرير الأعلام Flags وهي عبارة عن أسماء المتصفحات السائدة لدينا كما ذكرت مثل Opera ،Safari ،Mozilla و Internet Explorer.

طريقة إستخدام الخاصية عبر طرق jQuery أخرى

يمكن إستخدام خاصية browser عبر طرق jQuery أخرى، لو أردنا معرفة المتصفح الحالي للمستخدم بإرجاع إما قيمة true أو false يمكن أن نستخدم طريقة each على سبيل المثال، بهذه الطريقة:

 $(function(){
     jQuery.each(jQuery.browser,function(i, val){
         $("<div>" + i + " : <span>" + val + "</span></div>").appendTo(document.body);
     });
 });

لو كنا نستخدم متصفح Safari أو متصفح آخر يستخدم محرك webkit مثل Google Chrome سنتظهر لدينا النتيجة كما توضح الصورة:

وهذا إستخدام آخر بدالة log بإستخدام متغير console الموجود في إضافة Firebug:

 $(function(){
     console.log('Mozilla: ' + $.browser.mozilla)
     console.log('Safari: ' + $.browser.safari)
     console.log('Opera: ' + $.browser.opera)
     console.log('MEIE: ' + $.browser.msie);
 });

يمكن رؤية النتيجة بإستخدام إضافة Firebug الموجودة في متصفح Firefox.

بإستخدامك خاصية browser يمكن التعامل مع المتصفحات بشكل عام عبر هذه الأعلام التي ستضيفها للخاصية:

  • safari
  • opera
  • msie
  • mozilla
  • webkit (أضيف في jQuery 1.4)

معرفة رقم الإصدار

يمكنك معرفة إصدار المتصفح بإستخدام خاصية browser عن طريق خاصية version، إستخدام هذه الخاصية يكون بهذه الطريقة:

$.browser.version

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

 $(function(){
     if($.browser.mozilla & $.browser.version < '1.9') {
         $('.alert').show().html('<p>You should update your Firefox browser.</p>');
     }
 });

مثال عملي على خاصية browser

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

<div id="ie">
 <p>You are using <strong>Internet Explorer</strong> version <strong></strong>.</p>
</div>

<div id="mozilla">
 <p>You are using <strong>Mozille</strong> version <strong></strong>.</p>
</div>

<div id="webkit">
 <p>You are using <strong>Safari</strong> version <strong></strong>.</p>
</div>

<div id="opera">
 <p>You are using <strong>Opera</strong> version <strong></strong>.</p>
</div>

شفرة CSS:

.alert {
     display: none;
     margin: 10px auto;
     width: 90%;
     background-color: #d3d3d3;
}
.alert p {
     padding: 5px;
     font: 14px tahoma;
     color: #5c5d5e;
}

الآن نأتي لشفرة Javascript لكتابة إسم المتصفح والإصدار الحالي عن طريق خاصية browser بإستخدام مكتبة jQuery بالطبع، ستكون الشفرة الأخيرة بهذه الطريقة:

 $(function(){
     if($.browser.mozilla) {
         $('#mozilla').show();
         $('.ver').html($.browser.version);
     }
     else if ($.browser.msie) {
         $('#ie').show();
         $('.ver').html($.browser.version);
     }
     else if ($.browser.webkit) {
         $('#webkit').show();
         $('.ver').html($.browser.version);
     }
     else if ($.browser.opera) {
         $('#opera').show();
         $('.ver').html($.browser.version);
     }
 });

وبعدها تستطيع التأكد من نوع المتصفح وإصداره كما تظهر هذه الصورة للمتصفحات الأربع التي لدي:

جميع الأمثلة المكتوبة موجودة في المرفقات.