ویژگی <source> رسانه HTML

برچسب <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

تعریف نسبت width/height ناحیه نمایشگر هدف.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

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

تعریف نسبت width/device-height نمایشگر/کاغذ.

می‌توان از پیشوند "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)"
monochrome

تعیین تعداد بیت برای هر پیکسل در فریم‌های تک‌رنگ.

می‌توان از پیشوند "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

تعیین می‌کند که دستگاه خروجی شبکه یا بیت‌مپ است.

ممکنه‌یاردها: "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