المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

عندما قرأت رسالة أخي عبدالعزيز الزرعوني بعنوان ”فلنهجر متصفح Internet Explorer 6“، والتي وزرعها عبر البريد الإلكتروني، وكتبها الأخ أحمد الكثيري. انتابني مزيج من الشعور بخيبة الأمل، وعدم الاستغراب. فلازالت نسبة ليست بالمستهانة من المتصفحين العرب يستخدمون الإنترنت اكسبلورر ٦. وقد يكون لأسباب كثيرة لا أود التطرق إليها في هذا المقال. وعدم الاستغراب لأن نسبة كبيرة من مستخدمي الإنترنت بشكل عام لايفرقون بين المتصفح ومحرك البحث.

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

سنتعلم في هذا المقال ٧ وسائل للتغلب على مشكلة شفافية الصور بصيغة PNG على متصفح الإنترنت إكسبلورر ٦. حيث سنرى بتفصيل إيجابيات وسلبيات كل وسيلة بعد وضعها في الاختبار، ونترك لك حرية اختيار التقنية المناسبة.

اختبار الشفافية

عرض

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

للأسف لم تنجح أي وسيلة بنسبة ١٠٠% في هذا الاختبار، ولكن تفاوتت نسبة النجاح بين هذه الوسائل. كما سنرى لاحقاً.

١. IE PNG Fix

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

ايجابيات

• سهولة التطبيق، بحيث يمكننا إدراج عدد قليل من السطور في مستند HTML، ومن ثم يتم التحديد عبر CSS.
• نجاح في ٧ من أصل ٨ اختبارات، وهذه أعلى نسبة نجاح لتقنية قمت بتجربة الاختبار عليها.
• حفاظ على تطبيق تكرار وتموضع صور الخلفية، باستخدام ملف جافاسكربت iepngfix_tilebg.js لدعم هذه الخاصية.

سلبيات

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

طريقة التطبيق

عرض

تحميل

تعتمد هذه التقنية على إدراج ملف HTC، وهو ملف غير قياسي يقوم بالتحكم بسلوك العناصر عبر لغة جافاسكربت أو في بي سكربت. بحيث يتم تطبيق مرشح مايكروسوفت الاحتكاري AlphaImageLoader Filter، حتى يصبح بالإمكان تطبيق الشفافية على صور PNG الشفافة عبر الجافاسكربت.

بعد تحميل الملف المضغوط من الموقع، تقوم بفك ضغطه. ستحتاج إلى ملفات blank.gif، وiepngfix.htc، وأخيراً إن كنت تحتاج إلى التحكم بتكرار وتموضع صور الخلفية ستحتاج إلى ملف iepngfix_tilebg.js. تحتاج إلى تعديل ملف iepngfix.htc إذا كان مسار الصورة blank.gif ليس في نفس المجلد مع الملف.

// * An absolute path like:  '/images/blank.gif'
// * A path relative to this HTC file like:  thisFolder + 'blank.gif'
var thisFolder = document.URL.replace(/(\\|\/)[^\\\/]*$/, '/');
IEPNGFix.blankImg = thisFolder + 'blank.gif';

الآن تضع شيفرة الإدراج في مستند HTML التي تود عرض الصور فيه، ويجب الانتباه هنا إلى أننا نود استهداف متصفح IE6 وأقل، لذا سنضع شيفرة الإدراج بين الجملة الشرطية لهذا المتصفح، مما يساعدنا أيضاً على تخطي محقق W3C بنجاح. يتم بعدها استهداف الصور عبر محددات CSS Selectors، ومن ثم إدراج ملف جافاسكربت الاختياري لدعم عرض تكرار وتموضع صور الخلفية بالشكل التالي.

<!--[if lte IE 6]>
	<style type="text/css">
		img, div, input, a  { behavior: url("iepngfix.htc") }
	</style>
	<script type="text/javascript" src="iepngfix_tilebg.js"></script>
<![endif]-->

بالمناسبة، يمكننا إدراج ملف HTC بهذه الطريقة، أو عبر إدراجه في ملف CSS منفصل على سبيل المثال.

٢. DD_belatedPNG

على عكس أغلب الوسائل التي تعتمد على مرشح مايكروسوفت الاحتكاري AlphaImageLoader Filter، تعتمد DD_belatedPNG على تطبيق مايكروسوفت للغة توصيف الرسوميات المتجهية VML.

ايجابيات

