الفرق بين المراجعتين لصفحة: «HTML/picture»
< HTML
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
تعديل الأمثلة |
||
| سطر 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"> | مثال عن استخدام العنصر <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> | <picture> | ||
<source srcset=" | <source srcset="cover-large.png" media="(min-width: 600px)"> | ||
<img src=" | <img src="cover-small.png" alt="Cover Picture"> | ||
</picture> | </picture> | ||
</syntaxhighlight>مثال عن استخدام العنصر <code><picture></code> لتخديم صورة بنوع MIME معيّن، وإن لم يدعم المتصفح ذاك النوع (أي صيغة الصور لا تعمل في المتصفح) فسيتم تخطي العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code> والانتقال إلى ما بعده: | </syntaxhighlight>مثال عن استخدام العنصر <code><picture></code> لتخديم صورة بنوع MIME معيّن، وإن لم يدعم المتصفح ذاك النوع (أي صيغة الصور لا تعمل في المتصفح) فسيتم تخطي العنصر <code>[[HTML/source|<nowiki><source></nowiki>]]</code> والانتقال إلى ما بعده: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<picture> | |||
<source srcset="wiki-logo.svg" type="image/svg+xml"> | |||
<img src="wiki-logo.png" alt="Wiki Hsoub Logo"> | |||
</picture> | </picture> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
المراجعة الحالية بتاريخ 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.