HTMLالوسم <kbd>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <kbd> على هذا النحو <kbd> </kbd> لعرض أسماء الأزرار الموجودة على الكيبورد بشكل مختلف عن باقي النص الموضوع في الصفحة.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <kbd>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
خصائصه
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا بعرض إسم الزر Ctrl و إسم الزر S بخط مختلف عن باقي النص.
مثال
Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save this page on your computer.
Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save this page on your computer.
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
kbd {
font-family: monospace;
}
kbd {
font-family: monospace;
}
نصائح و ملاحظات
في العادة يتم تحسين طريقة ظهور الوسم <kbd> بواسطة كود CSS لإظهار الكلام الموضوع فيه كزر.
مثال
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #fff;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,.2), 0 0 0 2px #fff inset;
white-space: nowrap;
}
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #fff;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,.2), 0 0 0 2px #fff inset;
white-space: nowrap;
}
