الصفحة الرئيسية>دروس تصميم الويب>توحيد الويب

إضافة أنماط إلى علامة abbr في IE

الكاتب：Eve Cole وقت التحديث：2009-05-31 00:31:34

مقدمة

يتم استخدام <abbr> لإضافة علامات XHTML ذات العلامات المناسبة إلى الاختصار الموجود على صفحة الويب (ملاحظة المترجم: هنا، يتم النظر في الاختصار والاختصار بشكل منفصل، ونطاق الاختصار أكبر من الاختصار، استخدم علامة <acronym> للحرف الأولي اختصار)، متصفح IE لنظام التشغيل Windows لا يدعم حاليًا العلامة <abbr>. في IE، يمكنك تطبيق CSS على العلامة <acronym> ولكن ليس على العلامة <abbr>. سيعرض IE مطالبة لسمة العنوان للعلامة <acronym>، ولكن يتجاهل العلامة <abbr>.

تسبب هذا الخطأ (أو الميزة) في IE في اعتقاد بعض الأشخاص على موقع الويب أن علامة <abbr> عديمة الفائدة على الإطلاق، ومن الواضح أن هذا خطأ. لا يزال يتم التعامل مع هذه العلامة بشكل صحيح في Mozilla وOpera، وهي مهمة جدًا لسهولة قراءة محتوى الويب ودلالاته. ولهذا السبب ظللت أبحث عن حل، وأخيرا وجدته.

حل

تعتمد هذه الطريقة على حقيقة بسيطة: حتى لو تجاهل IE علامة <abbr>، فإن العلامات الأخرى المتداخلة داخل علامة <abbr> تظل طبيعية. لذلك قمت بتضمين علامة <span> داخل <abbr>، وقمت بتعيين عنوان وسمات فئة <span>، ثم بدأ <abbr> في أن يصبح نفس علامة <acronym>.

مثال التعليمات البرمجية

ألقِ نظرة على الكود أدناه، وهو مثال بسيط للاختصارات:

<abbr title="أوراق الأنماط المتتالية">CSS</abbr>

الآن قارن الكود المعدل:

<abbr title="أوراق الأنماط المتتالية"><span class="abbr" title="أوراق الأنماط المتتالية">CSS</span></abbr>

عملية تلقائية

من الواضح أن تضمين <span> يدويًا في كل علامة <abbr> أمر مستحيل - وهو أمر ممل وغير ضروري لموزيلا وأوبرا. ولحسن الحظ، يوجد الآن حل تلقائي يعتمد على البرنامج النصي من جانب العميل.

ربما لاحظت أن الكلمات المختصرة في هذه الصفحة (ملاحظة المترجم: صفحة المؤلف الأصلية) تتم المطالبة بها حتى في IE، ويتم إضافة أنماط CSS (تسطير منقط ومؤشر ماوس على شكل علامة استفهام). ومع ذلك، إذا نظرت إلى الكود المصدري، فلن تجد علامة <span> المذكورة أعلاه. يتم تحقيق ذلك بفضل JavaScript بسيط يقوم بتحميل هذه الصفحة:

وظيفة ستايلابر () {
فار oldBodyText، newBodyText، reg
إذا (إيسي) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class="abbr" $1>$2</SPAN></ABBR>');
document.body.innerHTML = newBodyText;
}
}
نافذة.onload = وظيفة () {
styleAbbr()
};
isIE = (document.all) صحيح: خطأ؛

سيتحقق هذا البرنامج النصي من متصفح العميل، وإذا كان IE، فاستبدل جميع علامات <abbr> بالإصدارات المعدلة (المضمنة <span>). لاحظ أنه يجب علينا استخدام التعبيرات العادية وسمات HTML الداخلية بدلاً من طريقة DOM القياسية، لأن IE لا يمكنه الحصول على السمة <abbr> من خلال DOM.

التصميم

نظرة أخيرة على CSS المستخدم في هذه الصفحة. بسيط جدًا:

abbr، اختصار،span.abbr {
المؤشر: مساعدة؛
الحد السفلي: 1 بكسل متقطع #000؛
}

يستخدم Mozilla وOpera محددات سمات abbr والاختصار، ويستخدم IE الاختصار وspan.abbr. بغض النظر، تم تصميم كل من <abbr> و<acronym> - باستخدام مؤشر الماوس بعلامة استفهام (عند انتهاء الماوس) وتسطير متقطع.

مقالات ذات صلة