HTMLالوسم <figcaption>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <figcaption> لعرض وصف للشيء الموضوع بداخل الوسم <figure> على النحو التالي.
<figure>
<img src="example.png">
<figcaption>text</figcaption>
</figure>
<figure>
<img src="example.png">
<figcaption>text</figcaption>
</figure>
مكان الكلمة text نمرر النص الذي سيتم عرضه كوصف لهذا الشيء.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <figcaption>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 8 | 12 | 4 | 11 | 5.1 | مدعوم | مدعوم | 4 | 11 | 5.1 | مدعوم |
خصائصه
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا بإضافة صورة و وصف خاص بها.
المثال الأول
<figure>
<img src="planets.PNG">
<figcaption>Fig 1 - The solar system.</figcaption>
</figure>
<figure>
<img src="planets.PNG">
<figcaption>Fig 1 - The solar system.</figcaption>
</figure>
في المثال التالي قمنا بتحسين ظهور الصورة و الوصف الخاص بها بواسطة كود CSS.
المثال الثاني
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 254px;
margin: auto;
}
img {
max-width: 254px;
height: auto;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 6px 3px;
text-align: center;
}
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 254px;
margin: auto;
}
img {
max-width: 254px;
height: auto;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 6px 3px;
text-align: center;
}
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
figcaption {
display: block;
}
figcaption {
display: block;
}
نصائح و ملاحظات
يمكنك وضع وصف الشيء الموضوع فوقه أو تحته على حسب تصميمك و يمكنك تعديل طريقة ظهورهم بواسطة CSS ليظهروا بالشكل الذي تريده.
