HTMLالوسم <template>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <template> على هذا النحو <template>content</template> لتجهيز المحتوى الذي سيتم عرضه لاحقاً في الصفحة بشكل مخفي و عند الحاجة لإظهاره يمكن إنشاء نسخة منه بواسطة جافا سكربت.
مكان الكلمة content
نضع كل المحتوى الذي نريد تجهيزه فيه.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <template>.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
26 | 13 | 22 | 15 | 8 | مدعوم | 26 | 22 | ؟ | 8 | 1.5 |
خصائصه
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا بكتابة كود الجافا سكربت الأساسي الذي يسمح بمعرفة ما إن كان المتصفح يدعم الوسم <template> أم لا يدعمه.
المثال الأول
في المثال التالي قمنا بوضع زر عادي في الصفحة و تحته وسم <template> وضعنا فيه عنوان و فقرة.
عند النقر على الزر سيتم إنشاء نسخة من المحتوى الموجود في الوسم <template> و إضافتها في الصفحة.
المثال الثاني
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
نصائح و ملاحظات
إذاً يمكنك الإستفادة من هذا الوسم في حال كنت تريد تجهيز محتوى في الصفحة و هذا المحتوى قد تحتاج عرضه نفسه لاحقا أكثر من مرة.