HTMLالوسم <abbr>

تعريفه

نستخدم الوسم <abbr> على هذا النحو <abbr title="hidden">visible</abbr> لوضع إسم مختصر ( Abbreviation ) بدل الإسم الكامل و عند تمرير الفأرة فوقه يقوم المتصفح بإظهار الإسم الكامل كتلميح فوقها.

• مكان الكلمة visible نضع النص الذي نريده أن يظهر أمام المستخدم.
• مكان الكلمة hidden نضع النص الذي نريده أن يظهر عند تمرير الماوس فوقه النص الظاهر في الصفحة.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <abbr>.

خصائصه

يملك خاصية واحدة هي الخاصية title التي نضيفها له لكتابة النص المخفي الذي سيتم إظهاره عند تمرير الماوس فوق الوسم.

إستخدامه

في المثال التالي قمنا بعرض الكلمة HTML في الصفحة و عند تمرير الماوس فوقها ستظهر الجملة Hyper Text Markup Language كتلميح فوقها.

<abbr title="Hyper Text Markup Language">HTML</abbr>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

abbr {
    display: inline;
}

بالإضافة للخاصية السابقة فإن بعض المتصفحات تضيف له خصائص CSS أخرى لعرضه بشكل أفضل، فمثلاً Chrome و Firefox يعرضوا تحت الكلام الموضوع في الوسم خط منقّط، أي أنهم يعتمدوا التنسيق التالي.

abbr {
    display: inline;
    text-decoration: underline dotted;
}

بالإضافة إلى الخط المنقط، هناك عدد قليل من المتصفحات تعرض جميع أحرفه إذا كانت أحرفه لاتينية كأحرف كبيرة ( Capital Letters ), أي أنهم يعتمدوا التنسيق التالي.

abbr {
    display: inline;
    text-decoration: underline dotted;
    font-variant: small-caps;
}

نصائح و ملاحظات

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

abbr {
    text-decoration: underline dotted;
    font-variant: none;
}