این آموزش در تاریخ ۱۴۰۲/۰۶/۲۰ آپدیت شده است.
آموزش صفت Media در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Media در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Media در HTML
صفت media صفتی است که با استفاده از آن میتوان یک رسانه ( یا فایل یا صفحه ) را جهت نمایش هرچه بهتر برای دستگاهای مختلف ( مثه گوشی های موبایل ، تبلت ها و… ) بهینه سازی کرد و معمولا و بیشتر از این صفت در تگ های link و source و style استفاده میشه.
باز بیشترین استفادش در تگ link هستش و یه مثال بخوام بزنم، خب میایم ۲ تا فایل CSS درست میکنیم یکیش در حالت عادی روی صفحه اعمال میشه و یکیشم وقتی صفحه میخواد پرینت بشه. ( یعنی وقتی اون صفحه پرینت یا چاپ شد فلان دستورات CSS رو صفحه اعمال میشه )
یا مثلا با استفاده در تگ source میتونیم چندین تصویر رو بصورت همزمان در چندین اندازه مختلف صفحه به نمایش درآوریم، یعنی مثلا میگیم اگه اندازه عرض صفحه ۵۰۰پیکسل بود فلان عکسو نشون بده و اگه ۷۰۰پیکسل بود بهمان عکسو، به همین راحتی.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <area> | <a> |
| <source> | <link> |
| <style> | |
Free-Learn
مثال از صفت Media در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ a ( مثه اینه که گفتیم اون فایل MyFile.html که بهش لینک شده یه فایلی هست که مخصوص پرینت هستش با وضوح یا رزولوشن ۳۰۰ )
|
1 2 3 4 5 6 7 |
<body> <a href="MyFile.html" media="print and (resolution:300dpi)"> کلیک کنید </a> </body> |
مثال شماره ۲ : استفاده در تگ Area
|
1 2 3 4 5 6 7 8 9 |
<body> <img src="planets.jpg" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.html" media="print and (resolution:300dpi)"> </map> </body> |
مثال شماره ۳ : استفاده در تگ Link ، مثلا من یه فایل CSS ایجاد کردم که مخصوص صفحه پرینت می باشد، یعنی اون دستورات CSS فقط وقتی صفحه پرینت شد روی تگ ها اعمال میشن، بطور مثال گفتم وقتی که صفحه پرینت شد تگ h2 رنگش زرد بشه.
محتویات فایل demo_print.css :
|
1 2 3 4 |
body{background-color:#ff0000;} h2 {color:yellow;} h3 {color:blue;} p{color:red;} |
|
1 2 3 |
<head> <link rel="stylesheet" href="files/demo_print.css" media="print"> </head> |
مثال شماره ۴ : استفاده در تگ Source
در مثال زیر گفتم وقتی اندازه صفحه نمایش بزرگتر از ۶۵۰ پیکسل شد عکس pic-1.jpg رو نشون بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد عکس pic-3.jpg ، و وقتی هم اندازه بین ۴۶۵ تا ۶۵۰ بود عکس pic-2.jpg رو نشون بده.
|
1 2 3 4 5 6 7 8 9 |
<body> <picture> <source media="(min-width: 650px)" srcset="files/pic-1.jpg"> <source media="(min-width: 465px)" srcset="files/pic-2.jpg"> <img src="files/pic-3.jpg"> </picture> </body> |
مثال شماره ۵ : استفاده در تگ Style
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <!-- استایل در حالت عادی --> <style> body{background-color:#1E221E; text-align:center;} h2{color:red;} p{color:yellow;} </style> <!-- استایل مخصوص صفحه پرینت --> <style media="print"> body{background-color:white;} h2{color:blue;} p{color:red;} </style> </head> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت media در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| a | بله | بله | بله | بله | بله |
| area | بله | بله | بله | بله | بله |
| link | بله | بله | بله | بله | بله |
| source | بله | بله | بله | بله | بله |
| style | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 2 3 4 5 |
<a media="Value"> <area media="Value"> <link media="Value"> <source media="Value"> <style media="Value"> |
Free-Learn
جدول مقادیر صفت Media در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
- عملگرها
| مقدار | توضیح |
|---|---|
| and | و |
| not | نه ( نبودن ) |
| , | یا |
- دستگاه ها
| مقدار |
|---|
| 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 | نسبت عرض و ارتفاع صفحه را به نسبت عرض و ارتفاع صفحه نمایش مقصد مشخص می کند میتوان از پیشوندهای 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 | رزولیشن صفحه نمایش مقصد را مشخص میکند میتوان از پیشوندهای min- یا max- استفاده کرد “media=”print and (resolution:300dpi) |
| scan | برای مشخص کردن نوع اسکن TV مقادیر قابل قبول “progressive” یا “interlace” “media=”tv and (scan:interlace) |
| grid | مشخص میکند که اگر خروجی grid یا bitmap باشد مقادیر قابل قبول ۱ یا ۰ “media=”handheld and (grid:1) |
Free-Learn
نکات و توضیحات
- این صفت در تگ های a و area و link و source تنها در صورتی عمل خواهد کرد که صفت href در این تگ ها وجود داشته باشد.
