Media در CSS به شما اجازه فرمت صحیح اسنادتان در انواع مختلف رسانه ها مانند screen (صفحه نمایش)، print (پرینت)، مرورگر و غیره را می دهد.
مقدمه ای بر انواع Media در CSS
یکی از مهم ترین ویژگی های سند CSS این است که می توانید style sheet جداگانه ای را برای انواع مختلف رسانه ها مشخص نمایید. این امر یکی از بهترین راه های ایجاد صفحات وب مناسب برای چاپگر می باشد که تنها با اختصاص style sheet متفاوت برای نوع رسانه “print” امکان پذیر است.
برخی از خاصیت های CSS تنها برای رسانه های خاص طراحی شده اند برای مثال، خاصیت page-break-after تنها برای رسانه های صفحه اعمال می شود.
با این حال، چندین خاصیت وجود دارد که می توانند در media type های مختلف مشترک باشند، اما ممکن است مقادیر مختلفی برای آن property مورد نیاز باشد.
برای مثال خاصیت font-size می تواند برای رسانه های صفحه نمایش و پرینت با مقادیر مختلف استفاده شود.
معمولا سند HTML بر روی صفحه کامپیوتر جهت درک بهتر نیاز به فونت بزرگتری نسبت به کاغذ دارد و همچنین فونت های sans-serif برای خوانده شدن بر روی صفحه نمایش آسان تر می باشند
در حالی که فونت های serif برای پرینت محبوب ترند. بنابراین مشخص نمودن این که style sheet یا مجموعه ای از قوانین استایل به کدام media در CSS اعمال می شود، امری ضروری است.
بارگذاری استایل وابسته به media
سه روش معمول برای بارگذاری استایل وابسته به media وجود دارد.
روش ۱: استفاده از @media
رول @media جهت تعیین استایل های مختلف برای انواع رسانه های متفاوت استفاده می شود.
در مثال زیر استایل به مرورگر می گوید تا محتوای body در ۱۴ پیکسل و فونت Arial را بر روی صفحه نمایش دهد، اما در صورت پرینت در فونت Times با اندازه ۱۲ می شود.
با این حال، مقدار خاصیت line-height برای هر یک یا هر دو آن تنظیم شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@media screen{ body { color: #32cd32; font-family: Arial, sans-serif; font-size: 14px; } } @media print { body { color: #ff6347; font-family: Times, serif; font-size: 12pt; } } @media screen, print { body { line-height: 1.2; } } |
نکته: قوانین استایل در خارج از قوانین @media بر تمامی media ها اعمال می شود.
روش ۲: استفاده از @import At-rules
رول @import راه دیگری برای تنظیم اطلاعات استایل برای دیوایس خاص است
برای اینکار تنها کافی است تا media های جدا شده با کاما را بعد از URL سند استایل وارد شده مشخص نمایید.
|
1 2 3 4 5 6 |
@import url("css/screen.css") screen; @import url("css/print.css") print; body { background: #f5f5f5; line-height: 1.2; } |
نوع print در رول @import به مرورگر دستور بارگیری یک style sheet خارجی (print.css) و استفاده از استایل های آن تنها برای رسانه های پرینت را می دهد.
نکته: تمامی رول های @import باید در ابتدای یک فایل css و پیش از هر گونه استایلی قرار بگیرد. هر قاعده ای که در فایل css مشخص شده، قوانین استایل متناقض وارد شده در همان فایل استایل را منع می نماید.
روش ۳: استفاده از المان <link>
ویژگی media در خاصیت المان <link> جهت مشخص نمودن رسانه هدف style sheet خارجی در سند HTML استفاده می شود.
|
1 2 3 |
<link rel="stylesheet" type="text/css" media="all" href="css/common.css"> <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css"> <link rel="stylesheet" type="text/css" media="print" href="css/print.css"> |
این مثال به مرورگر دستور بارگذاری و استفاده از فایل ” screen.css” تنها برای صفحه نمایش را می دهد و از استایل های print.css برای پرینت استفاده می کند.
نکته: شما همچنین می توانید چندین نوع مدیا را (هر کدام را مانند مثال media="screen, print" با کاما جدا کنید، ) رای المان <link> مشخص نمایید.
انواع media ها
جدول زیر انواع مختلف رسانه ای را که ممکن است برای هدف گیری انواع مختلف دستگاه ها مانند پرینترها، دستگاه های دستی، صفحه نمایش کامپیوتر و غیره استفاده شود، لیست می کند.
| انواع مدیا | شرح |
| all | برای تمام دستگاه های media type استفاده می شود. |
| aural | برای ترکیب بندی های سخنرانی و صدا مورد استفاده قرار می گیرد. |
| braille | برای فیدبک دستگاه های لمس بریل استفاده می شود. |
| embossed | برای پرینتر های صفحات بریل ورد استفاده قرار می گیرد. |
| handheld | برای دستگاه های دستی کوچک استفاده می شود – معمولا دستگاه های صفحه نمایش کوچک مانند تلفن های همراه و یا PDA ها می باشد. |
| برای پرینترها استفاده می شود. | |
| projection | برای سخنرانی ها به عنوان مثال پروژکتور استفاده می شود. |
| screen | در درجه اول برای صفحه نمایش های رایانه ای رنگی استفاده می شود |
| tty | برای رسانه ها با استفاده از کاراکتر fixed-pitch ، مانند تله تایپ ها، پایانه ها یا دستگاه های قابل حمل با قابلیت های نمایش محدود استفاده می شود. |
| tv | برای انواع دستگاه های تلویزیون با رزولوشن پایین، رنگ، صفحه نمایش محدود و دسترسی صدا استفاده می شود. |
هشدار: با وجود اینکه انواع مختلفی از رسانه برای انتخاب وجود دارد اما اکثر مرورگر ها تنها از چند نوع رسانه برای، screen و print پشتیبانی می کند.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
