تعريفه
نستخدم الوسم <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>
<source media="(min-width:600px)" srcset="pic-1.jpg">
<source media="(min-width:450px)" srcset="pic-2.jpg">
<img alt="Default Image" style="width: auto;" src="default.jpg">
</picture>
جرب الكود
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
نصائح و ملاحظات
عند وضع الصور بداخل الوسم <picture>
قم دائماً بوضع الوسم <img>
حتى يتم عرض الصورة الموضوعة فيه في حال لم يتم عرض أي صورة موضوعة قبله.
استخدام الوسم <picture>
يشبه كثيراً استخدام الوسمين <video>
و <video>
حيث نقوم بوضع عدة وسوم <source>
بداخله و نتوقع من المتصفح أن يختار الأفضل منها ليعرضه للمستخدم, مع فارق واحد و هو أننا نحن من نحدد له كيف سيختار الصورة الأفضل بواسطة قواعد CSS.