خصائص وسائل HTML <source>

علامة <source> في HTML

تعريف الاستخدام

media الخاصية تقبل أي استعلام وسائل متعددة معروفة في CSS.

ملاحظة:هذه الخاصية يمكن أن تأخذ عدة قيم.

مثال

عنصر <picture> يحتوي على ملفين مصدرين وملف احتياطي واحد:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

جرب بنفسك

القواعد

<source media="media_query>

المعادلات الممكنة

المعادلات الوصف
and يحدد عملاً AND.
not يحدد عملاً NOT.
, يحدد عملاً OR.

الجهاز

القيمة الوصف
all المبدأ الافتراضي. يناسب جميع الأجهزة.
aural مولد الصوت.
braille جهاز العودة البصرية للمكفوفين.
handheld أجهزة المحمولة (شاشة صغيرة، نطاق تردد محدود).
projection المشروعور.
print عرض الطباعة المسبق/صفحة الطباعة.
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

يحدد نسبة عرض/طول جهاز الشاشة/ورق.

يمكن استخدام التمثيليات "min-" و "max-".

مثال: media="screen and (aspect-ratio:16/9)"
color

يحدد عدد الأبنية لكل لون في الشاشة المستهدفة.

يمكن استخدام التمثيليات "min-" و "max-".

مثال: media="screen and (color:3)"
color-index

يحدد عدد الألوان التي يمكن للشاشة المستهدفة معالجتها.

يمكن استخدام التمثيليات "min-" و "max-".

مثال: media="screen and (min-color-index:256)"
الفاتح

يحدد عدد البتات لكل بكسل في الفيديو الفاتح.

يمكن استخدام التمثيليات "min-" و "max-".

مثال: media="screen and (monochrome:2)"
كثافة البكسل

يحدد كثافة البكسل للمستعرض الهدف/ورق (dpi أو dpcm).

يمكن استخدام التمثيليات "min-" و "max-".

مثال: media="print and (resolution:300dpi)"
مسح

يحدد طريقة مسح جهاز العرض التلفزيوني.

القيم الممكنة هي: "progressive" و "interlace".

مثال: media="tv and (scan:interlace)"
شبكة

يحدد جهاز الإخراج هو شبكة أم bitmap.

القيم الممكنة: "1" تمثل الشبكة، "0" هي الأخرى.

مثال: media="handheld and (grid:1)"

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0

علامة <source> في HTML