الفرق بين المراجعتين ل"HTML/picture"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (تغيير ترتيب التصنيفات)
ط (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1')
سطر 51: سطر 51:
 
[[تصنيف:HTML]]
 
[[تصنيف:HTML]]
 
[[تصنيف:HTML Elements]]
 
[[تصنيف:HTML Elements]]
[[تصنيف:Embedded content]]
+
[[تصنيف:HTML Embedded content]]

مراجعة 15:36، 28 يناير 2018

يُمثِّل العنصر <picture> حاويةً تُستخدَم لتحديد عدِّة مصادر عبر العنصر <source> لصورة <img> محتواة داخله؛ وسيختار المتصفح أنسب مصدر للصورة اعتمادًا على تخطيط الصفحة (أي الصندوق المحتوى فيه هذا العنصر) والجهاز الذي ستُعرَض الصورة داخله (هل شاشته عادية أم عالية الدقة).

مثال عن استخدام العنصر <picture> لتخديم صورة شعار عريضة إن تحقق شرط media query معيّن (وهو أن يكون العرض على الأقل 600 بكسل) وذلك باستخدام الخاصية media مع العنصر <source>؛ وإذا لم تحقق شرط media query فسيتم تخطي العنصر <source> والانتقال إلى ما بعده:

<picture>
 <source srcset="logo-wide.png" media="(min-width: 600px)">
 <img src="logo-narrow.png" alt="Logo">
</picture>

مثال عن استخدام العنصر <picture> لتخديم صورة بنوع MIME معيّن، وإن لم يدعم المتصفح ذاك النوع (أي صيغة الصور لا تعمل في المتصفح) فسيتم تخطي العنصر <source> والانتقال إلى ما بعده:

<picture>
 <source srcset="logo.svg" type="image/svg+xml">
 <img src="logo.png" alt="Logo">
</picture>
تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح عنصر <source> صفر مرة أو أكثر، يتبعه العنصر <img>.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل العناصر التضمينية.
واجهة DOM HTMLPictureElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
38 38 13 9.1 25

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

مصادر ومواصفات