آموزش انواع رسانه در CSS به زبان ساده با مثال

انواع رسانه ها در CSS این امکان را فراهم می کنند تا بتوانید اسناد خود را به درستی روی انواع رسانه های مختلف مانند: صفحه نمایش، چاپ، مرورگر شنیداری و …. قالب بندی کنید.

آشنایی با انواع رسانه ها

یکی از مهمترین ویژگی های برگه های سبک این است که، می توانید برای انواع مختلف رسانه برگه های سبک جداگانه تعیین کنید. این یکی از بهترین راه ها برای ایجاد صفحات وب سازگار با چاپگر است – کافیست فقط یک برگه سبک متفاوت برای نوع رسانه “چاپ” اختصاص دهید.

برخی از ویژگی های CSS فقط برای رسانه های خاصی طراحی شده اند. به عنوان مثال، ویژگی page-break-after، فقط روی رسانه های کاغذی اعمال می شود. با این وجود چندین ویژگی وجود دارد که توسط انواع رسانه های مختلف به اشتراک گذاشته می شوند اما ممکن است مقادیر متفاوتی برای آن ویژگی وجود داشته باشد. به عنوان مثال ویژگی font-size را می توان برای هر دو رسانه صفحه نمایش و چاپی استفاده کرد، اما احتمالاً با مقادیر متفاوت.

برای خوانایی بیشتر، یک سند معمولاً به یک فونت بزرگتر روی کامپیوتر در مقایسه با رسانه کاغذی نیاز دارد، همچنین فونت های sans-serif راحت تر در صفحه خوانده می شوند، در حالی که قلم های serif برای چاپ رایج تر هستند. بنابراین لازم است که یک برگه سبک (یا شیوه نامه) یا مجموعه ای از قوانین سبک برای اعمال روی هر نوع رسانه خاص، مشخص کنیم.

ایجاد برگه های سبک وابسته به رسانه

سه روش رایج برای مشخص کردن وابستگی های رسانه ای برای برگه های سبک استفاده می شود:

روش ۱: استفاده از قوانین media@

قانونmedia@  برای تعریف قوانین سبک مختلف برای انواع رسانه های مختلف در یک شیوه نامه واحد استفاده می شود. برگه سبک شامل لیستی از انواع رسانه (که با کاما از یکدیگر جدا می شوند) و عبارت های CSS حاوی قواعد سبک برای رسانه هدف است.

در مثال زیر، قانون سبک به مرورگر می گوید که محتوایbody را در ۱۴ پیکسل روی قلم Arial در صفحه نمایش دهد اما در صورت چاپ آن را با قلم ۱۲ نقطه روی قلم Times چاپ کند. اما مقدار ویژگی line-height برای هر دوی آنها ۱٫۲ است:

مثال

@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@ در CSS2.1 نامعتبر است.

روش ۲: استفاده از قوانین@import

قانون import@ روش دیگری برای تنظیم اطلاعات سبک برای رسانه هدف خاص است – فقط انواع رسانه ها (جدا شده با کاما) را بعد از آدرس برگه های سبک ورودی مشخص کنید.

مثال

@import url(“css/screen.css”) screen;
@import url(“css/print.css”) print;
body {
background: #f5f5f5;
line-height: 1.2;
}

نوع رسانه print در اعلانimport@ به مرورگر دستور می دهد تا یک شیوه نامه خارجی (print.css) را بارگیری کند و از سبک های آن فقط برای رسانه چاپ استفاده کند.

توجه: همه اعلان هایimport@ باید قبل از هرگونه اعلانی، در ابتدای صفحه شیوه نامه رخ دهد. هر قانون سبک مشخص شده در شیوه نامه، روی قوانین متضاد سبک در برگه های سبک ورودی بازنویسی می شود.

روش ۳: استفاده از عنصر <link>

ویژگی media  در عنصر <link> برای مشخص کردن رسانه هدف برای یک شیوه نامه خارجی در سند HTML استفاده می شود.

مثال

<link rel=”stylesheet” media=”all” href=”css/common.css”>
<link rel=”stylesheet” media=”screen” href=”css/screen.css”>
<link rel=”stylesheet” media=”print” href=”css/print.css”>

در این مثال ویژگیmedia  به مرورگر دستور می دهد تا صفحه سبک خارجی “screen.css” را بارگذاری کند و از سبک های آن فقط برای صفحه نمایش استفاده کند در حالی که “print.css” به هدف چاپ استفاده می شود.

نکته: همچنین می توانید چندین نوع رسانه (هر کدام با کاما از هم جدا می شوند؛ مانند: media=”screen, print”) را به عنصر <link> اختصاص دهید.

انواع مختلف رسانه

در جدول زیر انواع رسانه ها مختلف آورده شده است که ممکن است انواع دستگاه های مختلف، از قبیل چاپگر، دستگاه های دستی (مانند موبایل)، صفحه نمایش رایانه و … مورد هدف قرار دهد.

هشدار: اگرچه چندین نوع رسانه وجود دارد که می توانید انتخاب کنید، اما اکثر مرورگرها فقط از انواع رسانه all، screen  و print  پشتیبانی می کنند.