HTMLالوسم <picture>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <picture> لعرض صورة واحدة في الصفحة و لكن هذه الصورة يمكن أن تتبدل لصورة أخرى نسبةً لحجم الصفحة الذي نراه مناسباً لتبديل الصور.
بداخل الوسم <picture> يجب إضافة الصور التي تريد تجهيزها لكي يتم عرضها نسبةً لحجم عرض الشاشة مع وضع كل صورة منهم بداخل وسم <source> و تحديد متى سيتم عرض كل صورة منهم بواسطة كود CSS.
بالإضافة لذلك, يجب وضع صورة إفتراضية بواسطة الوسم <img> حتى يتم عرضها في حال لم يتم عرض أي صورة تم تجهيزها لأي سبب كان.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <picture>.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
38 | 13 | 38 | 25 | 9.1 | 38 | 38 | 38 | 25 | 9.3 | 3.0 |
خصائصه
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا باستخدام الوسم <picture> لتجهيز ثلاث صور يتم عرض واحدة منها فقط نسبةً لحجم الشاشة:
- الصورة الأولى وضعناها بداخل الوسم <source> و حددنا أنه يجب عرضها في حال كان حجم الشاشة أكبر أو يساوي من
600
بكسل. - الصورة الثانية التي وضعناها بداخل الوسم <source> و حددنا أنه يجب عرضها في حال كان حجم الشاشة أكبر أو يساوي من
450
بكسل. - الصورة الثالثة التي وضعناها بداخل الوسم <img> يتم عرضها في حال لم يتم عرض أي صورة وضعناها قبلها.
مثال
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
نصائح و ملاحظات
عند وضع الصور بداخل الوسم <picture> قم دائماً بوضع الوسم <img> حتى يتم عرض الصورة الموضوعة فيه في حال لم يتم عرض أي صورة موضوعة قبله.
استخدام الوسم <picture> يشبه كثيراً استخدام الوسمين <video> و <video> حيث نقوم بوضع عدة وسوم <source> بداخله و نتوقع من المتصفح أن يختار الأفضل منها ليعرضه للمستخدم, مع فارق واحد و هو أننا نحن من نحدد له كيف سيختار الصورة الأفضل بواسطة قواعد CSS.