Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

HTMLالوسم <abbr>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

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

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

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
2 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

يملك خاصية واحدة هي الخاصية 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;
}
جرب الكود