• سهولة التطبيق، بحيث يمكننا إدراج عدد قليل من السطور في مستند HTML، ومن ثم يتم التحديد عبر CSS.
• نجاح في ٦ من أصل ٨ اختبارات، وهذه تعتبر نسبة جيدة.
• عدم الحاجة إلى إدراج صورة فارغة، وهذا قد يسهل طريقة تطبيقها أكثر على المواقع.

سلبيات

• لا يمكن تطبيق الشفافية على صورة في عنصر الإدخال، فعند استخدمنا للصورة على شكل زر لإرسال النموذج <input type=”image”>. يتم تجاهل تطبيق الشفافية.
• لا يمكن تطبيق تمدد الصورة عبر HTML، وهذه ربما ليست بالمشكلة الكبيرة، حيث لا ينصح بتمدد الصورة الأصلية بهذه الطريقة. ولكن بعض المواقع تستخدمها مثلاً لتكبير أو تصغير الصورة.
• ظهور شريط تمرير أفقي على صفحات RTL، ويمكن إخفائه بسهولة عبر تطبيق شيفرة CSS لإخفائه.

  html {overflow-x:hidden;}
  

طريقة التطبيق

عرض

تحميل

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

<!--[if lte IE 6]>
	<script src='DD_belatedPNG.js' type='text/javascript'></script>
	<script type='text/javascript'>
		DD_belatedPNG.fix('.png_bg, input');
	</script>
<![endif]-->

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

٣. jquery.pngFix.js

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

ايجابيات

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

سلبيات

• نجاح في ٥ من أصل ٨ اختبارات، وهذه تعتبر نسبة ليست بالجيدة.
• سلوك غير متوقع للصور عند عدم تحديد الأبعاد، فعندما يتم تخزين الصورة في الملفات المؤقتة cache للمتصفح، يتم إظهار الصورة بشكل صحيح. ولكن عند عمل تحديث للصفحة لا يمكنها معرفة الأبعاد، وبالتالي تظهر بشكل سيء.
• تمدد صورة الخلفية المتكررة، فعند إدراج الصورة كخلفية متكررة خلف تقسيمة، تتمدد الصورة بحسب أبعاد التقسيمة.
• تمدد صورة الخلفية المتموضعة، فعند إدراج الصورة كخلفية متموضعة، تتمدد أيضاً الصورة حسب أبعاد التقسيمة. مما يؤدي إلى عدم جدواها عند استخدام صورة PNG للموقع بتقنية CSS Sprites.

طريقة التطبيق

عرض

تحميل

بعد تحميل الملف المضغوط من الموقع، وفك ضغطه، ستحتاج إلى ملفين هما jquery.pngFix.js أو إذا كنت تريد النسخة المضغوطة منه jquery.pngFix.pack.js، والصورة blank.gif.

يتم إدراج مكتبة jQuery في البداية عبر خوادم قوقل، ومن ثم إدراج ملف الإضافة. بعدها بكل بساطة يتم استدعاء دالة الإضافة عندما يكون مستند HTML جاهزاً بالطريقة التالية. طبعاً كل هذا يتم داخل الجملة الشرطية لاستهداف متصفح الإنترنت إكسبلورر.

<!--[if lte IE 6]>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.pngFix.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(document).pngFix();
		});
	</script>
<![endif]-->

ويمكن أيضاً تحديد العناصر التي تحتوي على صور PNG شفافة باستخدام محددات CSS بالطريقة التالية.

$(function(){
	$('div.examples').pngFix();
});

ربما تحتاج إلى تعديل الخصائص إذا كان مسار الصورة الفارغة blank.gif ليس في نفس المجلد مع الملف.

$(function(){
	$('div.examples').pngFix( { blankgif:'ext.gif' } );
});

٤. IE7.js

تقوم مكتبة IE7 للجافاسكربت بتغير سلوك الإنترنت إكسبلورر ٦ ليصبح موافقاً للمعايير القياسية. تصلح الكثير من مشاكل HTML وCSS، بالإضافة إلى إصلاح مشكلة الشفافية لصور PNG على IE6 وIE5.

ايجابيات

• ترقية متصفح IE6 ليصبح موافقاً للمعايير القياسية، حيث لا تتغلب على مشكلة الشفافية في صور PNG فحسب، بل تصلح مشاكل كثيرة على المتصفح.

سلبيات

