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 { 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; }
نصائح و ملاحظات
الأفضل أن تحدد تنسيق هذا الوسم بنفسك لضمان أن يظهر بذات الطريقة في جميع المتصفحات, فمثلاً يمكنك إضافة التنسيق التالي له لضمان أن يظهر خط منقط تحت الكلام الموضوع فيه بالإضافة إلى بقاء أحرفه بالشكل الذي وضعته فيها.