ویژگی <link> media HTML
تعریف و استفاده
media ویژگی مشخص می‌کند که منبع هدف برای چه رسانه/دستگاه بهینه‌سازی شده است.
media ویژگی مشخص می‌کند که مستند پیوند شده در چه دستگاهی نمایش داده خواهد شد.
این ویژگی عمدتاً با جدول استایل CSS استفاده می‌شود تا برای رسانه‌های مختلف استایل‌های مختلفی را تعیین کند.
media ویژگی می‌تواند چندین مقدار را پذیرا باشد.
مثال
دو نوع مختلف از استایل‌ها برای دو نوع مختلف از رسانه‌ها (صفحه نمایش و چاپ):
<head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </head>
نحوه استفاده
<link media="مقدار>
عملگرهای ممکن
| عملگرها | توضیحات |
|---|---|
| and | تعریف علامت عملگر AND. |
| not | تعریف علامت عملگر NOT. |
| , | تعریف علامت عملگر OR. |
دستگاه
| دستگاه | توضیحات |
|---|---|
| all | پیش‌فرض. برای همه نوع دستگاه‌های رسانه. |
| برای نمایش پیش‌نویس چاپ/صفحه چاپ. | |
| screen | برای کامپیوترهای نمایش، تبلت‌ها، تلفن‌های هوشمند و مانند آن‌ها. |
| speech | برای خواندن صفحه‌ها از صفحه‌خوان‌های نمایشگر استفاده می‌شود. |
| aural | استفاده شده است.سینت‌سایزر صوتی. |
| braille | استفاده شده است.دستگاه‌های بازخورد نابینایان. |
| handheld | استفاده شده است.دستگاه‌های موبایل (صفحه نمایش کوچک، باند پهنای محدود). |
| projection | استفاده شده است.پروژکتور. |
| tty | استفاده شده است.استفاده از شبکه با فاصله ثابت برای ماشین‌های تحریر الکترونیکی و مانند آن‌ها. |
| tv | استفاده شده است.دستگاه‌های نوع تلویزیون (رزولوشن پایین، توانایی اسکرول محدود). |
مقادیر
| مقادیر | توضیحات |
|---|---|
| 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)" |
| device-aspect-ratio | استفاده شده است.تعریف نسبت device-width/device-height نمایشگر/کاغذ هدف. |
| device-width | استفاده شده است.تعریف عرض نمایشگر/کاغذ هدف. |
| device-height | استفاده شده است.تعریف ارتفاع نمایشگر/کاغذ هدف. |
| grid |
تعریف که دستگاه خروجی شبکه یا bitmap است. ممکن‌ترین مقادیر: "1" برای شبکه، "0" برای دیگر. مثال: media="handheld and (grid:1)" |
| height |
تعریف ارتفاع ناحیه نمایش هدف. می‌توان از پیشوند‌های "min-" و "max-" استفاده کرد. مثال: media="screen and (max-height:700px)" |
| monochrome |
تعریف در هر پیکسل از فریم buffer تک‌رنگ. می‌توان از پیشوند‌های "min-" و "max-" استفاده کرد. مثال: media="screen and (monochrome:2)" |
| جهت |
جهت نمایشگر/کاغذ هدف را مشخص می‌کند. ممکنه‌یاردها: "portrait" یا "landscape". مثال: media="all and (orientation: landscape)" |
| رزولوشن |
پیکسل‌های نمایشگر/کاغذ هدف را مشخص می‌کند (dpi یا dpcm). می‌توان از پیشوند‌های "min-" و "max-" استفاده کرد. مثال: media="print and (resolution:300dpi)" |
| اسکن |
روش اسکن نمایشگر تلویزیون را مشخص می‌کند. ممکنه‌یاردها: "progressive" و "interlace". مثال: media="tv and (scan:interlace)" |
| عرض |
پر کردن فضای نمایشی هدف را مشخص می‌کند. می‌توان از پیشوند‌های "min-" و "max-" استفاده کرد. مثال: media="screen and (min-width:500px)" |
پشتیبانی از مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