• نجاح في ٤ من أصل ٨ اختبارات، وهذه تعتبر نسبة ليست بالجيدة.
• صعوبة التطبيق، يجب إعادة تسمية كل صورة PNG شفافة بحيث ينتهي الاسم بعبارة “-trans”. مثل “png-trans.png”.
• سلوك غير متوقع للصور عند عدم تحديد الأبعاد، حيث عندما يتم تخزين الصورة في الملفات المؤقتة cache للمتصفح، يتم إظهار الصورة بشكل صحيح. ولكن عند عمل تحديث للصفحة لا يمكن معرفة الأبعاد، وبالتالي تظهر بشكل سيء.
• تمدد الصورة عند إدراج حشوة، حيث ستحدث مشكلة عند تطبيق هذه التقنية عند استخدام نمط على الصورة بحشوة.
• عدم تطبيق الشفافية على صورة الخلفية المتكررة، فعند إدراج الصورة كخلفية متكررة خلف تقسيمة، لا يتم تطبيق الشفافية عليها.
• عدم تطبيق الشفافية على صورة الخلفية المتموضعة، فعند إدراج الصورة كخلفية متموضعة، لا يتم تطبيق الشفافية عليها.

طريقة التطبيق

عرض

تحميل

تحتاج إلى إعادة تسمية كل صورة PNG شفافة تود تطبيق تأثير الشفافية عليها، بحيث ينتهي الاسم بعبارة “-trans”. وهذا ربما شيء متعب لو كان لديك الكثير من الصور. بعد إعادة التسمية عليك بإدراج المكتبة، ويمكنك إدراجها مباشرة عبر خوادم شركة قوقل. ولا حاجة لتحميل الملفات على الخادم الشخصي.

<!--[if lte IE 6]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

٥. Unit PNG Fix

تقنية أخرى تعتمد على مرشح مايكروسوفت AlphaImageLoader Filter عبر الجافاسكربت. ولكني رأيتها من أسوء الوسائل لتطبيق شفافية PNG، فقد فشلت في ٥ اختبارات من ٨ لتطبيق الشفافية. وهناك سبب، هو أن مطوري المكتبة عمدوا عدم دعم بعض أنماط معينة عند تطبيق الشفافية.

ايجابيات

• سهولة التطبيق، بحيث يمكننا إدراج سطر واحد لتطبيق الشفافية.

سلبيات

• نجاح في ٥ من أصل ٨ اختبارات، وهذه تعتبر نسبة ضعيفة جداً.
• سلوك غير متوقع للصور عند عدم تحديد الأبعاد، حيث عندما يتم تخزين الصورة في الملفات المؤقتة cache للمتصفح، يتم إظهار الصورة بشكل صحيح. ولكن عند عمل تحديث للصفحة لا يمكن معرفة الأبعاد، وبالتالي تظهر بشكل سيء.
• لا يمكن تطبيق تمدد الصورة عبر HTML، وهذه ربما ليست بالمشكلة الكبيرة، حيث لا ينصح بتمدد الصورة الأصلية بهذه الطريقة. ولكن بعض المواقع تستخدمها مثلاً لتكبير أو تصغير الصورة.
• تموضع في غير محله عند إدراج حشوة للصورة، حيث ستحدث مشكلة عند تطبيق هذه التقنية عند استخدام نمط على الصورة بحشوة.
• تمدد صورة الخلفية المتكررة، فعند إدراج الصورة كخلفية متكررة خلف تقسيمة، تتمدد الصورة بحسب أبعاد التقسيمة.
• تموضع في غير محله عند التحديد الواضح لتموضع صورة الخلفية، فعند إدراج الصورة كخلفية متموضعة، يتيغير مكانها لتصبح دائماً في أعلى يسار التقسيمة.

طريقة التطبيق

عرض

تحميل

تحتاج بعد تحميل وفك ضغط الملف من الموقع، إلى استخراج ملفان، هما unitpngfix.js، والصورة الفارغة clear.gif. يجب تحديد مسار الصورة الفارغة في ملف unitpngfix.js إذا كان مساراً مختلفاً عن مسار ملف الجافاسكربت.

var clear="clear.gif"; //path to clear.gif

الآن وبكل سهولة، يمكنك إدراج ملف الجافاسكربت على مستند HTML، في جملة الإنترنت إكسبلورر الشرطية كالتالي.

<!--[if lte IE 6]>
		<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

وسائل أخرى تستحق الذكر

• PNGHack، تعتمد على الجافاسكربت، وسهلة نسبياً في تطبيقها.
• Supersleight jQuery، إضافة أخرى لمكتبة jQuery لتطبيق الشفافية باستخدام تقنية SuperSleight.