English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يقبل خاصية source media أي استعلام وسائل متاح في CSS، ويمكن لخاصية media أن تأخذ عدة قيم.
عنصر <picture> الذي يحتوي على ملفين مصدرين وإصدار بديل للصورة:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>استخدام خاصية source media في HTML - درس أساسي (oldtoolbag.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> <p>غير حجم المتصفح لرؤية إصدارات الصور المختلفة التي يتم تحميلها عند مختلف أبعاد الشاشة. سيبحث المتصفح عن أول عنصر source الذي يطابق استعلام وسائل الإعلام الحالية مع عرض الشاشة الحالي، وسيحصل على الصورة المحددة في سمة srcset.</p> <p>عنصر img هو آخر علامة فرعية في دالة تصريح الصور. يستخدم عنصر img لتوفير التطابق المكتشف للتوافق مع المتصفحات التي لا تدعم عنصر picture أو لا تتوفر علامة المصدر المتناسبة. </p> </body> </html>اختبر لمعرفة ‹/›
IEFirefoxOperaChromeSafari
جميع المتصفحات الرئيسية تدعم خاصية media. ملاحظة: لا يدعم Internet Explorer 12 وأولى إصداراته أو Safari 9.0 وأولى إصداراته عنصر picture
يقبل خاصية media أي استعلام وسائل متاح في CSS.
ملاحظة:يمكن لهذه الخاصية قبول عدة قيم.
<source> هو علامة جديدة في HTML5.
<source media="value>
| القيمة | الوصف |
|---|---|
| and | تحديد عملاً AND. |
| not | تحديد عملاً NOT. |
| , | تحديد عملاً OR. |
| القيمة | الوصف |
|---|---|
| all | المبدأ الافتراضي. ينطبق على جميع الأجهزة. |
| aural | المحول الصوتي. |
| braille | جهاز التفاعل بالبرايل. |
| handheld | الأجهزة المحمولة (شاشة صغيرة، نطاق تردد محدود). |
| projection | المشروعور. |
| عرض الطباعة المسبق/صفحة الطباعة. | |
| screen | شاشة الكمبيوتر. |
| tty | الماسح الضوئي الكهربائي وكائنات مشابهة تستخدم شبكة حروف متساوية. |
| tv | أجهزة التلفزيون (دقة منخفضة، قدرة على التمرير المحدودة). |
| القيمة | الوصف |
|---|---|
| width | تحديد العرض للمنطقة المستهدفة على العرض. يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (min-width:500px)" |
| height | تحديد الارتفاع للمنطقة المستهدفة على العرض. يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (max-height:700px)" |
| device-width | تحديد العرض لجهاز العرض/ورق المستهدف. يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (device-width:500px)" |
| device-height | تحديد الارتفاع لجهاز العرض/ورق المستهدف. يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (device-height:500px)" |
| orientation | تحديد اتجاه جهاز العرض/ورق المستهدف. القيم الممكنة: "portrait" أو "landscape". مثال: media="all and (orientation: landscape)" |
| aspect-ratio | تحديد نسبة العرض/الارتفاع للمنطقة المستهدفة على العرض. يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | تحديد نسبة device-width/device-height لجهاز العرض/ورق المستهدف。 يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (aspect-ratio:16/9)" |
| color | تحديد bits/color لجهاز العرض المستهدف。 يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (color:3)" |
| color-index | تحديد عدد الألوان التي يمكن معالجتها من قبل جهاز العرض المستهدف. يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (min-color-index:256)" |
| monochrome | تحديد bits/pixel في الذاكرة البصرية المونوخroma. يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="screen and (monochrome:2)" |
| resolution | تحديد كثافة البكسل لجهاز العرض أو الورق المستهدف (dpi أو dpcm). يمكن استخدام بدلاً من ذلك "min-" و "max-". مثال: media="print and (resolution:300dpi)" |
| scan | تحديد طريقة مسح جهاز عرض التلفزيون. القيم المحتملة: "progressive" و "interlace". مثال: media="tv and (scan:interlace)" |
| grid | تحديد ما إذا كان جهاز الإخراج هو شبكة أو bitmap. القيم المحتملة: "1" للشبكة، وإلا "0". مثال: media="handheld and (grid:1)" |