ویژگی <style> رسانه‌ای

برچسب <style> HTML

تعریف و استفاده

media خصوصیت برای تعیین رسانه/دستگاه هدف (بهینه‌سازی) استایل‌های CSS استفاده می‌شود.

این خاصیت برای تعیین استایل‌هایی که برای دستگاه‌های خاص (مثل iPhone) یا رسانه‌های صوتی یا چاپ مناسب هستند استفاده می‌شود.

توضیح:این خاصیت می‌تواند مقادیر چندگانه را پذیرا باشد.

مثال

مثال 1

استایل‌های تعریف شده برای چاپ:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

آزمایش کنید!

مثال 2

استایل‌های دوگانه را با استفاده از ویژگی width خاص attribute media جدا می‌کنیم:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

آزمایش کنید!

توضیح:وقتی که عرض پنجره مرورگر کمتر از 500 پیکسل است از اولین مجموعه استایل استفاده می‌شود، وقتی که عرض پنجره مرورگر بیشتر از 500 پیکسل است از دومین مجموعه استایل استفاده می‌شود.

نوع زبان

<style media="value>

عملگرهای ممکن

عملگر توضیحات
and عملگر تعریف شده. عملگر AND.
not عملگر تعریف شده. عملگر NOT.
, عملگر تعریف شده. عملگر OR.

شرایط استفاده از استایل می‌تواند بسیار دقیق طراحی شود. ابتدا باید واضح باشد که نوع دستگاه هدف چیست. جدول زیر تمام مقادیر مجاز را جمع‌بندی می‌کند:

دستگاه

دستگاه توضیحات
all پیش‌فرض. برای همه دستگاه‌ها مناسب است.
aural پردازنده‌های صدای ترکیبی.
braille دستگاه‌های بازخورد نابینایان.
handheld دستگاه‌های موبایل (صفحه نمایش کوچک، پهنای باند محدود).
projection پروژکتور.
print پیش‌نمایش چاپ/صفحه چاپ.
screen صفحه نمایش کامپیوتر.
tty صفحات ماشین نویس و رسانه‌های مشابه با شبکه حروف ثابت استفاده از فاصله.
tv دستگاه‌های تلویزیونی (با رزولوشن پایین، توانایی اسکرول محدود).

مرورگر مسئول تفسیر دسته‌بندی دستگاه‌هاست. برخی از نوع دستگاه‌ها (مثلاً screen و print) در مرورگرهای مختلف به طور یکسان تفسیر می‌شوند، اما برخی دیگر از دستگاه‌ها (مثلاً handheld) ممکن است به صورت تصادفی تفسیر شوند. بنابراین، اطمینان حاصل کنید که تفسیر مرورگر هدف از دستگاه خاص با تفسیر خود شما مطابقت دارد بسیار ضروری است.

ویژگی‌ها

ویژگی‌ها توضیحات
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)"
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

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

دستگاه‌های شبکه‌ای محتوا را با استفاده از شبکه ثابت نمایش می‌دهند، مانند دستگاه‌های پایانه مبتنی بر کاراکتر و پیام‌رسان‌های نمایش یک خط.

مقادیر پشتیبانی شده شامل 0 و 1 (1 برای دستگاه‌های شبکه‌ای) است.

این ویژگی دارای限定‌کننده نیست.

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

ویژگی‌هایی مانند width معمولاً با限定‌کنندگان min و max استفاده می‌شوند. بدون استفاده از این限定‌کنندگان، استفاده از استایل‌ها می‌تواند به وسیله اندازه‌های دقیق پنجره بستگی داشته باشد، اما اضافه کردن限定‌کنندگان باعث می‌شود شرایط بیشتر انعطاف‌پذیر شوند.

جدول بالا ویژگی‌های مختلف موجود را لیست کرده و معرفی کرده است. مگر که به طور خاص ذکر شده باشد، این ویژگی‌ها می‌توانند با min- و max- استفاده شوند تا مقادیر مرزی ایجاد کنند نه مقادیر دقیق.

مثل دستگاه‌های مشخص شده، این ویژگی‌ها نیز توسط مرورگرها توضیح داده می‌شوند. شرایط مختلفی در مورد اینکه مرورگرها کدام ویژگی‌ها را می‌شناسند و زمانی که این ویژگی‌ها وجود دارند و قابل استفاده هستند، وجود دارد. اگر می‌خواهید از این ویژگی‌ها برای اعمال استایل استفاده کنید، لطفاً از تست‌های جامع استفاده کنید و استایل‌های جایگزین برای زمانی که ویژگی‌ها قابل استفاده نیستند آماده کنید.

پشتیبانی از مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

برچسب <style> HTML