الفرق بين المراجعتين لصفحة: «HTML/picture»

المراجعة الحالية بتاريخ 08:49، 21 فبراير 2018

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

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

<picture>
 <source srcset="cover-large.png" media="(min-width: 600px)">
 <img src="cover-small.png" alt="Cover Picture">
</picture>

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

<picture>
  <source srcset="wiki-logo.svg" type="image/svg+xml">
  <img src="wiki-logo.png" alt="Wiki Hsoub Logo">
</picture>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح	عنصر `<source>` صفر مرة أو أكثر، يتبعه العنصر `<img>`.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل العناصر التضمينية.
واجهة DOM	`HTMLPictureElement`

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

Chrome	Firefox	Edge	Safari	Opera
38	38	13	9.1	25

الخاصيات

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

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

معيار HTML Living Standard.

@@ سطر 3: / سطر 3: @@
 مثال عن استخدام العنصر <code><picture></code> لتخديم صورة شعار عريضة إن تحقق شرط media query معيّن (وهو أن يكون العرض على الأقل 600 بكسل) وذلك باستخدام الخاصية <code>[[HTML/source#media|media]]</code> مع العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code>؛ وإذا لم تحقق شرط media query فسيتم تخطي العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code> والانتقال إلى ما بعده:<syntaxhighlight lang="html">
 <picture>
-  <source srcset="logo-wide.png" media="(min-width: 600px)">
+  <source srcset="cover-large.png" media="(min-width: 600px)">
-  <img src="logo-narrow.png" alt="Logo">
+  <img src="cover-small.png" alt="Cover Picture">
 </picture>
 </syntaxhighlight>مثال عن استخدام العنصر <code><picture></code> لتخديم صورة بنوع MIME معيّن، وإن لم يدعم المتصفح ذاك النوع (أي صيغة الصور لا تعمل في المتصفح) فسيتم تخطي العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code> والانتقال إلى ما بعده:
 <syntaxhighlight lang="html">
 <picture>
- <source srcset="logo.svg" type="image/svg+xml">
+  <source srcset="wiki-logo.svg" type="image/svg+xml">
- <img src="logo.png" alt="Logo">
+  <img src="wiki-logo.png" alt="Wiki Hsoub Logo">
 </picture>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 49: / سطر 51: @@
 ==مصادر ومواصفات==
 *معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element HTML Living Standard].
-[[تصنيف:Embedded content]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML]]
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]
+[[تصنيف:HTML Embedded content|{{SUBPAGENAME}}]]